用jQuery编写放大镜效果

来源：互联网发布：类似米赚的软件编辑：程序博客网时间：2024/06/05 20:05

以《锋利的jQuery》第8章综合案例为基础，书中是用的插件，这里自己摸索写了一套程序。

HTML如下：

<!DOCTYPE HTML><html><head><meta charset = utf-8 /><title>zoom effects</title><link type = "text/css" rel = "stylesheet" href="style/zoom.css" /><script type = "text/javascript" src = "scripts/jquery.js"></script></head><body><div id = "jnProitem"><div class="jqzoomWrap">        <a href="images/blue_one_big.jpg" title="免烫高支棉条纹衬衣" >            <img src="images/blue_one_small.jpg" alt="免烫高支棉条纹衬衣" id="bigImg" />        </a></div></div><div id = "jnProDetails"><!-- 选择商品--><h4>免烫高支棉条纹衬衣</h4><ul class = "jnProDetailList"><li>全新精品高支棉衬衫再次提升品质，精选100%新疆长绒棉织造而成，平整度好，短绒少； 80-100高支双股经纬交织，带来无与伦比的舒适享受；而且面料反光效果好，具有漂亮的光泽，质感上佳，有利于免烫效果的维持！</li><li><span>价  格：</span><strong class = "del">379.00元</strong></li><li><span>促  销：</span><strong class = "detail_price">200.00</strong><span>元</span></li></ul></div><script type="text/javascript" src = "scripts/zoom.js"></script></body></html>

CSS如下：

*{margin: 0; padding: 0;}#jnProitem {float: left;width: 312px;height: 560px;margin-left: 10px;}#jnProDetails{margin-left: 324px;line-height: 2;}#jnProDetails ul{list-style-type:none;}strong{font-weight: normal;}.del{text-decoration: line-through; }.detail_price{/*改变字体*/font: 24px Tahoma,Arial,Helvetica,sans-serif;color: #F87217;/*垂直居中*/vertical-align: middle;/*单位留出间距*/padding-right: 5px;}.jqzoomWrap{border: 1px solid #BBB;cursor: crosshair;}#mGlass{width: 120px; height: 120px;opacity: 0.5;background: #E5E4E2;position: absolute;}#zoomWindow{position: absolute;border: 1px solid #BBB;overflow: hidden;}#zoomWindow>div{position: relative;width:100%；height:100%;}#zoomWindow img{position: absolute;}

JS如下：

$ (function () {var $parent = $(".jqzoomWrap");//现有展示栏的位置、宽高,不能只是内容的高度var dpWidth =  $parent.outerWidth();var dpHeight = $parent.outerHeight();//放大镜的大小var mSize = 120;//创建放大镜var $mGlass = $("<div id ='mGlass'></div>");//创建预览区域,双层div。因为图片的父元素必须relative，但relative会占据原来位置，所以再在外面加一层div，设为absolutevar $zoomWindow = $("<div id ='zoomWindow'><div><img src='images/blue_one_big.jpg' /></div></div>");//可不可以不设为全局变量？var dpPos = null;var scale = [];$(".jqzoomWrap a").mouseenter(function (e) {//获取光标位置this.myTitle = this.title;this.title = "";//不能放在全局变量，不然浏览器加载后就成为固定值，窗口缩小再mouseenter位置不对dpPos = $parent.offset();//改变放大镜的位置showGlass(e, dpPos, dpWidth, dpHeight);//插入放大镜$mGlass.appendTo(".jqzoomWrap");//获取预览图链接，插入$zoomWindow.find("img").attr("src", this.href);$zoomWindow.prependTo("#jnProDetails");// 先插入文档，才能获得图片大小。设置预览图的大小scale = imgScale($zoomWindow, $parent);$zoomWindow.width(scale[0] * mSize + "");$zoomWindow.height(scale[1] * mSize + "");});$("body").on("mousemove", "#mGlass", function(e) {//改变放大镜的位置showGlass(e, dpPos, dpWidth, dpHeight);var left = dpPos.left;var top = dpPos.top;//设置预览图片的位置var absLeft = -(e.pageX - mSize/2 - left)*scale[0];var absTop = -(e.pageY - mSize/2 - top)*scale[1];var ultRight = -($zoomWindow.find("img").width() - $zoomWindow.width());var ultBottom = -($zoomWindow.find("img").height() - $zoomWindow.height());$zoomWindow.find("img").css({    "left": (Math.max(Math.min(0, absLeft), ultRight)) + "px",    "top": (Math.max(Math.min(0, absTop), ultBottom)) + "px"});console.log(scale);});// 既不能绑定在放大镜的父元素，也不能绑定在兄弟元素// 由于用函数给框框设置了界限，鼠标怎么动框框都在图片范围内，这样鼠标指针就可以脱离框框，实现解除绑定$parent.mouseleave(function() {$(this).find("a").attr("title", this.myTitle);$mGlass.remove();$zoomWindow.remove();});// 改变放大镜位置的函数function showGlass(e, dpPos, dpWidth, dpHeight) {var mLeft = Math.min(Math.max((e.pageX - mSize/2), dpPos.left),                           (dpPos.left + dpWidth - mSize));var mTop = Math.min(Math.max((e.pageY - mSize/2), dpPos.top),                          (dpPos.top + dpHeight - mSize));$mGlass.css({    "left": mLeft + "px",    "top": mTop + "px"});}//预览区大小：大图/小图*放大镜尺寸function imgScale($big, $small) { // 必须先把元素插入文档才能获取大小 var big_width = $big.find("img").width();var small_width = $small.find("img").width();var scaleX = big_width/small_width;var big_height = $big.find("img").height();var small_height = $small.find("img").height();var scaleY = big_height/small_height;return [scaleX, scaleY];}});

阅读全文

0 0