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 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
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
js下函数般调用正则的方法附代码
2008/06/22 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
php实现递归的三种基本方式
2020/07/04 PHP
PHP Include文件实例讲解
2019/02/15 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
Nodejs全栈框架StrongLoop推荐
2014/11/09 NodeJs
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
不打扫卫生检讨书
2014/02/12 职场文书
网络编辑岗位职责
2014/03/18 职场文书
超市促销活动总结
2014/07/01 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
python游戏开发之pygame实现接球小游戏
2022/04/22 Python