当前位置：模板网首页 > 特效插件 > 文字特效 > js无缝向上滚动代码正文

js无缝向上滚动代码

作者：网页模板

大小：0MB

点击次数：

发布时间：2014-07-28 16:28

分享到：

特效介绍

js无缝向上滚动，可自定义滚动的内容。先运行下面代码查看效果：

<!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>js无缝向上滚动代码_我爱模板 www.5imoban.net</title> <style> *{margin:0px;padding:0px;border:0px;} body{font-size:12px} #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } #demo1 li a{ text-decoration:none; color:#000; } #demo2 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } #demo2 li a{ text-decoration:none; color:#000; } </style> </head> <body> <div id="demo" style="overflow:hidden;height:80px;width:280px;"> <ul id="demo1"> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0710/740.html" target="_blank">简约浅灰色企业网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0728/783.html" target="_blank">水蓝色化妆品企业PSD网站模板</a></li> <li><a href="http://www.5imoban.net/cssmoban/hangye/2014/0318/342.html" target="_blank">英文化妆品网站首页css模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0710/740.html" target="_blank">简约浅灰色企业网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0728/783.html" target="_blank">水蓝色化妆品企业PSD网站模板</a></li> <li><a href="http://www.5imoban.net/cssmoban/hangye/2014/0318/342.html" target="_blank">英文化妆品网站首页css模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0710/740.html" target="_blank">简约浅灰色企业网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0728/783.html" target="_blank">水蓝色化妆品企业PSD网站模板</a></li> <li><a href="http://www.5imoban.net/cssmoban/hangye/2014/0318/342.html" target="_blank">英文化妆品网站首页css模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0710/740.html" target="_blank">简约浅灰色企业网站PSD模板</a></li> <li><a href="http://www.5imoban.net/PSDmoban/qiye/2014/0728/783.html" target="_blank">水蓝色化妆品企业PSD网站模板</a></li> <li><a href="http://www.5imoban.net/cssmoban/hangye/2014/0318/342.html" target="_blank">英文化妆品网站首页css模板</a></li> </ul> <div id="demo2"></div> </div> <script> var speed=40 var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); 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> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

很简单，在这里不赘述。css可以自己定义。html部分的文字连接部分可以定义成任何内容，如，图片等，那样就变成了图片向上滚动了。

本文标签：
无缝滚动,js无缝滚动代码,js向上滚动

js无缝向上滚动代码效果预览 js无缝向上滚动代码本地下载

js无缝向上滚动代码

热门网页特效

热门PSD模板

热门CSS模板

热门网站源码

热门酷站欣赏

热门建站资源

热门建站教程

热门文章