JQuery设置数据滑动展示效果

最新推荐文章于 2022-01-19 17:39:29 发布

原创最新推荐文章于 2022-01-19 17:39:29 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery #ViewUI

JQuery 数据滑动专栏收录该内容

1 篇文章

订阅专栏

本文指导您如何创建一个展示数据轮滑效果的HTML页面，包括引入必要的JS和CSS文件，实现页面布局与动态滚动效果。

新建一个index.html页面，写入代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据轮滑效果</title>
    <script type = "text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type = "text/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css" />
</head>
<body>
<div id="scrollDiv">
    <div>
        <div><a href='http://www.miiceic.org.cn/'>石家庄</a></div>
        <div><a href='http://www.ciitn.com/'>衡水</a></div>
        <div><a href="http://www.amboedu.com/">邯郸</a></div>
    </div>
</div>
</body>
</html>

在index.css中设置css样式

div,div
{
      margin:0;
      padding:0
}
#scrollDiv
{
      width:300px;
      height:25px;
      line-height:25px;
      border:#ccc 1px solid;
      overflow:hidden
}
#scrollDiv div
{
      height:25px;
      padding-left:10px;
}

在index.js中设置JS事件

function AutoScroll(obj){
            $(obj).find("div:first").animate({
                marginTop:"-25px"
            },500,function(){
                $(this).css({marginTop:"0px"}).find("div:first").appendTo(this);
            });
        }
        $(document).ready(function(){
            setInterval('AutoScroll("#scrollDiv")',1000)
        });