JQuery设置数据滑动展示效果-技术博客集

JQuery设置数据滑动展示效果
编程技术 / houtizong 发布于 3年前 103

新建一个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)        });

上一篇：MAC 下 Git的安装与基本配置

下一篇：objective-c基础语法之数组NSArray、NSMutableArray

请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！

<div  style="font-size: 14px;">  <ul>   <li>新建一个index.html页面，写入代码： <pre class="js" name="code">&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang=&quot;en&quot;&gt;    &lt;meta charset=&quot;UTF-8&quot;&gt;    &lt;title&gt;数据轮滑效果&lt;/title&gt;    &lt;script type = &quot;text/javascript&quot; src=&quot;../js/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;    &lt;script type = &quot;text/javascript&quot; src=&quot;../js/index.js&quot;&gt;&lt;/script&gt;    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/index.css&quot; /&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;scrollDiv&quot;&gt;    &lt;div&gt;        &lt;div&gt;&lt;a href='http://www.miiceic.org.cn/'&gt;石家庄&lt;/a&gt;&lt;/div&gt;        &lt;div&gt;&lt;a href='http://www.ciitn.com/'&gt;衡水&lt;/a&gt;&lt;/div&gt;        &lt;div&gt;&lt;a href=&quot;http://www.amboedu.com/&quot;&gt;邯郸&lt;/a&gt;&lt;/div&gt;    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre> &nbsp;</li>   <li>在index.css中设置css样式<br /><pre class="java" name="code">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;}</pre> </li>   <li>在index.js中设置JS事件<br /><pre class="js" name="code">function AutoScroll(obj){            $(obj).find(&quot;div:first&quot;).animate({                marginTop:&quot;-25px&quot;            },500,function(){                $(this).css({marginTop:&quot;0px&quot;}).find(&quot;div:first&quot;).appendTo(this);            });        }        $(document).ready(function(){            setInterval('AutoScroll(&quot;#scrollDiv&quot;)',1000)        });</pre> &nbsp;</li>  </ul> </div>

留言需要登陆哦

技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];

文章归档

文章标签

友情链接

首页
关于我们

Auther ·HouTiZong: 侯体宗的博客