需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。

效果图:

  

上干货

html:

<div id="news">
<ul>
<li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li>
<li><a href="#" title="bbbbbbbbbbbbbbb">bbbbbbbbbbbbbbb</a></li>
<li><a href="#" title="ccccccccccccccc">ccccccccccccccc</a></li>
<li><a href="#" title="ddddddddddddddd">ddddddddddddddd</a></li>
<li><a href="#" title="eeeeeeeeeeeeeee">eeeeeeeeeeeeeee</a></li>
<li><a href="#" title="fffffffffffffff">fffffffffffffff</a></li>
<li><a href="#" title="ggggggggggggggg">ggggggggggggggg</a></li>
</ul>
</div>

css:

ui,li {
list-style: none;
}
#news{
height: 75px;
overflow: hidden;
}

关键是js文件:

$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave"); function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})

主要就是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

jQuery实现列表自动滚动的更多相关文章

  1. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

  2. JS + jQuery 实现元素自动滚动到底部,兼容IE、FF、Chrome

    HTML代码: <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机 ...

  3. react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

  4. JS DIV列表自动滚动带停顿,滚动到底部后自动滚动到顶部

    setInterval -- 间隔执行函数:element.scrollTop -- 元素滚动条距头部的距离: 因为执行代码需要时间,所以最终动态时间会比设置的要慢 var slide = new S ...

  5. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  6. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  7. Android点击列表后弹出输入框,所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  8. jQuery Mobile 列表视图(带有自动检索)

    输入a: 输入b: jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>). ...

  9. jquery控制左右箭头滚动图片列表

    jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

随机推荐

  1. CDOJ 482 Charitable Exchange bfs

    Charitable Exchange Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/s ...

  2. Linux rsync 同步实践

    目录[-] 1. rsync 同步的大致思路 2. rsync的安装 3. rsync的配置 4. rsync的基本操作 服务器端启动 注2. 实时同步 注3. rsync通过linux防火墙 公司网 ...

  3. [连载]JavaScript讲义(04)--- 函数和闭包

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamFja2ZydWVk/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  4. android 自定义按钮实现 home键 和返回键

    由于在自己做的东西中用到了就总结一下,自己做了测试 在一个程序运行中如果按 返回键  分别执行了 : onpause()     onStop()   onDestory()方法 如果点击 home键 ...

  5. MySQL 行子查询(转)

    MySQL 行子查询 行子查询是指子查询返回的结果集是一行 N 列,该子查询的结果通常是对表的某行数据进行查询而返回的结果集. 一个行子查询的例子如下: SELECT * FROM table1 WH ...

  6. mysql自动备份策略

    目标:每7天做一个完整备份,每天做一份binlog日志,第二周将之前的备份删除并产生新的完整备份和binlog日志,备份要求每天2:00自动完成 mysql 版本:mysql5.5 1.开启binlo ...

  7. Android广播接收者应用(电话拦截器)

    一.电话拦截器应用说明 在我们输入完电话号码并拨打电话时,系统会发出一个有序广播(action="android.intent.action.NEW_OUTGOING_CALL") ...

  8. Tick and Tick

    The three hands of the clock are rotating every second and meeting each other many times everyday. F ...

  9. TIANKENG’s rice shop

    Problem Description TIANKENG managers a pan fried rice shop. There are n kinds of fried rice numbere ...

  10. SSIS 学习(0):企业离 BI 还有多远?【转】

    上一篇文章<<企业需要BI吗?>>发表后,有一些网友反应:BI现在还不火:BI仅仅在一些大企业有用武之地,中小型企业只能是望其项背,遥不可及了:BI仅仅是一些花拳秀腿而已,如果 ...