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"); //自动触发元素的制定事件类型
})

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

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

  1. 推荐一个内容滚动jquery插件

    myslider是一个内容滚动jquery插件,版本0.1.2的每次滚动内容是一行内容,可以是文字,可以是一个链接,还可以是图片. 官方网址:http://keleyi.com/jq/myslider ...

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

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

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

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

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

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. 10 个 jQuery 的无限滚动的插件:

    很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1.  ...

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

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  8. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  9. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

随机推荐

  1. backbone库学习-model

    backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.cs ...

  2. AndroidManifest.xml配置文件

    AndroidManifest.xml启动文件 主activity: <activity android:name="com.example.android01.MainActivit ...

  3. 数学 - Whu 1603 - Minimum Sum

    Minimum Sum Problem's Link ------------------------------------------------------------------------- ...

  4. Android流量控制——列表页面

    1.最简单的模式: 设计: 1.将页码值传给服务器,让服务器返回对应的页码数据 2.数据缓存:只缓存第一页数据. 好处: 1.实现简单.无脑 坏处: 1.浪费流量,如果用户一直在等某个人发送消息的话. ...

  5. Web设计之网页布局CSS技巧

    1.两列布局 1.1.左列固定,右列自适应 #left{    width:190px; float:left; } #right{    margin-left:205px; } 1.2.右列固定, ...

  6. jQuery漂亮图标的垂直导航菜单

    效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单 是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量 ...

  7. HTTP & HTTPs

    HTTP HTTP 消息 HTTP 方法 参考 [1]. HTTP 协议初识 - 阮一峰: HTTPS 参考 [1]. HTTPS 升级指南 - 阮一峰:

  8. 基于吉日嘎拉的通用权限管理Webform版老界面bug修复

    虽然弄了新界面<基于吉日嘎底层架构的通用权限管理Web端UI更新:参考DTcms后台界面>,但老界面的一点菜单显示的问题还是让我这种强迫症揪心,终于今晚可以美美的睡觉了. 老代码用了Ses ...

  9. 基于吉日嘎底层架构的Web端权限管理操作演示-组织机构管理

    软件是服务组织的系统,而任何组织一定会涉及到权限:所以权限控制是一个系统的核心基础,不管你做啥系统都逃不过:有人的地方就有江湖,有系统就有权限管理. 今天我们继续讲一下组织机构的管理: 新增.修改.锁 ...

  10. LeetCode3:Longest Substring Without Repeating Characters

    题目: Given a string, find the length of the longest substring without repeating characters. For examp ...