屏幕滚动实现(收藏)

最新推荐文章于 2025-12-09 09:34:02 发布

转载最新推荐文章于 2025-12-09 09:34:02 发布 · 863 阅读

文章标签：

#function #border #class #百度 #div

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

本文展示了如何使用HTML、CSS和JavaScript实现类似于优快云的滚动效果，包括使用定时器滚动列表项并平滑过渡。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>test</title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <style type="text/css">
            ul,li{
                margin:0;
                padding: 0;
                list-style: none;
            }
            #content{
                border: 1px solid #ddd;
                height:30px;
                overflow: hidden;
            }
            .ulCss li{
                height:30px;
                line-height: 30px;
                font-size: 12px;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                var i=0;
                var size = $(".ulCss li").size();
                setInterval(function (){
                    i++;
                    if(i >=size){
                        i=0; 
                        $("#content").animate({scrollTop:i*30 },10);
                    }else{
                        $("#content").animate({scrollTop:i*30 },500);
                    }
                }, 2000);
            });
        </script>
    </head>
    <body>
        <div id="content">
            <ul class="ulCss">
                <li>百度</li>
                <li>谷歌</li>
                <li>火狐</li>
                <li>苹果</li>
            </ul>s
        </div>
    </body>
</html>

仿优快云的滚动效果：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">  
        ul{
            margin: 0px;
            padding: 0px;
        }
        ul li{
            list-style: none;
        }
        a{ 
            text-decoration:none;
        }
        .scrollDiv {
            position: absolute;
            top: 100px;
            left: 100px;
            right: 0px;
            background-color: #ccc;
            /*高度固定*/
            height: 29px;
            /*隐藏多余的部分*/
            overflow: hidden;
            font-weight: normal;
            font-size: 14px;
            line-height: 29px;
            border: 1px solid red;
        }
    </style>  
    <script type="text/javascript">   
        //滚动插件
        (function($){
            $.fn.extend({
                Scroll:function(opt,callback){
                    //参数初始化;初始化配置
                    if(!opt) var opt = {
                    };
                    //this表示div元素;获取div下的第一个ul的jQuery对象
                    var _this = this.eq(0).find("ul:first");
                    //获取行高;scrollDiv的高度;第一个列表li的高度
                    var lineH = _this.find("li:first").height();
                    //每次滚动的行数，默认为一屏，即父容器高度
                    var line = opt.line ? parseInt(opt.line,10) : parseInt(this.height()/lineH,10);
                    ////卷动速度，数值越大，速度越慢（毫秒）
                    var speed = opt.speed ? parseInt(opt.speed,10) : 500;
                    //滚动的时间间隔（毫秒）
                    var timer = opt.timer ? parseInt(opt.timer,10) : 4000; 
                    if(line == 0){
                       line=1; 
                    } 
                    var upHeight = 0 - line * lineH;
                    //滚动函数
                    var scrollUp = function(){
                        //_this为ul列表
                        _this.animate({
                            //往上移29px;
                            marginTop:upHeight
                        },speed,function(){
                            for(var i=1;i<=line;i++){
                                //把第一个li加到ul的末尾
                                _this.find("li:first").appendTo(_this);
                            }
                            //再置为0
                            _this.css({marginTop:0});
                        });
                    };
                    //鼠标事件绑定
                    _this.hover(function(){
                        clearInterval(_this.timerID);
                    },function(){
                        _this.timerID = setInterval(scrollUp,timer);
                    }).mouseout();
                }
            });
        })(jQuery);
        $(document).ready(function(){
            $("#scrollDiv").Scroll({line:1,speed:50,timer:50});
        });
    </script>  
</head>  
<body>  
    <div class="mainContent">
        <div id="scrollDiv" class="scrollDiv">
            <ul style="margin-top:0px;">
                <li><a href="http://www.baidu.com" target="_blank" title="百度">百度</a></li>
                <li><a href="http://www.google.com.cn" target="_blank" title="谷歌">谷歌</a></li>
                <li><a href="http://www.qq.com" target="_blank" title="QQ">QQ</a></li>
            </ul>
        </div>
    </div>
</body>  
</html>