<js>jquery实现新闻滚动效果,ie11支持
来源:互联网 发布:淘宝服装搭配 编辑:程序博客网 时间:2024/06/05 09:58
前端
引入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>
http://www.cnblogs.com/ngnetboy/archive/2012/09/23/2699021.html
阅读全文
0 0
- <js>jquery实现新闻滚动效果,ie11支持
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- jquery实现新闻滚动
- 新闻滚动栏效果--JQuery
- 新闻活动滚动效果Jquery
- jquery实现的向上无缝循环滚动的新闻效果
- js 滚动图片新闻效果
- jQuery模拟百度新闻不间断滚动效果,支持文字、图片水平垂直滚动
- jQuery实现js新闻段落向上无缝滚动
- jquery实现新闻消息滚动
- 【js与jquery】jquery循环滚动新闻
- jquery随机新闻滚动切换效果
- jQuery实现滚动效果
- Jquery 滚动效果实现
- js实现滚动效果
- js实现滚动效果
- idea --maven project 工具条不见了 maven 项目引进来报错
- Jmeter使用CSV Data Set Config参数化数据不重复的多次循环执行(实现多用户多次抽奖功能)
- 开始记录深度学习以及机器学习的历程
- 如何从头搭建一个搜索引擎_css的使用
- PAT乙级1008. 数组元素循环右移问题 (20)
- <js>jquery实现新闻滚动效果,ie11支持
- svn E175002 DH keypair
- PMP 强化记忆47过程输入输出工具详细
- C++基础之引用与指针的区别与联系、常引用使用时应注意的问题
- 安装多版本python27并开启enable-shared
- 关于transform下的fixed定位(买一送一,结束语是个小彩蛋哦~)
- BME-Stroke-Rehabilitation-Applications
- Android framework 入门1
- RNN用于二值分类