VenShop新版网店系统发布,支持电脑版 + 手机版 + APP + 微店

极致搜索引擎优化,自动推送百度 对接微信公众号,支持微信支付/支付宝/银联收款 短信验证码/通知功能,实时物流跟踪功能 老用户享受7折/买二送一等活动

付款方式 | 联系方式 | 网站地图 | 客服热线:17091006015


:783940、729220
技术中心
不间断连续图片滚动效果的制作方法 作者:shnxn  网站:我佛山人

以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:

  先制作向上滚动的效果:

  插入代码:

<!-- 指向链接图片url -->

<base href="http://www.venshop.com/">

<div id=demo
style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>

<div id=demo1>

<!-- 定义图片 -->

<img src="images/logo_1.gif">

<img src="images/logo/flashempire.gif">

<img src="images/logo.gif">

<img src="images/logo/5dmedia.gif">

<img src="images/logo/macromedia.gif">

<img src="images/logo/sucaiw.gif">

<img src="images/logo/blueieda.gif">

<img src="images/logo/htmlcn.gif">

<img src="images/logo/fwcn.gif">

</div>

<div id=demo2></div>

</div>



<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>



  制作向下滚动的效果:

  将上面“制作向上滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee(){

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>



  制作向左滚动的效果:

<base href="http://www.venshop.com/">

<div id=demo
style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>

<table align=left cellpadding=0 cellspace=0 border=0>

<tr>

<td id=demo1 valign=top><img src="images/logo_1.gif"><img src="images/logo/flashempire.gif"><img
src="images/logo.gif"><img src="images/logo/5dmedia.gif"><img src="images/logo/macromedia.gif"><img
src="images/logo/sucaiw.gif"><img src="images/logo/blueieda.gif"><img src="images/logo/htmlcn.gif"><img
src="images/logo/fwcn.gif">

</td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>



<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>



  制作向右滚动的效果:

  将上面“制作向左滚动的效果”中的红色字体Js部分替换成:

<script>

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>



  制作的方法就简单的介绍完成了。



转载请注明出自:凡人网络VenShop.Com
发现内容有误 / 侵犯您的版权 ↑相关文章:

关于我们 | 汇款方式 | 建站流程 | 联系方法 | 常见问题 | 新闻公告 | 加入收藏 | 留言本站

客服热线:022-85194902 邮箱:fuwu@venshop.com
®天津盈商科技有限公司版权所有 Powered By :TianJin YingShang KeJi Co.,Ltd.
软件著作权证书登记号:2006SRBJ0621   软著登字第BJ4429号
津ICP备17001798号
Copyright © 2002-2021 VENSHOP.COM. All Rights Reserved.