插件描述：jquery模拟滚动条，支持自定义滚动条样式，兼容pad，web手机端未测试；支持同一网页多个滚动条；支持添加和删除（本人对封装不太了解，未封装）
更新时间：2017/3/14 上午10:54:24
更新说明：
全新封装插件；
增加api及各项使用参数
调用更加简单易用
浏览器全面支持ie8+,chrome,firefox,移动端等
参数项：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $().shineonScroll({ "father": "scrollfather1", //当前区域id "soncontent": "scrollson", //当前区域子元素样式表 "scroll_y": "scroll_y", //模拟滚动条y轴背景样式 "scroll_ymove": "scroll_ymove", //模拟滚动条y轴滚动条背景样式 "scroll_x": "scroll_x", //模拟滚动条y轴背景样式 "scroll_xmove": "scroll_xmove", //模拟滚动条x轴滚动条背景样式 "deloradd": "", //添加元素，删除元素参数adddel "wheelxory": "wheely", //滚动类型wheelx轴，wheely轴 "wheelval": 0, //滑轮上下滚动的值，1位向下，-1位向上 "marginstep": 10, //步长,请使用数字，true为自动 "getfatherid": "whichscroll", //获取当前滚动区域模块id的隐藏域id "scrolltop": "top",//top/bottom 初始化滚动条居顶、居底 "resetinit": 0, //0代表不做处理，1代表重置 重置wheelx or wheely的left/top值 "scrolltarget": ".scrollfather", //鼠标滑动，标记父元素}) |
模拟滚动条
1 2 3 4 5 6 7 8 9 10 | <div class="scrollfather" id="scrollfather1" > <div class="scrollson" > </div> <div class="scroll_ymove"> <div class="scroll_y" unorbind="unbind"></div> </div> <div class="scroll_xmove"> <div class="scroll_x" unorbind="unbind"></div> </div></div> |
1 | $().shineonScroll({"father":"scrollfather1"}); |
引入样式表和js即可；
需要注意的是，页面需要添加一行dom节点<input type="hidden" id="whichscroll">
页面初始化时需要添加一下代码，
1 2 3 4 5 6 7 8 9 10 11 | $(".scrollson").mouseover(function() { //兼容pad的监听事件 $("#whichscroll").val($.trim($(this).parent().attr("id"))) if ((navigator.userAgent.match(/(iPhone|Android|iPad)/i))) { var scrollfathter1 = document.getElementById($.trim($(this).parent().attr("id"))); scrollfathter1.addEventListener("touchstart", touchStart, false); scrollfathter1.addEventListener("touchmove", touchMove, false); scrollfathter1.addEventListener("touchend", touchEnd, false); }})//初始化调用scroll_y("scrollfather1", "scrollson", "scroll_y", "scroll_ymove", "scroll_x", "scroll_xmove", "", "wheely", "") $(".scrollson").css("margin-top", "0") $(".scroll_y").css("top", "0") |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： Jquery表格行全选反选
- 下一个特效： 可水平滚动水平时间轴插件