公告滾動顯示插件(jQuery插件編寫)
插件代碼:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
/**
* 2014年11月13日
* 公告滾動顯示插件
*/
(function ($) {
$.fn.scrollNews = function (width) {
if (this.find("li").length == 0) return;
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 + 1;
});
this.width(ulWidth);
currentMarginLeft = width;
this.css("margin-left", currentMarginLeft);
//滾動方法定義
var scroll = function (obj) {
setInterval(function () {
if (scrollStart) {
obj.css("margin-left", currentMarginLeft.toString() + "px");
currentMarginLeft -= 1;
if (currentMarginLeft < -ulWidth) currentMarginLeft = width;
}
}, 50);
};
//顯示div
this.parent().css("visibility", "visible");
//調用滾動方法
scroll(this);
this.mouseover(function () {
scrollStart = false;
});
this.mouseout(function () {
scrollStart = true
});
};
})($);
View Code
示例HTML代碼:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
<div style="float: right; margin-right: 10px; margin-top: 5px; font-size: 15px; visibility: hidden;">
<ul id="ulgg">
<!-- BEGIN noticeList -->
<li><a href="#{noticeLink}"><span style="color: #ff0000;">★#{notice.NoticeTitle}</span></a></li>
<!-- END noticeList -->
</ul>
</div>
示例JS代碼:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiZpdmLrN2bsJEZlR3YhJHdu92Qvw1cy9GdhNWak5WSn5WaulGb0V3TvwVbvNmLzd2bsJmbj5ycldWYtl2Lc9CX6MHc0RHaiojIsJye.gif)
$(function () {
$("#ulgg").scrollNews(450);
});