html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效

js代码

var img_index = 0;

var img_src = "";

$(function() {

//计算居中位置

var mg_top = ((parseInt($(window).height()) - parseInt($(".photo-div").height())) / 2);

$(".photo-div").css({

"margin-top": "" + mg_top + "px"

});

//关闭

$(".photo-close").click(function() {

$(".photo-mask").hide();

$(".photo-panel").hide();

});

//下一张

$(".photo-panel .photo-div .arrow-next").click(function() {

img_index++;

if(img_index >= $(".demo li img").length) {

img_index = 0;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//上一张

$(".photo-panel .photo-div .arrow-prv").click(function() {

img_index--;

if(img_index < 0) {

img_index = $(".demo li img").length - 1;

}

img_src = $(".demo li img").eq(img_index).attr("src");

photoView($(".demo li img"));

});

//如何调用？

$(".demo li img").click(function() {

$(".photo-mask").show();

$(".photo-panel").show();

img_src = $(this).attr("src");

img_index = $(this).index();

photoView($(this));

});

//自适应预览

function photoView(obj) {

if($(obj).width() >= $(obj).height()) {

$(".photo-panel .photo-div .photo-img .photo-view-h").attr("class", "photo-view-w");

$(".photo-panel .photo-div .photo-img .photo-view-w img").attr("src", img_src);

} else {

$(".photo-panel .photo-div .photo-img .photo-view-w").attr("class", "photo-view-h");

$(".photo-panel .photo-div .photo-img .photo-view-h img").attr("src", img_src);

}

//此处写调试日志

console.log(img_index);

}

html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效相关推荐

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
<40个有创意的jQuery图片和内容滑动及弹出插件收藏集之一> <40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三> <40个有创意的jQuery图片和内容 ...
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最优秀的Javascript框架之一.以其语法简单灵活而大受We ...
java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口（不打开新页面）...
[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面) 0 2015-10-24 15:00:04 当给链接添加一个click事件,我们可能不希望Web浏览器按照其常规模式退出 ...
html页面点击小图弹出大图代码,利用JS实现点击小图弹出大图代码
特效描述:利用JS实现点击小图弹出大图代码.利用JS实现点击小图弹出大图代码代码结构 1. HTML代码 (function(){ var LightBox = function(options ...
php 大图找小图,点击小图弹出大图,点击网页任何部分隐藏大图
点击小图弹出大图,点击网页任何部分隐藏大图 left: 0; right: 0; display:none; bottom: 0; background-color: #000; opacity: . ...
修改Thickbox，预加载图片和点击图片前后浏览
2011了,大家新年好! 外面寒冷,躲在家里写写博客还是挺好的. 今天为我的博客修改了下jQuery的Thickbox,增加了预加载图片功能和点击图片前后浏览的功能. 首先看下效果: http://w ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验: http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目 ...
Bootstrap商品弹出快速预览插件
下载地址使用Bootstrap+jQuery实现的商品快速预览功能,点击快速预览图标,商品详情的弹出层出现,展现商品的详细信息以及购买按钮.这个插件可以帮助用户更加便捷的购买商品.基于Bootstra ...

html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效

html 缩略图点击预览,jQuery图片相册点击缩略图弹出大图预览特效相关推荐

最新文章

热门文章