>

【基础】JQuery新闻滚动的实现方法

- 编辑:555彩票 -

【基础】JQuery新闻滚动的实现方法

.mouseover()  //经过子元素也会触发
.mouseenter()  //经过被选元素才会触发

.mouseout()  //离开子元素也会触发
.mouseleave()   //离开被选元素才会触发

.Hide()      //隐藏
.Show()     //显示

.FadeIn()     //淡入
.FadeOut()   //淡出

 1 <script type="text/javascript">
 2 
 3         var t = setInterval('AutoScroll(".isBIM_single_news")', 2000);
 4 
 5         $(document).ready(function ()
 6         {
 7            
 8             $("li","#news_ul").mouseenter(function ()
 9             {
10                 clearInterval(t);
11                 $("#news_content", this).css("color", "red");
12             })
13 
14             $("li", "#news_ul").mouseleave(function ()
15             {
16                 t = setInterval('AutoScroll(".isBIM_single_news")', 2000);
17                 $("#news_content", this).css("color", "#e45121");
18 
19             })
20 
21             $("li", "#categories").mouseenter(function () {
22                 $(this).css("background-color", "#c3cbdb");
23             })
24 
25             $("li", "#categories").mouseleave(function () {
26                 $(this).css("background-color", "white");
27             })
28 
29         });
30 
31         function AutoScroll(obj)
32         {
33             $(obj).find("ul:first").animate({ marginTop: "-170px" }, 1200, function ()
34             {
35                 $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
36              });
37         }
38     </script>

 1  <section id="isBIM_news_content">
 2                 <div class="isBIM_single_news">
 3                     <ul id="news_ul">
 4                         <li>
 5                             <div id="news_content">快速过滤模块属于通用模块,用户可不限数量从Revit元素选择所需元素,并对元素执行选择,隔离,隐藏操作。</div>
 6                             <div id="news_datetime">2016-05-05</div>
 7                             <hr />
 8                         </li>
 9                         <li>
10 
11                             <div id="news_content">新闻联播准备开始。</div>
12                             <div id="news_datetime">2016-05-04</div>
13                             <hr />
14                         </li>
15                         <li>
16                             <div id="news_content">美国队长3于2016年5月6日上映,该片由Marvel与sony娱乐共同提供版权,非常精彩。</div>
17                             <div id="news_datetime">2016-05-11</div>
18                             <hr />
19                         </li>
20                     </ul>
21                 </div>
22   </section>

555彩票官网首页,自己做网站正好用到,所有消息是放在一个Div层里的ul中,每条消息是放在ul的li中。li中可根据自己需求加入一些<a>,<image>,<div>。可作为前端测试使用。

本文由新闻发布,转载请注明来源:【基础】JQuery新闻滚动的实现方法