微信小程序页面布局_基于jQuery完成一个marquee无缝滚动的插件

  • 栏目:行业动态 时间:2021-01-12 13:12 分享新闻到:
<返回列表

基于jQuery实现一个marquee无缝滚动的插件       这篇文章主要介绍了基于jQuery实现一个marquee无缝滚动的插件,非常不错,具有参考借鉴价值,需要的朋友可以参考下

基于jQuery,实现一个marquee无缝滚动的插件,已经发布到 ,演示稍后更新(更新到 )。

代码如下:

 * 类库名称:jQuery.marquee
 * 实现功能:基于 jquery 实现的 marquee 无缝滚动插件
 * 作者:
 * 联系邮箱:
 * 使用说明:p/jquery-marquee
 * 最新版本:/jQueryMarquee
jQuery.fn.extend({
 marquee : function(opt, callback){
 opt = opt || {};
 opt.speed = opt.speed || 30;
 opt.direction = opt.direction || 'left';
 opt.pixels = opt.pixels || 2;
 switch( opt.direction ){
 case "left":
 case "right":
 opt.weight = "width";
 opt.margin = "margin-left";
 opt.tpl = ' table tr td [TABLE] /td td [TABLE] /td /tr /table 
 break;
 case "top":
 case "bottom":
 opt.weight = "height";
 opt.margin = "margin-top";
 opt.tpl = ' table tr td [TABLE] /td /tr /tr td [TABLE] /td /tr /table 
 break;
 default:
 throw Error("[jQuery.marquee.js] Options.direction Error!");
 switch( opt.direction ){
 case "left":
 case "top":
 opt.addon = -1;
 break;
 case "right":
 case "bottom":
 opt.addon = 1;
 break;
 default:
 throw Error("[jQuery.marquee.js] Options.direction Error!");
 callback = typeof callback == "function" callback : function(){};
 //设置宽度
 $(this).each(function(){
 if( this.control ){
 clearInterval(this.control);
 } else {
 //如果第一次执行,初始化代码
 $(this)
 .data(opt.weight, opt.weight == 'width' $(this).find("table").width() : $(this).find("table").height())
 .width($(this).data(opt.weight) * 2)
 .()))
 .mouseover(function(){
 $(this).data("pause", true);
 }).mouseout(function(){
 $(this).data("pause", false);
 this.control = setInterval((function(){
 if( $(this).data("pause") ){
 return;
 var _margin = parseInt($(this).css(opt.margin)) + opt.addon * opt.pixels;
 if( opt.addon == -1 _margin + $(this).data(opt.weight) 0 ){
 _margin = 0;
 }else if( opt.addon == 1, _margin 0 ){
 console.log(_margin 0,$(this).data(opt.weight));
 _margin = -1 * $(this).data(opt.weight);
 $(this).css(opt.margin, _margin + "px");
 callback.bind(this)();
 }).bind(this), opt.speed);
 return $(this);
});

如果在IE9以下使用,还需要在之前增加如下代码:

 * IE8插件(解决 function 不支持 bind 的问题),非原创
if (!Function.prototype.bind) {
 Function.prototype.bind = function(oThis) {
 if (typeof this !== "function") {
 throw new TypeError("[jQuery.marquee.ie8] Caller is not a function");
 var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function() {},
 fBound = function() {
 return fToBind.apply(this instanceof fNOP oThis this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)));
 fNOP.prototype = this.prototype;
 fBound.prototype = new fNOP();
 return fBound;
}

一共有三个可选参数,一个回调方法。

direction,移动方向:支持 左:left 右:right 上:top 下:bottom;

pixels,每次移动的像素数

speed,两次移动之前的间隔时间数(毫秒)

调用方法如下:

$("scroll-a").marquee();
$("scroll-b").marquee({direction:'top'});
$("scroll-c").marquee({direction:'top',pixels:2,speed:30});
$("scroll-d").marquee({direction:"top",pixels:2,speed:30}, function(){
 console.log("执行了一次");
});

以上所述是小编给大家介绍的基于jQuery实现一个marquee无缝滚动的插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


分享新闻到:

更多阅读

微信小程序页面布局_基于jQuery完成一个

行业动态 2021-01-12
根据jQuery完成一个marquee无缝拼接翻转的软件 本文关键详细介绍了根据jQuery完成一个mar...
查看全文

小程序直播署理加盟_js完成登录框鼠标拖

行业动态 2021-01-12
js完成登陆框电脑鼠标拖动实际效果 文中关键详细介绍了js完成登陆框电脑鼠标拖动实际...
查看全文

小程序制作工具_Javascript完成页面滚动时

行业动态 2021-01-12
Javascript完成网页页面翻转时导航栏智能化精准定位 普遍的开发设计网页页面中将会会出...
查看全文
返回全部新闻


区域站点: 南丰县长图制作   南宫市在线编辑图片   囊谦县图片加文字怎么制作   南和县怎样抠图   南华县长图制作   南江县在线编辑图片   南京市图片加文字怎么制作   南靖县怎样抠图   南康市长图制作   南乐县在线编辑图片   南陵县图片加文字怎么制作   南宁市怎样抠图   南平市长图制作   南皮县在线编辑图片   南市区图片加文字怎么制作   南通市怎样抠图   南投县长图制作   南雄市在线编辑图片   南溪县图片加文字怎么制作   南阳市怎样抠图   南漳县长图制作   南召县在线编辑图片   南郑县图片加文字怎么制作   那坡县怎样抠图   那曲县长图制作   纳雍县在线编辑图片   讷河市图片加文字怎么制作   内黄县怎样抠图   内江市长图制作   内丘县在线编辑图片   内乡县图片加文字怎么制作   嫩江市怎样抠图   聂荣县长图制作   尼玛县在线编辑图片   尼木县图片加文字怎么制作   宁安市怎样抠图   宁波市长图制作   宁城县在线编辑图片   宁德市图片加文字怎么制作   宁都县怎样抠图   宁国市长图制作   宁海县在线编辑图片   宁化县图片加文字怎么制作   宁晋县怎样抠图   宁陵县长图制作   宁明县在线编辑图片   宁南县图片加文字怎么制作   宁强县怎样抠图   宁陕县长图制作   宁武县在线编辑图片   宁乡市图片加文字怎么制作   宁阳县怎样抠图   宁远县长图制作   农安县在线编辑图片   磐安县图片加文字怎么制作   盘锦市怎样抠图   盘山县长图制作   磐石市在线编辑图片   盘州市图片加文字怎么制作   蓬安县怎样抠图   澎湖县长图制作   蓬莱市在线编辑图片   彭山县图片加文字怎么制作   蓬溪县怎样抠图   彭阳县长图制作   彭泽县在线编辑图片   彭州市图片加文字怎么制作   偏关县怎样抠图   平安县长图制作   平昌县在线编辑图片   平定县图片加文字怎么制作   屏东县怎样抠图   平度市长图制作   平果县在线编辑图片   平和县图片加文字怎么制作   平湖市怎样抠图   平江县长图制作   平乐县在线编辑图片   平凉市图片加文字怎么制作   平利县怎样抠图   平罗县长图制作   平陆县在线编辑图片   屏南县图片加文字怎么制作   平泉市怎样抠图   屏山县长图制作   平顺县在线编辑图片   平塘县图片加文字怎么制作   平潭县怎样抠图   平武县长图制作   萍乡市在线编辑图片   平乡县图片加文字怎么制作   平阳县怎样抠图   平遥县长图制作   平阴县在线编辑图片   平邑县图片加文字怎么制作   平远县怎样抠图   平舆县长图制作   皮山县在线编辑图片   普安县图片加文字怎么制作   浦北县怎样抠图   浦城县长图制作   普洱市在线编辑图片   普格县图片加文字怎么制作   浦江县怎样抠图   普兰县长图制作   普宁市在线编辑图片   莆田市图片加文字怎么制作   迁安市怎样抠图   乾安县长图制作   潜江市在线编辑图片   潜山市图片加文字怎么制作  

友情链接: 贴图软件 在线免费抠图 制作图片加文字的 在线一键抠图 手机版

Copyright © 2002-2020 图片加文字怎么制作_怎样抠图_长图制作_在线编辑图片_如何制作水印图片logo 版权所有 (网站地图) 备案号:粤ICP备10235580号