jQuery无缝滚动向上

最新推荐文章于 2024-02-02 11:31:24 发布

转载最新推荐文章于 2024-02-02 11:31:24 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenq/p/4924727.html

文章标签：

#javascript #ViewUI

本文介绍了一种利用HTML、CSS及jQuery实现的图片滚动效果。通过克隆现有的LI元素并调整其位置来达到连续滚动的效果。每30毫秒调整一次UL元素的位置，当滚动到一半高度时重置位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div{
            width: 200px;
            height: 240px;
            overflow: hidden;
            position: relative;
            border: 1px solid #d74147;
        }
        .div ul{
            width: 200px;
            height: 240px;
            position: absolute;
            margin: 0;
            padding: 0;
            
        }
        .div ul li{
            width: 200px;
            height: 60px;
            list-style-type: none;
        }
    </style>
    <script src="js/jquery-1.7.1.js"></script>
    <script>
        $(function(){

            //复制与现有的Li一样多个
            $('ul').find('li').clone().appendTo($('ul'));
            $('ul').height($('ul').find('li').length * $('ul').find('li').height());
            setInterval(function() {
                if($('ul').position().top < -$('ul').height()/2){
                    $('ul').css('top','0');
                }
                else{
                    $('ul').css('top',$('ul').position().top - 2 + 'px');
                }

            },30);
        });

    </script>
</head>
<body>
<div class="div" id="div1">
    <ul>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/1.jpg" /></li>
        <li><img src="img/1.jpg" /></li>

    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/shenq/p/4924727.html