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

jquery 商品图片放大效果

2014-05-07 16:27 531 查看
商品图片放大效果

写的有点烂，欢迎各位大虾批评指正

先来张效果 图



html

<!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" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="./js/magnify.jquery.js"></script>
<title>jQuery 商品图片放大</title>
<style>
.box{width:300px; height:300px; overflow:hidden; border:1px solid #666;}
</style>
</head>
<body>
<div class="box">
<img data-big="images/3.jpg" src="images/3-1.jpg" />
</div>
</body>
</html>

调用：
<script type="text/javascript">
$('.box').magnify({
//width:500, //显示大图容器的宽度 默认缩略图容器的宽度
//height:400, //显示大图容器的高度 默认缩略图容器的高度
//color:'#ff00ff', //选中区域蒙板背景颜色 默认白色（#fff）
//opacity:0.3, //选中区域蒙板透明度（0-1） 默认0.5
//showDivTop:0, //显示大图容器的Top偏移量 默认0
//showDivLeft:0 //显示大图容器的Left偏移量 默认0
});
</script>

magnify.jquery.js
(function($) {
$.fn.magnify=(function(options) {
var _this = $(this);
var _param = {width:_this.width(),height:_this.height(),color:'#fff',opacity:0.5,showDivTop:0,showDivLeft:0};
$.extend(_param,options);
_this.find('img').load(function() {
$('.magnify_img_div').remove();
var _img = $(this);
var _ratio = (_img.width() >= _img.height()) ? true : false;
if(_img.width() > _this.width() && _ratio) _img.width(_this.width());
else if(_img.height() > _this.height() && !_ratio) _img.height(_this.height());
_img.css({'margin-top':(_this.height()-_img.height())/2,'margin-left':(_this.width()-_img.width())/2,'cursor':'move'});
var _div = $('<div></div>').addClass('magnify_img_div').css({'position':'absolute',width:_param.width/3, height:_param.height/3,'background-color':_param.color,'opacity':_param.opacity,'cursor':'move'}).appendTo(_this).hide();
var _show_div = $('<div></div>').addClass('magnify_img_div').css({width:_param.width,height:_param.height,padding:0,'position': 'absolute',top:_this.offset().top+_param.showDivTop,left:_this.offset().left+_this.outerHeight()+10+_param.showDivLeft, 'background-color':'#fff','overflow':'hidden','border':'1px solid #ccc'}).html('<img src="'+_img.attr('data-big')+'" />').appendTo($('body')).hide();
_this.mousemove(function(e) {
if(_this[0] == e.target) { _div.hide();_show_div.hide();return false;}
_div.show();_show_div.show();
var _ra = _show_div.find('img').width()/_img.width();
var _min_top = _img.offset().top;
var _min_left = _img.offset().left;
var _max_top = _img.offset().top+_img.height();
var _max_left = _img.offset().left+_img.width();
var _top = e.pageY-_div.outerHeight()/2;
var _left = e.pageX-_div.outerWidth()/2;
if(e.pageY < _min_top+_div.outerHeight()/2) _top = _min_top;
if(e.pageY > _max_top-_div.outerHeight()/2) _top = _max_top-_div.outerHeight();
if(e.pageX < _min_left+_div.outerWidth()/2) _left = _min_left;
if(e.pageX > _max_left-_div.outerWidth()/2) _left = _max_left-_div.outerWidth();
_div.css({top:_top,left:_left,width:_param.width/_ra,height:_param.height/_ra});
if(_param.width > _show_div.find('img').width()) {
_div.css({width:_img.width()});_show_div.css({width:_show_div.find('img').width()});
}
if(_param.height > _show_div.find('img').height()) {
_div.css({height:_img.height()});_show_div.css({height:_show_div.find('img').height()});
}
_show_div.find('img').css({'margin-top':'-'+(_div.offset().top-_img.offset().top)*_ra+'px','margin-left':'-'+(_div.offset().left-_img.offset().left)*_ra+'px'});
}).mouseout(function() { _div.hide(); _show_div.hide();});
});
});
})(jQuery);

要先加载jquery库
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航