同一页面多次调用的基于Jquery的文字滚动跑马灯插件

调用方法:
line:一次卷动的文本行数
speed:卷动动画的时间
timespan:间隔时间

<html>
<body>
<ul id="runtopic">
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
</ul>
</body>
<script type="text/网页特效">
$(document.body).ready(function(){
$("#runtopic").rolltitle({line:1,speed:200,timespan:1500});
});
</script>
</html>

jquery代码

(function($){
$.fn.extend({
rolltitle: function(opt,callback){
if(!opt) var opt={};
var _this = this;
_this.timer = null;
_this.lineh = _this.find("li:first").height();
_this.line=opt.line?parseint(opt.line,15):parseint(_this.height()/_this.lineh,10);
_this.speed=opt.speed?parseint(opt.speed,10):3000, //卷动速度,数值越大,速度越慢(毫秒
_this.timespan=opt.timespan?parseint(opt.timespan,13):5000; //滚动的时间间隔(毫秒
if(_this.line==0) this.line=1;
_this.upheight=0-_this.line*_this.lineh;
_this.scrollup=function(){
_this.animate({
margintop:_this.upheight
},_this.speed,function(){
for(i=1;i<=_this.line;i++){
_this.find("li:first").appendto(_this);
}
_this.css教程({margintop:0});
});
}
_this.hover(function(){
clearinterval(_this.timer);
},function(){
_this.timer=setinterval(function(){_this.scrollup();},_this.timespan);
}).mouseo教程ut();
}
})
})(jquery);

时间: 2024-08-03 09:03:18

同一页面多次调用的基于Jquery的文字滚动跑马灯插件的相关文章

基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)_jquery

兼容各浏览器的文本行高 复制代码 代码如下: (function($){ $.fn.extend({ RollTitle: function(opt,callback){ if(!opt) var opt={}; var _this = this; _this.timer = null; _this.lineH = _this.find("li:first").height(); _this.line=opt.line?parseInt(opt.line,15):parseInt(_t

基于JQuery打造无缝滚动新闻步骤详解_jquery

本文实例讲述了基于JQuery打造无缝滚动新闻的方法.分享给大家供大家参考,具体如下: 首先,我们这里有这么一段html代码,很简洁,如下所示: <ul> <li>你说我是好人吗,我是好人啊</li> <li>哈哈,我真的不知道说什么了</li> <li>生活就是应该平淡的</li> <li>像上学一样的工作</li> </ul> </div> 然后我们要做的就是使它无缝滚动

基于jQuery 的图片360度旋转插件

之前的文章向大家分享了实现网站功能的各种优秀的jQuery 插件,今天这篇文章向大家推荐10款基于jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度 浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景. 360/3D Spin & Zoom JavaScript Player 功能非常强大的一款插件,支持缩放,360度旋转,全屏浏览等等,特别适合用于产品图片展示. 在线演

基于jQuery实现类似Google+圈子选择功能插件(支持键盘事件)

具体原理与调用不详述,可看代码注释及DEMO演示(演示中mod.udata.js里有一个汉字转拼音方法,它并不是插件的一部分,但为插件提供了拼音搜索的功能).  代码如下 复制代码 ;(function ($) {     /*      * 基于jQuery实现类似Google+圈子选择功能插件(支持键盘事件)@Mr.Think      */     $.fn.iChoose = function (options) {         var SELF=this;         var

基于Jquery的FormValidator表单验证插件

包含了以下验证功能: 1.控件值不能为空 2.控件值长度限制 3.选中项数量限制 4.控件值范围限制 5.控件值类型限制 6.控件值格式化 7.两个控件值比较 8.自定义验证方法 9.下拉必选 10.表单验证方式 11.控件独自验证 看一个简单的表单用户名验证插件  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D

基于jQuery实现歌词滚动版音乐播放器的代码_jquery

先给大家看下效果图,感兴趣的朋友可以参考实现代码 核心代码如下所示: $.ajax({ url: "/music/music.txt", type: "get", success: function(data) { data = jQuery.parseJSON(data); var length = data.length; var now=0; for (i = 0; i < length; i++) { $("#musicText li&quo

基于jquery图片左右滚动效果源码

基于jquery图片左右滚动效果源码 这是一款来自网络的图片可控的左右滚动效果源码,有需要的朋友可以参考一下. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>slide</title> <script type="text/网页特效" src="http://ajax.googleapis.com/ajax

Android基于TextView不获取焦点实现跑马灯效果

本文实例讲述了Android基于TextView不获取焦点实现跑马灯效果.分享给大家供大家参考,具体如下: 1. 写一个类继承TextView package com.example.tt; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.widget.TextView; public class ScrollingText

jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答_jquery

插件说明 - jBox 是一款基于 jQuery 的多功能对话框插件,能够实现网站的整体风格效果,给用户一个新的视觉享受. 运行环境 - 兼容 IE6+.Firefox.Chrome.Safari.Opera 等主流浏览器. 使用授权 - jBox 永久免费使用,但是必须保留相关的版权信息.如果有好的建议,可以直接在下面留言. 版本:2.3 大小:19.8k 下载:点击下载 在线demo:http://www.kudystudio.com/jbox/jbox-demo.html [2011-11