实例⼀：
1<html>
剖布机2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4<title>滚动板</title>
5<style type="text/css">
6body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; }
7.scrollUl { overflow:hidden; position:relative; }
8#scrollUlTest1 {height:80px;}
9#scrollUlTest2 {height:120px;}
10.scrollUl ul, .scrollUl li { margin:0; padding:0; list-style:none outside; }
11.scrollUl ul { position:absolute; }
12.scrollUl li { height:20px; }
13</style>
14<script type="text/javascript" language="javascript">
15// containerId 滚动板外层节点的 ID
16// numViews 分⼏屏滚动，需要滚动显⽰的总⾏数应该是分屏数的整倍数。
17// showTime 每屏固定住时显⽰的时间，单位毫秒 18// scrollTime 每次滚动⼀屏⽤的时间，单位毫秒
19var ScrollUl=function(containerId, numViews, showTime, scrollTime) {
20//定时器变量，因为有移到层上时停⽌滚动的事件处理，⽽那时可能还没开始定时器呢，所以先把这个变量声明出来。 21this.timer=null;
22this.numViews = numViews;
23this.showTime = showTime;
24this.scrollTime = scrollTime;
26var ulChild = ElementsByTagName('ul');
27var ul = ulChild[0];
28//ul 是未使⽤ CSS 明确指定⾼度的，IE 中⽤ realstyle 取不到⾼度，只能得到 auto，⽽ getBoundingClientRect() 是 IE 和 FF 都⽀持的⽅式。 29var rect = ul.getBoundingClientRect();
30var heightAll = rect.bottom - p;
31var heightView = heightAll / this.numViews;
32var msPerPx = this.scrollTime / heightView;
33//复制出⼀份来，接在原块的后⾯，⽤于头接尾的显⽰
34var ulCopy = ul.cloneNode(true);
35 p = heightAll+'px';
37var itself = this;
39var scrollView = function() {
40var oldTop = (''==p) ? 0: parseInt(p) ;
41//移动到顶后，把位置复原，两个块继续从 0 开始向上移。
42if (oldTop < -heightAll)
43 {
44 oldTop = 0;
45 }
46 p = (oldTop - 1) +'px';
47 p = (oldTop + heightAll- 1) +'px';
48//每滚⼀整屏多停⼀会。oldTop-1 是为了让其停在整数位置。
49var duration = (0 == ((oldTop-1) % heightView)) ? itself.showTime:msPerPx;
50 itself.timer = setTimeout(scrollView, duration);
51 };
52//把 slide 定义为 prototype 的⽅法时，似乎这样 setTimeout(itself.slide, itself.showTime); 定时操作不灵，⽽只能是局部函数才能定时操作，如果带参数，还得封装成匿名函数： 53 itself.timer = setTimeout(scrollView, itself.showTime);
54//⿏标移上时停⽌滚动
56 window.clearTimeout(itself.timer);
57 };
58//⿏标移开时继续滚动，不⽤区分当时是在整屏停⽌还是滚动中了，全都按静⽌时间来延时就得了。
60 itself.timer = setTimeout(scrollView, itself.showTime);
61 };
62 };
63 load = function() {
64//第⼀个总共 20 ⾏，每次显⽰ 2⾏，分 10 屏
65var s1 = new ScrollUl('scrollUlTest1', 10, 2000, 1000);
66//第⼆个总共 18 ⾏，每次显⽰ 6 ⾏，分 3 屏
67var s2 = new ScrollUl('scrollUlTest2', 3, 3000, 2000);
68 };
69</script>
70</head>
71<body>
72<h1>通⽤滚动板演⽰</h1>
73<h4>第1组</h4>
74<div class="scrollUl" id="scrollUlTest1">
75<ul>
stc2052
76<li>第 1 条内容</li>
脱硝催化剂成分
77<li>第 2 条内容</li>
78<li>第 3 条内容</li>
79<li>第 4 条内容</li>
80<li>第 5 条内容</li>
81<li>第 6 条内容</li>
82<li>第 7 条内容</li>
83<li>第 8 条内容</li>
84<li>第 9 条内容</li>
85<li>第 10 条内容</li>
86<li>第 11 条内容</li>
87<li>第 12 条内容</li>
88<li>第 13 条内容</li>
89<li>第 14 条内容</li>
90<li>第 15 条内容</li>
91<li>第 16 条内容</li>
92<li>第 17 条内容</li>
93<li>第 18 条内容</li>
94<li>第 19 条内容</li>
95<li>第 20 条内容</li>
96</ul>
97</div>
98<h4>第2组</h4>
99<div class="scrollUl" id="scrollUlTest2">
100<ul>
101<li>第 1 条内容</li>
102<li>第 2 条内容</li>
agps103<li>第 3 条内容</li>
104<li>第 4 条内容</li>
105<li>第 5 条内容</li>
106<li>第 6 条内容</li>
107<li>第 7 条内容</li>
108<li>第 8 条内容</li>
109<li>第 9 条内容</li>
110<li>第 10 条内容</li>
111<li>第 11 条内容</li>
112<li>第 12 条内容</li>
113<li>第 13 条内容</li>
114<li>第 14 条内容</li>
115<li>第 15 条内容</li>
116<li>第 16 条内容</li>
117<li>第 17 条内容</li>
118<li>第 18 条内容</li>
119</ul>
120</div>
121</body>
122</html>
实例⼆：
1<html>
2<head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4<title>jQuery⽂字⽆缝滚动效果代码</title>
5<style type="text/css">
6li{list-style: none;}
7.buy-list {height: 100px;overflow: hidden;line-height: 20px;}
8</style>
9<script src="apps.bdimg/libs/jquery/1.10.2/jquery.min.js"></script> 10<script type="text/javascript">
11// JavaScript Document
12 (function($){
13 $.fn.myScroll = function(options){
14//默认配置
15var defaults = {
16 speed:40, //滚动速度，值越⼤速度越慢
17 rowHeight:24 //每⾏的⾼度
18 };
19var opts = $.extend({}, defaults, options),intId = [];
20function marquee(obj, step){
21 obj.find("ul").animate({
22 marginTop: '-=1'
23 },0,function(){
24var s = Math.abs(parseInt($(this).css("margin-top")));
25if(s >= step){
26 $(this).find("li").slice(0, 1).appendTo($(this));
27 $(this).css("margin-top", 0);
28 }
29 });
30 }
31this.each(function(i){
32var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
33 intId[i] = setInterval(function(){
34if(_this.find("ul").height()<=_this.height()){
35 clearInterval(intId[i]);
36 }else{
37 marquee(_this, sh);陶瓷颗粒
38 }
39 }, speed);
40 _this.hover(function(){
41 clearInterval(intId[i]);
42 },function(){
43 intId[i] = setInterval(function(){
44if(_this.find("ul").height()<=_this.height()){
45 clearInterval(intId[i]);
46 }else{
47 marquee(_this, sh);
48 }
49 }, speed);
50 });
51 });
52 }
53 })(jQuery);
54 $(document).ready(function(){
55 $('.buy-list li:even').addClass('lieven');
56 })
57 $(function(){
58 $(".buy-list").myScroll({
59 speed:200, //数值越⼤，速度越慢
60 rowHeight:20 //li的⾼度
61 });
62 });
63</script>
64</head>
65<body>
66<div class="buy-list">
67<ul>
68<li>1、蓝瘦⾹菇</li>
69<li>2、蓝瘦⾹菇</li>
70<li>3、蓝瘦⾹菇</li>
71<li>4、蓝瘦⾹菇</li>
72<li>5、蓝瘦⾹菇</li>
73<li>6、蓝瘦⾹菇</li>
74<li>7、蓝瘦⾹菇</li>
75<li>8、蓝瘦⾹菇</li>
76</ul>
77</div>
78</body>
79</html>
实例三：
1<!DOCTYPE html>
2<html >
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<meta name="keywords" content=""/>
6<meta name="description" content=""/>
7<title>左右⽆间断滚动效果</title>
8<style type="text/css" media="all">
9.d1 {margin:10px auto;width:200px;height:auto;overflow:hidden;white-space:nowrap;}
10.d2 {margin:0px auto;background-color:#FF9933;}梭织机
11.div2 {width:auto;height:auto;font-size:12px;float:left;overflow:hidden;}
12ul{margin:0px;padding:9px;list-style:none;line-height:19px;font-size:12px;}
13a:link,a:visited{color:#3F78CF;text-decoration:none;}
14a:hover{color:#FF00CC;text-decoration:underline;}
15</style>
16<script language="javascript" type="text/javascript">
17var s,s2,s3,s4,timer;
18function init(){
19 s=getid("div1");
20 s2=getid("div2");
21 s3=getid("div3");
22 s4=getid("scroll");
23 s4.style.width=(s2.offsetWidth*2+100)+"px";
24 s3.innerHTML=s2.innerHTML;
25 timer=setInterval(mar,30)
26 }
27function mar(){
28if(s2.offsetWidth<=s.scrollLeft){
29 s.scrollLeft-=s2.offsetWidth;
30 }else{s.scrollLeft++;}
31 }
32function getid(id){
ElementById(id);
34 }
35 load=init;
36</script>
37</head>
38<body>
39<div class="d1" id="div1" onmouseover="clearInterval(timer)" onmouseout="timer=setInterval(mar,30)"> 40<div class="scroll" id="scroll">
41<div class="div2" id="div2">
42<ul>
43<li>蓝瘦⾹菇蓝瘦⾹菇蓝瘦⾹菇蓝瘦⾹菇蓝瘦⾹菇蓝瘦⾹菇</li>
44</ul>
45</div>
46<div id="div3" class="div2"></div>
47</div>
48</div>
49</body>
50</html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议