jQuery文字滚动插件一行一行往上不间断滚动-领先建站CMS提供服务商我们专注于CMS建站产品的研发

7631 查看	4 回复

主题：[分享]jQuery文字滚动插件一行一行往上不间断滚动 [收藏主题]

转到：

licaifuwu 当前离线

653 主题	10 广播	17 粉丝

级别:六年级

用户积分:1585 分
登录次数:361 次
注册时间:2010/11/19
最后登录:2019/5/7

licaifuwu 发表于：2011/1/26 16:45:34 | 只看该作者查看该作者主题楼主

有课程找生源就上科汛课堂街

jQuery文字滚动插件一行一行往上不间断滚动

复制代码

/*
* jQuery Plugins systemTimes v1006
* //length 表示一行显示多少个文字
* //speed表示文字跳动的速度（1秒=1000毫秒）
* // 默认( speed = 2000,length=10 )
* $('#div1').textBeat({length:10,speed:500});
* $('#div2').textBeat();
*/
(function($) {
jQuery.fn.textBeat = function(options) {
var own = this;
own.css({
overflow: "hidden"
});
var showTime;
var ul = own.find("ul");
var li = own.find("li");
var a = own.find("a");
var settings = {
length: 10,
speed: 2000
};
jQuery.extend(settings, options);
ul.css({
margin: 0,
padding: 0,
border: "none"
});
a.css({
display: "block",
width: 1000
});
a.each(function() {
var value = $(this).text();
if (value.length >= settings.length) {
value = value.replace(value.slice(settings.length), "...");
$(this).text(value);
}
});
function show() {
ul = own.find("ul");
li = own.find("li");
a = own.find("a");
own.height(li.outerHeight() * li.size());
ul.width(li.outerWidth());
ul.height(li.outerHeight());
li.width(a.outerWidth());
li.height(a.outerHeight());
li.eq(0).clone(true).appendTo(ul);
li.eq(0).remove();
}
showTime = setInterval(show, settings.speed);
own.find("ul").hover(function() {
clearInterval(showTime);
},
function() {
showTime = setInterval(show, settings.speed);
});
}
})(jQuery);

-------------------------------------------html------------------------------------------------------

<div id="div1">

  <ul>

<li><a href="#">一、明确建立网站的目标和用户需求</a></li>

<li><a href="#">二、网页设计总体方案主题鲜明</a></li>

<li><a href="#">三、网站的版式设计</a></li>

<li><a href="#">四、色彩在网页设计中的作用 </a></li>

<li><a href="#">五、网页设计形式与内容相统一  </a></li>

<li><a href="#">六、三维空间的构成和虚拟现实 </a></li>

<li><a href="#">七、网页设计中多媒体功能的利用 </a></li>

<li><a href="#">八、结构清晰并且便于使用 </a></li>

<li><a href="#">九、导向清晰  </a></li>

<li><a href="#">十、快速的下载时间</a></li>

  </ul>

</div>