发表日期:2014-03-20 文章作者:爱永设计 浏览次数:89421 次
今天做网站时,既然又遇到了这个无缝图片由右向左滚动的问题,这次爱永设计保存一份。
一个普通的无缝图片由右向左滚动
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无缝图片由右向左滚动</title>
</head>
<body>
<style type=”text/css”>
<!–
#demo {
background: #FFF;
overflow: hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
–>
</style>
<div id=”demo”>
<div id=”indemo”>
<div id=”demo1″>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2014/03/hlmoban017te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2014/01/hlmoban016te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/10/hlmoban015te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban014te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban013te.jpg” border=”0″ /></a>
<a href=”#”><img src=”http://mb.aysheji.com/wp-content/uploads/2013/07/hlmoban012te.jpg” border=”0″ /></a>
</div>
<div id=”demo2″></div>
</div>
</div>
<script>
<!–
var speed=10;
var tab=document.getElementById(“demo”);
var tab1=document.getElementById(“demo1”);
var tab2=document.getElementById(“demo2”);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
–>
</script>
</body>
</html>
备注:只有js代码放在要执行的代码下面才会起作用。
标签:网站建设, js效果日期:2021-04-30 浏览次数:136024 次
日期:2021-04-30 浏览次数:135929 次
日期:2021-04-30 浏览次数:135805 次
日期:2021-04-30 浏览次数:135781 次
日期:2021-04-30 浏览次数:135729 次
开发日期:2021-06-21 浏览次数:651490 次
开发日期:2021-04-21 浏览次数:710326 次
开发日期:2020-05-03 浏览次数:767829 次
开发日期:2019-12-02 浏览次数:746830 次
开发日期:2019-10-02 浏览次数:1004984 次
日期:2016-06-04 浏览次数:186111 次
日期:2021-06-18 浏览次数:19992 次
日期:2013-07-19 浏览次数:13263 次
日期:2012-06-10 浏览次数:15600 次
日期:2013-12-29 浏览次数:82292 次
致力于互联网品牌建设与网络营销,专业领域包括网站建设、网站模板、移动互联网营销、wordpress平台开发等,服务范围涵盖基础的域名服务、主机 服务;企业邮箱、云服务器、网络营销等应用服务,为不同类型的客户提供良好的互联网应用定制解决方案,帮助客户在新的全球化互联网环境中保持优势。
爱永设计工作室一直致力于品牌精美的网页设计、网页制作DIV+CSS布局、JS效果、精美网站模板、标志设计、专业仿站, 低廉的价格,真诚的服务,我们拥有全国各地的客户群体和各行业的成功案例。以一流的服务,出色的网页设计和制作能力,认真严谨的工作态度为客户提供优质满意的服务。期待与您的合作!
Copyright © 2012 - 2024 aysheji.com All Rights Reserved 爱永设计 版权所有
邮箱:aysheji@163.com 在线客服:276583799 模板演示地址:www.aymoban.com 备案号:京ICP备13060102号-3
服务内容: 网页设计 网站建设 网站制作 网站模板 婚庆网站模板 摄影网站 手机网站制作 自适应网站制作