来自 美高梅4858永利777 2020-01-04 14:46 的文章
当前位置: 美高梅游戏平台网站 > 美高梅4858永利777 > 正文

jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果_jquery_脚本之家

本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果。分享给大家供大家参考,具体如下:

该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果。整体代码如下:

无标题文档*{margin:0;padding:0;}li{list-style:none;}.item{margin:20px;}.item ul li{float:left;margin-right:20px;}.item ul li img{width:100px;cursor:pointer;}.lb_wrap{display:none;}.lightbox_bg{background:#000;filter:alpha;opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url no-repeat left top;margin-top:-30.5px;cursor:pointer;}.lightbox p.next{left:auto;background-position:right top;right:0;}        ${ $.LightBox({ controls : true //上一张、下一张按钮是否显示,默认是显示true }); })

插件jquery.LightBox.js代码:

/**LightBox 1.0*dependence jquery-1.7.1.js*/;{ a.fn.LightBox = function{ var defaults = { controls : true //上一张、下一张按钮是否显示,默认是显示true } var opts = a.extend; var lb_wrap = ''; a.append; //controls if{ a.append; } function imgobj{ //imgObj.height是通过img对象获取的图片的实际高度 var imgObj = new Image(); imgObj.src = obj1.attr; var margintop = 0 - /2; obj2.css("margin-top",margintop); } this.each{ var obj = a; var numpic = obj.find.length; var num = 0; //点击赋值并显示 obj.find.click{ var src = a; a.attr; imgobj, a; a; a; a.siblings; num = a.index(); //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务 }); //上一张 a.click{ if{ num = numpic; } var src = obj.find.find; a.attr; imgobj, a; num--; }); //下一张 a.click{ if{ num = -1; } var src = obj.find.find; a.attr; imgobj, a; num++; }); //点击除了上一张、下一张之外的其他地方隐藏 a.click{ var e = e || window.event; var elem = e.target || e.srcElement; while{ if (elem.className && elem.className.indexOf { return; } if(elem.className && elem.className.indexOf{ return; } elem = elem.parentNode; } a.attr.hide(); //隐藏后,再将默认的图片赋给lightbox中图片的src a.hide.hide; }); }) }});

完整实例代码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文由美高梅游戏平台网站发布于美高梅4858永利777,转载请注明出处:jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果_jquery_脚本之家

关键词: