js特效

一：平滑滚动

[html]  view plain  copy

1. <div class="prolist" id="prolistdiv" style="height:375px;overflow:hidden">  
2.                 <ul id="prolist" >  
3.                     ...............  
4.                 </ul>  
5.             </div>  

overflow:hidden这句很关键

js

[javascript]  view plain  copy

1. //div     //方向    //每个单元宽  //速度  //运动频率  
2.    function objectMarqueeUD(object, direction, height, speed, lv, count) {  
3.        this.object = object;  
4.        this.ok = true;  
5.        if (lv) {  
6.            this.lv = lv;  
7.        } else {  
8.            this.lv = 1;  
9.        }  
10.         //this.table = object.getElementsByTagName("table")[0];  
11.         //var rows = this.table.rows;  
12.        //var tdcount = this.table.rows.length;  
13.        var tdcount = 30;  
14.        this.sample = 0;  
15.   
16.        for (var i = 0; i < tdcount; i++) {  
17.            this.sample += height;  
18.        }  
19.   
20.   
21.        if (this.sample > parseInt(this.object.style.height)) {  
22.            //克隆对象  
23.            for (var i = 0; i < count; i++) {  
24.                this.object.innerHTML += this.object.innerHTML;  
25.            }  
26.            var othis = this;  
27.            switch (direction) {  
28.                case "up":  
29.                    othis.object.scrollTop = 0;  
30.                    setInterval(function () {  
31.                        if (othis.ok) {  
32.                            othis.object.scrollTop = othis.object.scrollTop + othis.lv;  
33.                            if (othis.object.scrollTop >= othis.sample) {  
34.                                othis.object.scrollTop = 0;  
35.                            }  
36.                        }  
37.                    }, speed);  
38.                    break;  
39.                case "down":  
40.                    var rightvalue = othis.sample * 2 - parseInt(othis.object.style.height);  
41.                    othis.object.scrollTop = rightvalue;  
42.                    setInterval(function () {  
43.                        if (othis.ok) {  
44.                            othis.object.scrollTop -= othis.lv;  
45.                            if (othis.object.scrollTop <= (othis.sample - parseInt(othis.object.style.height))) {  
46.                                othis.object.scrollTop = rightvalue;  
47.                            }  
48.                        }  
49.                    }, speed);  
50.                    break;  
51.            }  
52.            this.object.onmouseover = function () { othis.ok = false }; //鼠标移上时清除定时器达到滚动停止的目的  
53.            this.object.onmouseout = function () { othis.ok = true }; //鼠标移开时重设定时器  
54.        }  
55.    }  

 var oMarquee1 = new objectMarqueeUD(document.getElementById("prolistdiv"), "up", 200, 90, 1, 1);

一：平滑滚动

[html]  view plain  copy

1. <div class="prolist" id="prolistdiv" style="height:375px;overflow:hidden">  
2.                 <ul id="prolist" >  
3.                     ...............  
4.                 </ul>  
5.             </div>  

overflow:hidden这句很关键

js

[javascript]  view plain  copy

1. //div     //方向    //每个单元宽  //速度  //运动频率  
2.    function objectMarqueeUD(object, direction, height, speed, lv, count) {  
3.        this.object = object;  
4.        this.ok = true;  
5.        if (lv) {  
6.            this.lv = lv;  
7.        } else {  
8.            this.lv = 1;  
9.        }  
10.         //this.table = object.getElementsByTagName("table")[0];  
11.         //var rows = this.table.rows;  
12.        //var tdcount = this.table.rows.length;  
13.        var tdcount = 30;  
14.        this.sample = 0;  
15.   
16.        for (var i = 0; i < tdcount; i++) {  
17.            this.sample += height;  
18.        }  
19.   
20.   
21.        if (this.sample > parseInt(this.object.style.height)) {  
22.            //克隆对象  
23.            for (var i = 0; i < count; i++) {  
24.                this.object.innerHTML += this.object.innerHTML;  
25.            }  
26.            var othis = this;  
27.            switch (direction) {  
28.                case "up":  
29.                    othis.object.scrollTop = 0;  
30.                    setInterval(function () {  
31.                        if (othis.ok) {  
32.                            othis.object.scrollTop = othis.object.scrollTop + othis.lv;  
33.                            if (othis.object.scrollTop >= othis.sample) {  
34.                                othis.object.scrollTop = 0;  
35.                            }  
36.                        }  
37.                    }, speed);  
38.                    break;  
39.                case "down":  
40.                    var rightvalue = othis.sample * 2 - parseInt(othis.object.style.height);  
41.                    othis.object.scrollTop = rightvalue;  
42.                    setInterval(function () {  
43.                        if (othis.ok) {  
44.                            othis.object.scrollTop -= othis.lv;  
45.                            if (othis.object.scrollTop <= (othis.sample - parseInt(othis.object.style.height))) {  
46.                                othis.object.scrollTop = rightvalue;  
47.                            }  
48.                        }  
49.                    }, speed);  
50.                    break;  
51.            }  
52.            this.object.onmouseover = function () { othis.ok = false }; //鼠标移上时清除定时器达到滚动停止的目的  
53.            this.object.onmouseout = function () { othis.ok = true }; //鼠标移开时重设定时器  
54.        }  
55.    }  

 var oMarquee1 = new objectMarqueeUD(document.getElementById("prolistdiv"), "up", 200, 90, 1, 1);