首页 > web前端 > js教程 > 正文

jquery实现公告翻滚效果_jquery

WBOY
发布: 2016-05-16 16:12:57
原创
1123 人浏览过

翻滚效果非常不错,代码也很简单,这里就不多废话了。

复制代码 代码如下:

//样式文件:
       

头部js

别忘了导入jquery库

复制代码 代码如下:

$(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()方法的作用是触发被选元素的制定事件类型
            });

jsp正文区

复制代码 代码如下:

小伙伴们自由发挥下,应用到自己的项目中吧

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板