javascript 列表定时滚动效果

HTML结构:

<div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20px auto;">
            <ul id="list">
                <li><a href="#">2222222222222222222222222</a></li>
                <li><a href="#">3333333333333333333333333</a></li>
                <li><a href="#">22222222222222222222222222</a></li>
                <li><a href="#">22222222222223222222222222</a></li>
                <li><a href="#">22222222222222422222222222</a></li>
                <li><a href="#">2222222222222252222222222</a></li>
                <li><a href="#">22222222225555552222222222</a></li>
                <li><a href="#">22222222222253333333222222</a></li>
                <li><a href="#">22222222277777777222222</a></li>
            </ul>
        </div>

js:

 /*
             * 列表定时滚动效果(javascript)
             * @listId :滚动列表ID
             * @listTagName :滚动元素
             * @scrollNum :设置滚动元素数量
             * @speed : 滚动速度
             */
            function fnScrollList(){
                 this.init.apply(this,arguments);
            }
            fnScrollList.prototype = {
                init:function(listId,TagName,scrollNum,speed){
                    var _this = this;
                    this.oList = this.$$(listId);
                    this.scrollTimer = null;
                    this.speed = speed || 1000;
                    this.scrollNum = scrollNum || 1;
                    this.TagName =TagName;
                    this.distance = this.oList.getElementsByTagName(TagName)[0].offsetHeight * this.scrollNum;//列表移动距离
                    this.oList.style.marginTop = 0 + "px";

                    this.oList.onmouseover = function(){
                        _this.pause();
                    }
                    this.oList.onmouseout = function(){
                        _this.scrollTimer= setTimeout(function(){
                            _this.play();
                        },_this.speed);
                    }
                    this.play();
                },
                play:function(){
                    var _this = this;
                    var options = {‘marginTop‘:‘-‘+_this.distance};
                    _this.anim(_this.oList,options,function(){ //回调函数,移动列表元素
                        for(var i = 0,j = 0;i<_this.scrollNum;i++){
                            var node = _this.oList.getElementsByTagName(_this.TagName)[j];
                            if(_this.TagName == "tr"){
                                _this.oList.getElementsByTagName(‘tbody‘)[0].appendChild(node);
                            }else{
                                _this.oList.appendChild(node);
                            }
                        }
                        _this.oList.style.marginTop = "0px";
                    });

                    _this.scrollTimer= setTimeout(function(){
                            _this.play(_this.distance);
                        },_this.speed);
                },
                pause:function(){
                    clearTimeout(this.scrollTimer);
                },
                //动画函数
                anim:function(oElement,oAttr,fnCallback){
                    var _this = this;
                    clearInterval(oElement.timer);
                    oElement.timer = setInterval(function(){
                        var bStop = true;
                        for(var property in oAttr){
                            var iCur = parseFloat(_this.css(oElement, property)); //获取当前位置属性值
                            var iSpeed = (oAttr[property] - iCur) / 5; //移动进度
                            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                            if (iCur != oAttr[property]) { //如果当前数值不等于目标数值,则数值递增
                                bStop = false;
                                _this.css(oElement, property, iCur + iSpeed);
                            }
                        }
                        if(bStop){
                            clearInterval(oElement.timer);
                            fnCallback && fnCallback.apply(_this, arguments);
                        }
                    },50);
                },
                //处理样式函数
                css:function(oElement, attr, value){
                    if (arguments.length == 2) {
                        return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr];
                    } else if (arguments.length == 3) {
                        switch (attr) {
                            case "top":
                            case "left":
                            case "marginTop":
                                oElement.style[attr] = value + "px";
                                break;
                            default:
                                oElement.style[attr] = value;
                                break;
                        }
                    }
                },
                $$:function(o){
                    if(o){
                        return document.getElementById(o);
                    }
                }
            };

函数调用:

var list = new fnScrollList(‘list‘,‘li‘,2,2000);

效果:

站点名称 AQI 类别
工业园区1 123 轻度污染
工业园区2 123 轻度污染
工业园区3 123 轻度污染
工业园区4 123 轻度污染
工业园区5 123 轻度污染
工业园区6 123 轻度污染
工业园区7 123 轻度污染
工业园区8 123 轻度污染
  • 2222222222222222222222222
  • 3333333333333333333333333
  • 22222222222222222222222222
  • 22222222222223222222222222
  • 22222222222222422222222222
  • 2222222222222252222222222
  • 22222222225555552222222222
  • 22222222222253333333222222
  • 22222222277777777222222

demo:

demo.zip

时间: 2024-10-12 21:45:07

javascript 列表定时滚动效果的相关文章

jQuery练手:仿新浪微博图片文字列表淡进淡出上下滚动效果

1.效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2.实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行. 3.运行环境 IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现 4.所有图片

html+css+javascript实现列表循环滚动示例代码

使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内容 1.关键代码:javascript: 代码如下: <script type="text/javascript"> var dome=document.getElementById("dome"); //获取节点 var dome1=document.ge

ASP.NET中使用JavaScript实现图片自动水平滚动效果

参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageScroll.aspx.cs" Inherits="SlideDemo.ImageScroll" %> <!DOCTYPE html><html xmlns="

JavaScript实现的购物车效果-效果好友列表

JavaScript实现的购物车效果,当然,可以在许多地方使用这种效果,朋友的.例如,在选择,人力资源模块.工资的计算,人才选拔等..下面来看一下班似有些车效果图: code: goodsCar.js:这个js写成了一个单独的文件.主要是控制上面的列表显示的. window.onload=function(){ initStore(); }; var goods=["火腿","美女","御姐","火星一日游","跑车

JavaScript实现的购物车效果-好友列表效果

JavaScript实现的购物车效果,当然这个效果可以运用在好多地方,比如好友的选择,人力资源模块,计算薪资,人员的选择等等.下面看类似某种购物车的效果图: code: goodsCar.js:这个js写成了一个单独的文件.主要是控制上面的列表显示的. window.onload=function(){ initStore(); }; var goods=["火腿","美女","御姐","火星一日游","跑车&quo

使用CSS和JavaScript创建基本的视差滚动效果

网页设计中2015年最主要的趋势无疑是视差滚动效应,没有任何迹象正在减弱.视差滚动将页面转换为有趣的幻灯片,其中页面上的不同元素相对于页面的滚动以不同的速度移动.在本教程中,我们将熟悉如何在CSS和JavaScript中创建基本的视差滚动页面,并深入了解整个过程中的shebang. ? 视差滚动效果的解剖 维基百科简洁地将视差滚动效果定义 为: "计算机图形学中的一种特殊的滚动技术,其中背景图像通过相机移动比前景图像慢,在2D视频游戏中产生深度幻觉并增加沉浸感." 由于它属于网页,视差

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> 无间断滚动scrollLeft套用模板 </title> <meta name="Keywords" content=""> <meta name="Description" content=""

Javascript图片无缝滚动

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: 先睹为快:demo <!DOCTYPE html>

JQuery图片轮播滚动效果(网页效果--每日一更)

今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:http://webfront.verynet.cc/pc/index.html 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的后面,详细请看代码. HTML结构代码如下: 1 <div class="content"> 2 <div class="box"> 3 /*滚动的盒子*/ 4 <ul id