向上滚动类似跑马灯效果

最新推荐文章于 2021-06-03 23:50:19 发布

smartdot_guohr

最新推荐文章于 2021-06-03 23:50:19 发布

阅读量256

点赞数

分类专栏： source code 文章标签：互联网 IE Opera

source code 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

今天我给别的项目组的同事改js代码,跑马灯那种效果刚出来是空白,然后慢慢往上爬,但是要一出来就是内容,然后往上爬那种,弄了办天也不是很好,后来我们组同事回了家在网上给我狂搜代码,终于找到了.我现在把它贴出来和大家一起分享.


<html>
<HEAD>
<TITLE>西邮评估网</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
width:100%;
overflow:hidden;
font:12px/16px tahoma;
display:block;
text-decoration:none;
margin:2px;
color:#4a551c;
padding-left:2px;
text-align:left;
}
#demo a:hover {
color:#ff6600;
}

</STYLE>
</HEAD>
<body>
<div id="demo" style="overflow:hidden;height:132px;width:400px; border:1px solid #dde5bc; overflow:hidden;">
<div id=demo1> 
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
   <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
   <a href="#">代码来自互联网，我只不过稍加整理，希望大家多提意件……</a>
</div>
<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>

smartdot_guohr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
向上滚动类似跑马灯效果

今天我给别的项目组的同事改js代码,跑马灯那种效果刚出来是空白,然后慢慢往上爬,但是要一出来就是内容,然后往上爬那种,弄了办天也不是很好,后来我们组同事回了家在网上给我狂搜代码,终于找到了.我现在把它贴出来和大家一起分享.[code="java"]西邮评估网#demo a {width:100%;overflow:hidden;font:12px/16px ...
复制链接

扫一扫

专栏目录