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

jquery放大镜效果

2015-06-17 00:29 585 查看

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery图片放大镜插件 - A5源码</title>

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

<script type="text/javascript" class="library" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" class="library" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" class="library" src="js/zzsc.js"></script>

<body>
<div class="con-FangDa" id="fangdajing">
<div class="con-fangDaIMg">
<!-- 正常显示的图片-->
<img src="images/big/1.jpg">
<!-- 滑块-->
<div class="magnifyingBegin"></div>
<!-- 放大镜显示的图片 -->
<div class="magnifyingShow"><img src="images/big/1.jpg"></div>
</div>

<ul class="con-FangDa-ImgList">
<!-- 图片显示列表 -->
<li class="active"><img src="images/thumb/1.jpg" data-bigimg="images/big/1.jpg"></li>
<li><img src="images/thumb/2.jpg" data-bigimg="images/big/2.jpg"></li>
<li><img src="images/thumb/3.jpg" data-bigimg="images/big/3.jpg"></li>
<li><img src="images/thumb/4.jpg" data-bigimg="images/big/4.jpg"></li>
<li><img src="images/thumb/5.jpg" data-bigimg="images/big/5.jpg"></li>
</ul>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://down.admin5.com/info/" target="_blank">A5源码</a></p>
</div>
</body>
</html>

css

*{
margin: 0;
padding: 0;
}

/*主容器*/
.con-FangDa{
width: 300px;
height: auto;
margin: 10px auto;
background-color:#fff;
}
/*正常容器*/
.con-fangDaIMg{
width: 300px;
height: 450px;
position: relative;
background-color: #454545;
}
.con-fangDaIMg > img{
width: 100%;
height:100%
}
/*滑块*/
.magnifyingBegin{
width: 150px;
height: 175px;
left: 0;
top: 0;
background-color: #454545;
opacity: 0.5;
filter:alpha(opacity=50);
position: absolute;
cursor: move;
display: none;
}
/*放大镜显示区域*/
.magnifyingShow{
width: 450px;
height: 514px;
display: none;
position: absolute;
right: -470px;
top: 0;
overflow: hidden;
background-color: #454545;
}
.magnifyingShow > img{
width: 900px;
height: 1350px;
margin-left:0;
margin-top: 0;
}
/*设置选择图片容器*/
.con-FangDa-ImgList{
margin-top:10px;
height:54px;
width:320px;
list-style: none;
}
.con-FangDa-ImgList > li{
margin-right:7px;
width: 50px;
height: 50px;
float: left;
cursor: pointer;
border: 2px solid #666;
background-color: #454545;
text-align:center;
}

.con-FangDa-ImgList > li > img{
vertical-align:top;
display:inline;
width:auto;
height:50px;
}
.con-FangDa-ImgList > .active{
border-color:#000;
}

$(function(){
$.fn.magnifying = function(){
var that = $(this),
$imgCon = that.find('.con-fangDaIMg'),//正常图片容器
$Img = $imgCon.find('img'),//正常图片，还有放大图片集合
$Drag = that.find('.magnifyingBegin'),//拖动滑动容器
$show = that.find('.magnifyingShow'),//放大镜显示区域
$showIMg = $show.find('img'),//放大镜图片
$ImgList = that.find('.con-FangDa-ImgList > li >img'),
multiple = $show.width()/$Drag.width();

$imgCon.mousemove(function(e){
$Drag.css('display','block');
$show.css('display','block');
//获取坐标的两种方法
// var iX = e.clientX - this.offsetLeft - $Drag.width()/2,
//     iY = e.clientY - this.offsetTop - $Drag.height()/2,
var iX = e.pageX - $(this).offset().left - $Drag.width()/2,
iY = e.pageY - $(this).offset().top - $Drag.height()/2,
MaxX = $imgCon.width()-$Drag.width(),
MaxY = $imgCon.height()-$Drag.height();

/*这一部分可代替下面部分，判断最大最小值
var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,
DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;
$Drag.css({left:DX+'px',top:DY+'px'});
$showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/

iX = iX > 0 ? iX : 0;
iX = iX < MaxX ? iX : MaxX;
iY = iY > 0 ? iY : 0;
iY = iY < MaxY ? iY : MaxY;
$Drag.css({left:iX+'px',top:iY+'px'});
$showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});
//return false;
});
$imgCon.mouseout(function(){
$Drag.css('display','none');
$show.css('display','none');
});

$ImgList.click(function(){
var NowSrc = $(this).data('bigimg');
$Img.attr('src',NowSrc);
$(this).parent().addClass('active').siblings().removeClass('active');
});
}

$("#fangdajing").magnifying();

});

之前看到过用canvas实现类似的放大镜效果，过两天抽时间我会整理下分享上来；

源码来源：A5源码

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

标签：

相关文章推荐

新的分享

章节导航