| 标题 | 自己使用jquery写的一个无缝滚动的插件 |
| 内容 | html代码: 代码如下: <h1>无缝滚动,向右滚动</h1> <ul id=guoul1> <li><img src=img/f1.jpg alt=f1/></li> <li><img src=img/f2.jpg alt=f2/></li> <li><img src=img/f3.jpg alt=f3/></li> <li><img src=img/f4.jpg alt=f4/></li> <li><img src=img/f5.jpg alt=f5/></li> <li><img src=img/f6.jpg alt=f6/></li> <li><img src=img/f7.jpg alt=f7/></li> </ul> <h1>无缝滚动,向左滚动</h1> <ul id=guoul2> <li>111111111111</li> <li>222222222222</li> <li>3333333333333</li> <li>4444444444444</li> <li>5555555555555</li> <li>6666666666666</li> <li>7777777777777</li> <li>8888888888888</li> <li>9999999999999</li> </ul> <h1>无缝滚动,向上滚动</h1> <ul id=guoul3> <li>111111111111</li> <li>222222222222</li> <li>3333333333333</li> <li>4444444444444</li> <li>5555555555555</li> <li>6666666666666</li> <li>7777777777777</li> <li>8888888888888</li> <li>9999999999999</li> </ul> <h1>无缝滚动,向下滚动</h1> <ul id=guoul4> <li>111111111111</li> <li>222222222222</li> <li>3333333333333</li> <li>4444444444444</li> <li>5555555555555</li> <li>6666666666666</li> <li>7777777777777</li> <li>8888888888888</li> <li>9999999999999</li> </ul> <h1>无缝滚动,非ul,li标签组合,向右滚动</h1> <div id=guoul5> <p>111111111111</p> <p>222222222222</p> <p>3333333333333</p> <p>4444444444444</p> <p>5555555555555</p> <p>6666666666666</p> <p>7777777777777</p> <p>8888888888888</p> <p>9999999999999</p> </div> <h1>不动</h1> <ul id=guoul6> <li>111111111111</li> <li>222222222222</li> <li>3333333333333</li> <li>4444444444444</li> <li>5555555555555</li> <li>6666666666666</li> <li>7777777777777</li> <li>8888888888888</li> <li>9999999999999</li> </ul> css代码: 代码如下: ul, li,h1 { margin: 0; padding: 0; list-style-type:none;} ul,div { height: 200px; border: 1px solid red; width: 300px; padding: 30px;margin:10px;list-style-type:none;} li,p { height: 30px; line-height: 30px; margin-top: 10px; background-color: gray; color: yellow; margin-left:10px;} #guoul1{ width:1000px; height:188px;margin: 0; padding: 0;} #guoul1 li{ width:300px; height:188px;margin: 0; padding: 0; margin-left:10px;} js插件代码: 代码如下: ; (function ($) { var defaults = { dir: left, //none:不动,up:上,right:右,down:下,right:左 delay: 30,//执行时间 }; $.fn.gyscontentdisplay = function (opt) { opt = $.extend({}, defaults, opt); //全局变量区域 var obj = $(this); //当前对象 obj.css({ overflow: hidden }); //初始化元素 if (opt.dir == none) return; var objlis = obj.children(); //对象中地子元素 objlis.css({ overflow: hidden }); var objsize = 0; //外框尺寸 var scrollevent = scrollleft; //滚动条地滚动方向 var litotalsize = 0, litotalsizeother = 0; //每个li元素地尺寸(宽或者高),克隆之后地总尺寸 var scrollsize = 0, //滚动条地实际距离 scrollsizemax = 0, //滚动条地最大距离 scrollsizemin = 0; //滚动条地最小距离 var interval = ; //记录setinterval if (opt.dir == up || opt.dir == down) {//上下 objsize = obj.innerheight(); scrollevent = scrolltop; obj.css({ padding-top: 0, padding-bottom: 0 }).height(objsize); } else if (opt.dir == left || opt.dir == right) {//左右 objsize = obj.innerwidth(); scrollevent = scrollleft; obj.css({ padding-left: 0, padding-right: 0 }).width(objsize); } else { alert(你地dir参数有误); } var getchildtotalsize = function (dir) {// 定义获取li总尺寸地方法 if (dir == left || dir == right) { objlis.css(float, left); return function () { objlis.each(function () { litotalsize += $(this).outerwidth(true); }); } } else if (dir == up || dir == down) { objlis.css(float, none); return function () { objlis.each(function () { litotalsize += $(this).outerheight(true); }); } } } (opt.dir); getchildtotalsize(); //获的所有地li地总尺寸,在方法中赋值 (function () { var clonecount = math.ceil(objsize * 2 / litotalsize); //赋值子元素多少遍 var clonehtmlnow = , clonehtmlstart = obj.html(); //原始地子元素字符串 for (var i = 0; i < clonecount; i++) { clonehtmlnow += clonehtmlstart; } obj.append(clonehtmlnow); litotalsizeother = (clonecount + 1) * litotalsize; //获取添加了子元素之后地长度 })(); if (opt.dir == left || opt.dir == right) { obj.css({ position: relative, z-index: 0 }); obj.children().css({ position: absolute, z-index: 1 }); var left = 0; obj.children().each(function () { $(this).css({ left: left + px, top: 0 }); left += $(this).outerwidth(true); }); } //滚动条地滚动方法 function scrollchange(dir) { if (dir == left || dir == up) { obj[scrollevent](0); scrollchange = function () { scrollsize++; if (scrollsize >= litotalsize) scrollsize = 0; obj[scrollevent](scrollsize); } } else if (dir == right || dir == down) { scrollsizemax = litotalsizeother - objsize; obj[scrollevent](scrollsizemax); scrollsize = scrollsizemax; scrollsizemin = scrollsizemax - litotalsize; scrollchange = function () { scrollsize--; if (scrollsize <= scrollsizemin) scrollsize = scrollsizemax; obj[scrollevent](scrollsize); } } }; scrollchange(opt.dir); interval = setinterval(scrollchange, opt.delay); obj.children().on(mouseover, function () { clearinterval(interval); }).on(mouseleave, function () { interval = setinterval(scrollchange, opt.delay); }); } })(jquery); 插件地调用: 代码如下: $(function () { $(#guoul1).gyscontentdisplay({ dir: right }); $(#guoul2).gyscontentdisplay({ dir: left }); $(#guoul3).gyscontentdisplay({ dir: up }); $(#guoul4).gyscontentdisplay({ dir: down }); $(#guoul5).gyscontentdisplay({ dir: right }); $(#guoul6).gyscontentdisplay({ dir: none }); }) |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。