jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
js实现单击图片放大图片的方法
本文实例讲述了js实现单击图片放大图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>单击图片即可放大图片</title> <body> 点击图片预览效果.<br> <img src="/images/m01.jpg" onclick="this.width+=50;this.height+=50" onclick="javascript:
-
JS点击缩略图整屏居中放大图片效果
需要实现的效果图: 今天开发的时候,遇到要点击缩略图之后居中显示图片的大图查看(大致效果如上图所示)~想了好几种实现方式,最开始的时候,是想通过animate来点击图片进行显示,可是后来当我想要让放大的图片进行居中显示和点击别的地方隐藏已显示的大图的时候,才发现实现起来有难度. 1 第一张点击图片将图片放大 下面将这种方式也贴出来,供自己参考(万一有需要的小伙伴正好需要这样的功能呢): <div> <img class="dialog" src="xxx.j
-
js放大镜放大图片效果
我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le
-
用javascript制作放大镜放大图片
emu 原图: 局部放大图: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
javascript 获取图片尺寸及放大图片
1)获取图片尺寸 复制代码 代码如下: <img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/> <script>
-
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
-
Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Text; using System.IO; public partial
-
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
本文讲述了HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果.分享给大家供大家参考,具体如下: 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷的星际争霸兵种效果图.希望大家喜欢! 先来看看效果图: HTML5代码 首先我们使用HTML5的代码来创建一个html文档,将所需的quicksand类库,及其jquery类库,还有HTML5类库倒入,如下: <!DOCTYPE h
-
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
本文实例讲述了jQuery实现横向带缓冲的水平运动效果.分享给大家供大家参考,具体如下: 这里使用jQuery生成横向带缓冲的水平运动,用鼠标点一下才能激活,点一下以后可看到Div层在做水平运动,由此可派生出诸多的其它形式的动画效果. 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
-
jQuery+css3实现转动的正方形效果(附demo源码下载)
本文实例讲述了jQuery+css3实现转动的正方形效果.分享给大家供大家参考,具体如下: 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l
-
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
-
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
-
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
-
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=
-
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E