【JAVASCRIPT】jquery实现新闻滚动效果
2012-09-23 17:00
411 查看
前台框架如下:
CSS定义如下:
这里需要注意的是*{ margin:0; padding:0;} 的使用。margin:设置外边距。padding:设置内边距。如果不使用此属性,在后面写JS代码时会破坏页面,因为div中有默认的内外边距;
JAVASCRIPT代码如下:
在写JS代码之前不要忘记引入jquery-1.4.2.js;
<h3>最新新闻</h3> <div class="scrollNews" > <ul> <li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li> <li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</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="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li> <li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</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中有默认的内外边距;
JAVASCRIPT代码如下:
<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>
在写JS代码之前不要忘记引入jquery-1.4.2.js;
相关文章推荐
- jquery实现的向上无缝循环滚动的新闻效果
- javascript 实现新闻咨询图片滚动效果
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- 用DIV 来代替JAVASCRIPT以实现无间隔新闻滚动的效果
- 利用JavaScript实现新闻滚动效果(实例代码)
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- jQuery实现新闻播报滚动及淡入淡出效果示例
- 使用JavaScript实现新闻滚动效果
- 新闻滚动效果JQuery实现
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- <js>jquery实现新闻滚动效果,ie11支持
- JavaScript中用Jquery实现左右点击滚动效果
- JQuery页面图片切换和新闻列表滚动效果的具体实现
- JQuery实现页面企业广告图片切换和新闻列表滚动效果
- 利用JavaScript实现新闻滚动效果(实例代码)
- 使用JavaScript实现新闻滚动效果
- JQuery实现导航效果、新闻滚动、广告效果、横向滚动
- 陈华:jquery不转原生javascript实现热点无缝滚动效果代码复用
- JQuery实现页面随滚动条滚动而动态加载内容的效果