首页 > 代码库 > 公告滚动显示插件
公告滚动显示插件
公告滚动显示插件(jQuery插件编写)
插件代码:
/*** 2014年11月13日* 公告滚动显示插件*/(function ($) { $.fn.scrollNews = function (width) { var ulWidth = 0; var currentMarginLeft = 0; var scrollStart = true; //初始化div属性 this.parent().width(width); this.parent().css("overflow", "hidden"); //初始化ul属性 this.css("float", "left"); //初始化li属性 var liMarginRight = 20; this.find("li").css("margin-right", liMarginRight.toString() + "px"); this.find("li").css("float", "right"); //初始化ul宽度和当前的margin-left this.find("li").each(function () { ulWidth += $(this).width() + liMarginRight; }); this.width(ulWidth); currentMarginLeft = -ulWidth; //滚动方法定义 var scroll = function (obj) { setInterval(function () { if (scrollStart) { obj.css("margin-left", currentMarginLeft.toString() + "px"); currentMarginLeft += 1; if (currentMarginLeft > width) currentMarginLeft = -ulWidth; } }, 50); }; //调用滚动方法 scroll(this); this.mouseover(function () { scrollStart = false; }); this.mouseout(function () { scrollStart = true }); };})($);
示例HTML代码:
<div style="float: right; margin-top: 45px; margin-right: 120px; font-size: 15px; color: #669900;"> <ul id="ulgg"> <li><span>学校领导视察</span></li> <li><span>学校领导视察</span></li> </ul> </div>
示例JS代码:
$(function () { $("#ulgg").scrollNews(450); });
公告滚动显示插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。