jQuery插件scroll实现无缝滚动效果_jquery
程序员文章站
2022-04-29 09:48:47
...
scroll滚动插件
支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置
默认配置参数可修改
$(".content").easysroll({ //默认配置参数 direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left numberr: "1", //每一次滚动数量 默认是1 delays:"1000",//完成一次动画所需时间 默认是1000等于1秒 scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒 fadein:false,//是否支持淡入或淡出 默认false enterStop:true //鼠标移入是否暂停滚动 默认是true })
html代码:
滚动插件(支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置) 支持上下左右,淡入淡出,滚动时间设置,动画时间设置,鼠标经过是否停止设置
$(".content").easysroll({
//默认配置参数
direction: "left", //滚动方向 left(向左)right(向右) top(向上) bottom(向下) 默认left
numberr: "1", //每一次滚动数量 默认是1
delays:"1000",//完成一次动画所需时间 默认是1000等于1秒
scrolling: "1000",//每一次动画的时间间隔 默认是1000等于1秒
fadein:false,//是否支持淡入或淡出 默认false
enterStop:true; //鼠标移入是否暂停滚动 默认是true
})
JS核心代码
(function ($) { $.fn.easysroll= function(options) { var parameter= { direction: "left", numberr: "1", delays:"1000", scrolling: "1000", fadein: false, enterStop:true }; var ops = $.extend(parameter,options); var $this=$(this); var _this=this; var _time=null; var obj=_this.find("[type='box']"); var items=obj.find("li"); var itemsleg=items.length; var itemsW=items.outerWidth(true); var itemsH=items.outerHeight(true); var _direction=ops.direction; var _numberr =ops.numberr; var _delays=ops.delays; var _scrolling =ops.scrolling; var _fadein=ops.fadein; var _enterStop=ops.enterStop; if(_direction=="top" || _direction=="bottom") { items.css({"float":"none"}); obj.width(itemsW*itemsleg); if(_direction=="bottom") { obj.css("margin-top",-_numberr*itemsH); } }else if(_direction=="left" || _direction=="right"){ items.css({"float":"left"}); obj.width(itemsW*itemsleg); if(_direction=="right") { obj.css("margin-left",-_numberr*itemsW); } }else{ alert("您配置的滚动方向有误,请重新配置"); return true; } function scroll(){ if(_direction=="left"){ obj.animate({"margin-left":-_numberr*itemsW},Number(_delays),function(){ for (var i=0;i<_numberr obj.find obj.css if obj.animate for i="0;i<_numberr;i++){" clearinterval _time="setInterval(scroll,_scrolling);">
以上所述就是本文的全部内容了,希望大家能够喜欢。
推荐阅读
-
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
-
基于jQuery实现一个marquee无缝滚动的插件
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
jQuery实现的网站banner图片无缝轮播效果完整实例
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
基于jQuery实现一个marquee无缝滚动的插件
-
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
-
jQuery插件zTree实现的多选树效果示例
-
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
-
利用jquery和BootStrap实现动态滚动条效果