<!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{ 300px; height: auto; margin: 10px auto; background-color:#fff; } /*正常容器*/ .con-fangDaIMg{ 300px; height: 450px; position: relative; background-color: #454545; } .con-fangDaIMg > img{ 100%; height:100% } /*滑块*/ .magnifyingBegin{ 150px; height: 175px; left: 0; top: 0; background-color: #454545; opacity: 0.5; filter:alpha(opacity=50); position: absolute; cursor: move; display: none; } /*放大镜显示区域*/ .magnifyingShow{ 450px; height: 514px; display: none; position: absolute; right: -470px; top: 0; overflow: hidden; background-color: #454545; } .magnifyingShow > img{ 900px; height: 1350px; margin-left:0; margin-top: 0; } /*设置选择图片容器*/ .con-FangDa-ImgList{ margin-top:10px; height:54px; 320px; list-style: none; } .con-FangDa-ImgList > li{ margin-right:7px; 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; auto; height:50px; } .con-FangDa-ImgList > .active{ border-color:#000; }
js
$(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源码