zoukankan      html  css  js  c++  java
  • jquery 新闻滚动效果

    $(function () {
         var scrollTimer = null;
         var delay = 2000;
         //1.鼠标对新闻触发mouseout事件后每2s调用scrollNews()
         //2.鼠标对新闻触发mouseover事件后停止调用scrollNews()
         //3.初次加载页面触发鼠标对新闻的mouseout事件
         $('div.busMsg').hover(function () {
         clearInterval(scrollTimer);
         }, function () {
         scrollTimer = setInterval(function () {
         scrollNews();
         }, delay);
         }).triggerHandler('mouseout');
         });
         //滚动新闻
         function scrollNews() {
         var $news = $('div.busMsg>ul');
         var $lineHeight = $news.find('li:first').height();
         $news.animate({ 'marginTop': -$lineHeight + 'px' }, 600, function () {
         $news.css({ margin: 0 }).find('li:first').appendTo($news);
         });
         }

    <div id="busMsg" class="busMsg">
                <ul class="busMsgs">
                  <li>
                    
                  </li>

                </ul>
       </div>

  • 相关阅读:
    overflow:hidden三个作用
    git提交代码步骤以及创建issue事项
    Vue3.0中setup函数的使用
    样式rpx
    js函数
    数据类型
    进制转换
    事件绑定
    微信小程序基础
    “AI+”改变世界!不同领域的5大人工智能趋势
  • 原文地址:https://www.cnblogs.com/ckaifeng/p/5049154.html
Copyright © 2011-2022 走看看