JS实现文字向下滚动完整实例
本文实例讲述了JS实现文字向下滚动的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>京东、淘宝晒单</title>
<style>
@charset"utf-8";
/* @名称:base @功能:重设浏览器默认样式 */
/*防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体*/ html{ color:#000;background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
/*内外边距通常让各个浏览器样式的表现位置不同*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,arti
cle,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0;padding:0; color:#333; }
/*重设HTML5标签,IE需要在js中createElement(TAG)*/ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block; }
/*HTML5媒体文件跟img保持一致*/ audio,canvas,video{ display:inline-block;*display:inline;*zoom:1; }
/*要注意表单元素并不继承父级font的问题*/ body,button,input,select,textarea{ font:12px/1.5tahoma,arial,\\5b8b\\4f53; } input,select,textarea{ font-size:100%; }
/*去掉各Tablecell的边距并让其边重合*/ table{ border-collapse:collapse;border-spacing:0; }
/*IEbugfixed:th不继承text-align*/ th{ text-align:inherit; }
/*去除默认边框*/ fieldset,img{ border:0; }
/*ie678(q)bug显示为行内表现*/ iframe{ display:block; }
/*去掉firefox下此元素的边框*/ abbr,acronym{ border:0;font-variant:normal; }
/*一致的del样式*/ del{ text-decoration:line-through; }
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500; }
/*去掉列表前的标识,li会继承*/ ol,ul{ list-style:none; }
/*对齐是排版最重要的因素,别让什么都居中*/ caption,th{ text-align:left; }
/*来自yahoo,让标题都自定义,适应多个系统应用*/ h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:500; }
q:before,q:after{ content:''; }
/*统一上标和下标*/ sub,sup{ font-size:75%;line-height:0;position:relative;vertical-align:baseline; } sup{top:-0.5em;} sub{bottom:-0.25em;}
a{ color:#333; } /*让链接在hover状态下显示下划线*/ a:hover{ text-decoration:underline; color:#c00; }
/*默认不显示下划线，保持页面简洁*/ ins,a{ text-decoration:none; }
/*清理浮动*/ .fn-clear:after{ visibility:hidden; display:block; font-size:0; content:""; clear:both; height:0; } .fn-clear{ zoom:1;/*forIE6IE7*/ }
/*隐藏,通常用来与JS配合*/ body.fn-hide{ display:none; }
/*设置内联,减少浮动带来的bug*/ .fn-left,.fn-right{ display:inline; } .fn-left{ float:left; } .fn-right{ float:right; } #club{width:888px;height:190px;margin:40pxauto;border:1pxsolid#dddddd;border-radius:5px5px0px0px;} #club.modle{width:443px;height:190px;border-right:1pxsolid#dddddd;float:left;} #club.modle_right{border-right:none;float:right;} #club.modle.modle_title{width:443px;height:29px;line-height:29px;font-size:12px;font-weight:bold;background:#f3f3f3;} #club.modle.modle_titlespan{padding-left:7px;} #club.modle.modle_con{width:423px;margin:0auto;height:160px;overflow:hidden;} #club.modle.modle_conulli{border-bottom:1px#DDDdotted;position:relative;} #club.modle.modle_con.modle_img{width:50px;height:79px;text-align:center;} #club.modle.modle_con.modle_imgimg{margin-top:14px;} #club.modle.modle_con.modle_imgi{display:block;width:15px;height:17px;background:url(../image/buy.png)no-repeat;position:absolute;top:10px;left:60px;} #club.modle.modle_con.modle_text{width:337px;height:60px;overflow:hidden;margin-top:15px;padding-left:8px;} #club.modle.modle_con.modle_textpa{color:#005ea7;} #club.modle.modle_con.modle_textdiva{color:#999999;} </style> </head> <body> <divid="club"> <divclass="modle"id="modle_left"> <h2class="modle_title"><span>热门晒单</span></h2> <divclass="modle_con"> <ul> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho1。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho2。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho1。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho2。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho3。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> </ul> </div> </div> <divclass="modlemodle_right"id="modle_right"> <h2class="modle_title"><span>热门晒单</span></h2> <divclass="modle_con"> <ul> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho1。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho2。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho3。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho1。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> <liclass="fn-clear"> <divclass="modle_imgfn-left"><ahref="###"><imgsrc="image/ho2。jpg"></a><i></i></div> <divclass="modle_textfn-right"> <p><ahref="###">很不错的一款电热壶哟</a></p> <div><ahref="">速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多</a></div> </div> </li> </ul> </div> </div> </div><!--clubend--> <scripttype="text/javascript"src="jquery-1.4.js"></script> <script> $(function(){ functionscollDown(id,time){ varliHeight=$("#"+id+"ulli").height(); vartime=time||2500; setInterval(function(){ $("#"+id+"ul").prepend($("#"+id+"ulli:last").css("height","0px").animate({ height:liHeight+"px" },"slow")); },time); } scollDown("modle_left"); scollDown("modle_right",3000); }); </script> </body> </html>