当前位置:编程问答 > JS >

js上下滚动代码,谢谢

答案:提议没弄懂,我就猜了~! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/> <style type="text/css"> .list { height: 100px; text-overflow-y: hidden; overflow: hidden; width: 300px; border: 1px solid #000; padding:0 5px; } .active{background:#b00;color:#fff;} </style> </head> <body> <div id="list"> <div>生活, 一半是回忆, 一半是继续~~</div> <div>对自己苛刻,疲##惫....从来不想责怪别人,只想做好自己,也从来都是我的不对。</div> <div>前进、前进、再前进!哈哈</div> <div>人生如戏~!何必在意...</div> <div>找份开心的工作过早上8点到晚上18点,找个喜欢的女人过晚上18点到早上8点。这就是生活</div> <div>宁可高傲的发霉,也不低调的凑合。我们,那被逼出来的成熟~</div> </div> <script type="text/javascript"> var $ = $ || window; $.get = function (expr) { function clsMatcher(className){ return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var e = typeof expr == "string" ? document.getElementById(expr) : expr; var elem = { dom:e, addClass:function(className) { var oldCls = e.className; e.className = !oldCls ? className : clsMatcher(className).test(oldCls) ? oldCls : [oldCls,className].join(" "); return this; },remove:function() { e.parentNode && e.parentNode.removeChild(e); return this; },removeClass:function(className){ e.className =(e.className||"").replace(clsMatcher(className),"$1$2"); return this; },on:function(type, callback) { if (window.attachEvent) e.attachEvent("on" + type, callback); else e.addEventListener(type, callback, false); return this; },first:function(type) { var children = e.childNodes; for (var k = 0; k < children.length; k++) { if (children[k].nodeType == 3) continue; if (!type || children[k].tagName.toLowerCase() == type.toLowerCase()) return $.get(children[k]); } },appendTo:function(parent){ var p=parent.dom||parent; p.appendChild(e); return this; } }; var directions = ["Left","Top"]; for (var i = 0; i < directions.length; i++) { var method = "scroll" + directions[i]; elem[method] = function(val) { return arguments.length ? e[method] = val : e[method]; }; } var sides = ["Width","Height"]; for (var i = 0; i < sides.length; i++) { var side = sides[i]; elem[side.toLowerCase()] = function(val) { if (arguments.length) { e.style[side.toLowerCase()] = val + "px"; return this; } return e["offset" + side] || e[side]; } } return elem; }; function Timer(c) { var thread; var delay = c.delay || 100; var runner = c.run || typeof c == "function" ? c : function() { }; this.start = function() { !thread && (thread = window.setInterval(runner, delay)); return this; } this.stop = function() { var snapshot = thread; thread = null; snapshot && window.clearInterval(snapshot); return this; } } var list = $.get("list").addClass("list"); var increment = 5; var timer = new Timer(function() { var offset = list.scrollTop(); var first = list.first().addClass('active'); if (offset >= first.height()) { list.first().removeClass('active').remove().appendTo(list); list.scrollTop(increment); } else { list.scrollTop(Math.min(offset + increment,first.height())); } }); timer.start(); list.on("mouseover", timer.stop).on("mouseout", timer.start); </script> </body> </html>
其他:JS上下滚动图片 
<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left">
<div id=demo1> 
<img src="images/js01.gif" width="120" height="120">
<img src="images/js02.gif" width="120" height="120"> 
<img src="images/js03.gif" width="120" height="120">
<img src="images/js04.gif" width="120" height="120">
<img src="images/js05.gif" width="120" height="120">
<img src="images/js06.gif" width="120" height="120">
<img src="images/js07.gif" width="120" height="120">
<img src="images/js08.gif" width="120" height="120">
<img src="images/js09.gif" width="120" height="120">

</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> 

上一个:js获取下拉框的值
下一个:如何在JS里定义一个DATE类型的变量,并且这个变量在页面得到的是系统当前时间,并且在SERVLET里接收到

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,