<js>jquery实现新闻滚动效果，ie11支持-蒲公英云

<js>jquery实现新闻滚动效果，ie11支持

矫情吗；* 2022-06-13 09:45 346阅读 0赞

前端
引入jquery包

<h3>最新新闻</h3>
<div class="scrollNews" >
    <ul>
        <li><a href="#" class="tooltip" title="预言中国房价10年后如白菜价">专家预言中国房价10年后如白菜价</a></li>
        <li><a href="#" class="tooltip" title="最新评论">最新评论</a></li>
        <li><a href="#" class="tooltip" title="完了，10年后连白菜都吃不起了">完了，10年后连白菜都吃不起了</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="囤白菜，等10年后在卖">囤白菜，等10年后在卖</a></li>
    </ul>
</div>

CSS

<style type="text/css"> *{ margin:0; padding:0;} .scrollNews{ width:256px;height:85px;overflow:hidden;background:#FFFFFF;border: 1px solid #AAAAAA;} .scrollNews ul{ padding:10px 0 5px 15px;} .scrollNews ul li{ height:20px;list-style-type:none; font-size:small;} a{ text-decoration:none;} </style>

这里需要注意的是*{ margin:0; padding:0;} 的使用。margin：设置外边距。padding：设置内边距。如果不使用此属性，在后面写JS代码时会破坏页面，因为div中有默认的内外边距；

JS代码

<script type="text/javascript"> $(function () { var settime; $(".scrollNews").hover(function () { clearInterval(settime); }, function () { settime = setInterval(function () { var $first = $(".scrollNews ul:first");//选取div下的第一个ul 而不是li； var height = $first.find("li:first").height(); //获取第一个li的高度，为ul向上移动做准备； $first.animate({ "marginTop": -height + "px" }, 600, function () { $first.css({ marginTop: 0 }).find("li:first").appendTo($first); //设置上边距为零，为了下一次移动做准备 }); }, 3000); }).trigger("mouseleave"); //trigger()方法的作用是触发被选元素的制定事件类型 }); </script>