jquery实现内容滚动

HTML代码:

           <div class="scollNews">
             <ul>
               <li><a href="#">1</a></li>
               <li><a href="#">2</a></li>
               <li><a href="#">3</a></li>
               <li><a href="#">4</a></li>
               <li><a href="#">5</a></li>
               <li><a href="#">6</a></li>
               <li><a href="#">7</a></li>
               <li><a href="#">8</a></li>
               <li><a href="#">9</a></li>
               <li><a href="#">10</a></li>
             </ul>
           </div>

jquery代码:

$(function(){
    var settime;
    $(".scollNews").hover(function(){
        clearInterval(settime);
    },function(){
        settime=setInterval(function(){
            var $first=$(".scollNews ul:first");     //获取类名下的第一个ul
            var height=$first.find("li:first").height();      //获取第一个li的高
            $first.animate({"marginTop":-height+"px"},100,function(){
                $first.css({marginTop:0}).find("li:first").appendTo($first);     //设置上边距为零,为了下一次移动做准备
            });
        },1000);
    }).trigger("mouseleave");    //自动触发元素的制定事件类型
})

注:只要修改动画时间就可以控制滚动的速度。

时间: 2024-10-20 12:24:11

jquery实现内容滚动的相关文章

jQuery 随滚动条滚动效果 (适用于内容页长文章)

直接入题! 当内容页比较长的时候,网站右侧一直是空白,不如放点有用的东西给用户看,最好不要放广告,因为那样很邪恶,你懂的. 好吧,昨天写了这个东西,jQuery滚动随动区块,代码如下: //侧栏随动 var rollStart = $('.feed-mail'), //滚动到此区块的时候开始随动 rollOut = $('.cookie-list'); //隐藏rollStart之后的区块 rollStart.before('<div class="da_rollbox">

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

Flexslider - 响应式的 jQuery 内容滚动插件

FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发中试试. 温馨提示:响应式效果需要再 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中才支持. 效果演示     插件下载 使用示例: <div class="flexslider"> <ul class="slides"&g

推荐一个内容滚动jquery插件

myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider/ 参考:http://plugins.jquery.com/myslider/ 例子代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>myslider</title><base target=&

jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例: 文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂

jQuery页面的滚动位置scrollTop、scrollLeft

Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候,一部分文档会从视线中消失.例如,Web页面不能完全放入浏览器窗口中,文档会向左或向上滚动,因此,页面的顶部和左边都会消失在视野之内.这意味着浏览器窗口的左上角和文档的左上角并不相同.如果试图放置一个新元素,例如,屏幕顶部的一个动态Banner:而如果只是试图将元素的left和top位置设置为0,将

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>

精心挑选10款优秀的 jQuery 图片左右滚动插件

在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQuery Slider 中挑选出适合自己的插件也是需要一些时间的.因此这篇文章给大家挑选了10款优秀的 jQuery Slider 插件,希望能帮助到你. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 M

Infinite Scroll - jQuery &amp; WP 无限滚动插件

无限滚动(Infinite Scroll)也成为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款 jQuery & WordPress 无限滚动插件可以帮助你轻松实现这个效果. 插件下载     效果演示 下面是所有的配置选项: $('.selector').infinitescroll({ loading: { finished: undefined, finishedMsg: "&l