您的位置：首页 > Web前端 > JQuery

jquery 点击图片放大效果基于thinkphp

2017-02-28 14:38 791 查看

<!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>jQuery弹出层图片动画查看代码 - xw素材网</title>
<!--可无视-->

<!--弹出层样式-->
<style type="text/css">
/*自适应圆角投影*/
.round_shade_box{width:1px; height:1px; font-size:0; display:none; _background:#797979; _border:1px solid #cccccc;}
.round_shade_top{margin:0 12px 0 10px;  _background:#797979; zoom:1;}
.round_shade_topleft{width:11px; height:10px;  _background:#797979; float:left; margin-left:-11px; position:relative;}
.round_shade_topright{width:12px; height:10px;  _background:#797979; float:right; margin-right:-12px; position:relative;}
.round_shade_centerleft{ _background:#797979;}
.round_shade_centerright{ _background:#797979;}
.round_shade_center{font-size:14px; margin:0 12px 0 10px; padding:10px; background:white; letter-spacing:1px; line-height:1.5;}
.round_shade_bottom{margin:0 12px 0 11px;  _background:#797979; zoom:1;}
.round_shade_bottomleft{width:11px; height:10px; _background:#797979; float:left; margin-left:-11px; position:relative;}
.round_shade_bottomright{width:12px; height:10px;  _background:#797979; float:right; margin-right:-12px; position:relative;}
.round_shade_top:after,.round_shade_bottom:after,.zxx_zoom_box:after{display:block; content:"."; height:0; clear:both; overflow:hidden; visibility:hidden;}
.round_box_close{padding:2px 5px; font-size:12px; color:#ffffff; text-decoration:none; border:1px solid #cccccc; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000000; opacity:0.8; filter:alpha(opacity=80); position:absolute; right:-5px; top:-5px;}
.round_box_close:hover{opacity:0.95; filter:alpha(opacity=95);}
/*自适应圆角投影结束*/

</style>
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/content_zoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.small_pic a').fancyZoom({scaleImg: true, closeOnClick: true});

});
</script>
</head>
<body>
<div class="small_pic">
<a href="#pic_1">
<img src="images/mm1.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_two">
<img src="images/mm2.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_three">
<img src="images/mm3.jpg" />
</a>
</div>
<div class="small_pic">
<a href="#pic_four">
<img src="images/mm4.jpg" />
</a>
</div>
<!-- 要放大显示的div -->
<div id="pic_1" style="display:none;"><img src="images/mm1.jpg" /></div>
<div id="#pic_441">dsfsdf</div>
<div id="pic_two" style="display:none;"><img src="images/z2.jpg" /></div>
<div id="pic_three" style="display:none;"><img src="images/z3.jpg" /></div>
<div id="pic_four" style="display:none;"><img src="images/z4.jpg" /></div>

</body>

</html>

content_zoom.js 内容：

jQuery.fn.fancyZoom = function(options){

var options = options || {};
var directory = options && options.directory ? options.directory : 'images';
var zooming = false;

if ($('#zoom').length == 0) {
var html = '<div class="round_shade_box" id="zoom"> \
<div class="round_shade_top"> \
<span class="round_shade_topleft"> \</span> \
<span class="round_shade_topright"> \</span> \
</div> \
<div class="round_shade_centerleft"> \
<div class="round_shade_centerright"> \
<div class="round_shade_center" id="zoom_content"> \</div> \
</div> \
</div> \
<div class="round_shade_bottom"> \
<span class="round_shade_bottomleft"> \</span> \
<span class="round_shade_bottomright"> \</span> \
</div> \
<a href="#close" class="round_box_close" id="zoom_close">关闭</a> \
</div>';

$('body').append(html);

$('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
$(document).keyup(function(event){
if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
});

$('#zoom_close').click(hide);
}

var zoom = $('#zoom');
var zoom_close = $('#zoom_close');
var zoom_content = $('#zoom_content');

this.each(function(i) {
$($(this).attr('href')).hide();
$(this).click(show);
});
$('#zoom_close').click(hide);
return this;

function show(e) {
if (zooming) return false;
zooming = true;
var content_div = $($(this).attr('href'));
var zoom_width = options.width;
var zoom_height = options.height;

var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
var window_size = {'width':width, 'height':height, 'x':x, 'y':y}

var width = (zoom_width || content_div.width()) + 40;
var height = (zoom_height || content_div.height()) + 40;
var d = window_size;

// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.height/2) - (height/2) + y, 0);
var newLeft = (d.width/2) - (width/2);
var curTop = e.pageY;
var curLeft = e.pageX;

zoom_close.attr('curTop', curTop);
zoom_close.attr('curLeft', curLeft);
zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');

$('#zoom').hide().css({
position : 'absolute',
top : curTop + 'px',
left : curLeft + 'px',
width : '1px',
height : '1px'
});

zoom_close.hide();

if (options.closeOnClick) {
$('#zoom').click(hide);
}

if (options.scaleImg) {
zoom_content.html(content_div.html());
$('#zoom_content img').css('width', '100%');
} else {
zoom_content.html('');
}

$('#zoom').animate({
top : newTop + 'px',
left : newLeft + 'px',
opacity : "show",
width : width,
height : height
}, 500, null, function() {
if (options.scaleImg != true) {
zoom_content.html(content_div.html());
}
zoom_close.show();
zooming = false;
})
return false;
}

function hide() {
if (zooming) return false;
zooming = true;
$('#zoom').unbind('click');

if (zoom_close.attr('scaleImg') != 'true') {
zoom_content.html('');
}
zoom_close.hide();
$('#zoom').animate({
top : zoom_close.attr('curTop') + 'px',
left : zoom_close.attr('curLeft') + 'px',
opacity : "hide",
width : '1px',
height : '1px'
}, 500, null, function() {

if (zoom_close.attr('scaleImg') == 'true') {
zoom_content.html('');
}
zooming = false;
});
return false;
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery 点击图片放大效果 基于thinkphp

jquery 点击图片放大效果基于thinkphp