jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)


Posted in Javascript onFebruary 25, 2016

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{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=70);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(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}
.lightbox p.next{left:auto;background-position:right top;right:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.LightBox.js"></script>
</head>
<body>
<div class="item">
 <ul>
  <li><img src="01.jpg" /></li>
  <li><img src="02.jpg" /></li>
  <li><img src="03.jpg" /></li>
  <li><img src="04.jpg" /></li>
  <li><img src="05.jpg" /></li>
  <li><img src="06.jpg" /></li>
 </ul>
</div>
<script>
$(function(){
  $(".item").LightBox({
    controls : true //上一张、下一张按钮是否显示,默认是显示true
    });
  })
</script>
</body>
</html>

插件jquery.LightBox.js代码:

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

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

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

Javascript 相关文章推荐
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
Oct 31 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
JQuery ztree带筛选、异步加载实例讲解
Feb 25 #Javascript
jquery ztree实现模糊搜索功能
Feb 25 #Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 #Javascript
jquery实现列表上下移动功能
Feb 25 #Javascript
js简单判断移动端系统的方法
Feb 25 #Javascript
jquery ztree实现树的搜索功能
Feb 25 #Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php for 循环使用的简单实例
2016/06/02 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Python使用sqlite3模块内置数据库
2020/05/07 Python
python lambda的使用详解
2021/02/26 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
什么是servlet链?
2014/07/13 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
客服文员岗位职责
2013/11/29 职场文书
市三好学生主要事迹
2014/01/28 职场文书
安全演讲稿大全
2014/05/09 职场文书
社区文艺活动方案
2014/08/19 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
作文评语集锦
2014/12/25 职场文书
班委竞选稿范文
2015/11/21 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers