美文网首页
jQuery置顶菜单

jQuery置顶菜单

作者: 邵毅超 | 来源:发表于2018-12-10 19:10 被阅读0次

jquery无缝滚动案例
html

<h3>最新动态</h3>
<div class="scrollNews" >
  <ul>
     <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
     <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
     <li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
     <li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
     <li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
     <li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
         <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
  </ul>
</div>

分析

1,ul整体 向上慢慢的走一个li的高度(margin-top为负值)
2,ul的第一个li放到最后面
3,ul整体突然快速margin-top:0;

js

$(function(){
  var timeid;
  var h=$(".scrollNews ul li:eq(0)").outerHeight();//获取li元素的高
    
  function move(){
        //1 ul整体 向上慢慢的走一个li的高度(margin-top为负值
        //最后一个function 是指 动画执行完毕后要做的函数
    $(".scrollNews ul").animate(
        {"margin-top":-h},
        500,
        function(){
            //2,ul的第一个li放到最后面
            var fi=$(".scrollNews ul li:eq(0)");
            $(".scrollNews ul").append(fi);
            //3,ul整体突然快速margin-top:0;
            $(".scrollNews ul").css("margin-top",0);
                timeid=setTimeout(function(){ move()},1500)
        }//回调函数 
    ); //animate ed
  }//move ed
   
  // 鼠标放上ul停止动画 鼠标离开开始动画
  $(".scrollNews").hover(function(){
    clearTimeout(timeid);
  },function(){
    move();
  }).trigger("mouseleave")
 //默认自动触下鼠标离开   
})

css

*{ padding:0; padding:0;}
body{ padding:50px;}
ul,ol{ list-style:none;}
h3,div,ul,li,ol{ margin:0; padding:0;}
.global_module h3{
    height:35px;
    line-height:35px; 
    text-align:center; 
    background-color:#369; 
    color:#f6f6f6;
}
.news ul li{
    height:30px; 
    line-height:30px; 
    padding-left:15px;
    color:#666; border-
    bottom:1px dashed #d0d0d0; 
}
.scrollNews{
    height:150px; 
    overflow:hidden; 
    border: 1px solid red;
}
.news{ 
    width:220px;
    border:1px solid #36C;
}

相关文章

  • jQuery置顶菜单

    jquery无缝滚动案例html 分析 1,ul整体 向上慢慢的走一个li的高度(margin-top为负值)2,...

  • 置顶菜单

    置顶菜单 body{margin:0px;} .logo_bar{ width:9...

  • 置顶菜单

    置顶菜单 $(function(){ $(w...

  • jquery 置顶按钮

    需求 返回到页面的最上方。这个功能在简书阅读的时候右下角也有,如下: 点击这个按钮,直接就返回到最上方了。 当文档...

  • jquery 导航菜单点击切换事件

    jquery 导航菜单点击切换事件

  • 前端

    1.事件冒泡 2.置顶菜单 3.无缝滚动

  • 无缝滚动,置顶菜单

    链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $...

  • 无缝滚动,置顶菜单

    链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $...

  • 无缝滚动,置顶菜单

    链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $...

  • jQuery实现三级菜单的代码

    代码来自:jQuery实现三级菜单的代码

网友评论

      本文标题:jQuery置顶菜单

      本文链接:https://www.haomeiwen.com/subject/rnpdhqtx.html