图片放大器源码
$(function () { var _default = { hoverClass: 'hover-img', zoomWidth: 155, zoomHeight: 155, mainImgWidth: 310, //主图宽度 mainImgHeight: 310, offsetTop: 0, offsetLeft: 0 }; var $zoomPup = $('.zoom-pup'); var $viewImg = $('.view-img'), $iparent = $viewImg.parent(); $(document).on('mouseover', '.spec-items li', function (e) { $(this) .addClass(_default.hoverClass) .siblings('li') .removeClass(_default.hoverClass); $('.spec-img').attr('src', $(this).find('img').attr('src')); }); $('.main-img') .mouseenter(function (e) { $zoomPup.show(); // 计算边距 var offset = $(this).offset(); _default.offsetTop = offset.top; _default.offsetLeft = offset.left; // 大图展示 $viewImg.attr('src', $(this).find('img').attr('src')); $iparent.addClass('active'); }) .mousemove(function (e) { var px = e.pageX, py = e.pageY; //x坐标 var zx = px - _default.zoomWidth / 2 - _default.offsetLeft, zy = py - _default.zoomHeight / 2 - _default.offsetTop; var vx = 0, vy = 0; zx < 0 && (zx = 0, vx = 0); zy < 0 && (zy = 0, vy = 0); var left = _default.mainImgWidth - _default.zoomWidth, top = _default.mainImgHeight - _default.zoomHeight; // 计算边缘 // zx > left ? (zx = left, vx = -1 * _default.zoomWidth / 2) : zx; // zy > left ? (zy = top, vy = -1 * _default.zoomHeight / 2) : zy; zx > left ? (zx = left) : zx; zy > left ? (zy = top) : zy; // 大图间距 // 400 / 155 = 2.581 vx = vx + zx * (-2.581); vy = vy + zy * (-2.581); // 设置dom $zoomPup.css({ 'left': zx + 'px', 'top': zy + 'px', 'width': _default.zoomWidth, 'height': _default.zoomHeight }); $viewImg.css({ 'left': vx + 'px', 'top': vy + 'px' }); }) .mouseleave(function (e) { $iparent.removeClass('active'); $zoomPup.hide(); }); })
<div class="preview-wrap pull-left"> <div class="main-img"> <img src="static/images/product/p1.png" alt="" class="spec-img"> <div class="zoom-pup"></div> </div> <div class="spec-items"> <ul class="list-unstyled list-inline"> <li class="hover-img"> <img src="static/images/product/p1.png" alt="" width="50" class="s-img"> </li> <li> <img src="static/images/product/p2.png" alt="" width="50" class="s-img"> </li> <li> <img src="static/images/product/p1.png" alt="" width="50" class="s-img"> </li> <li> <img src="static/images/product/p1.png" alt="" width="50" class="s-img"> </li> <li> <img src="static/images/product/p1.png" alt="" width="50" class="s-img"> </li> </ul> </div> <div class="view-wrap"> <img src="" class="view-img" width="800"> </div> </div>
相关推荐
-
常用的ajax请求方法封装 javascript
2019-1-7
-
点击空白处关闭弹窗 [ JavaScript ] javascript
2019-1-7
-
无缝轮播 javascript
2019-1-8
-
js、jQuery各种高度 javascript
2019-1-8
-
js判断设备,跳转app应用、android市场或者AppStore javascript
2019-1-8
-
js正则验证 javascript
2019-1-8
-
JS屏蔽鼠标右键菜单、复制粘贴、选中等 javascript
2019-1-8
-
js正则匹配 javascript
2019-1-8
-
输入身份证号码,subString截取出生日,并判断性别 javascript
2019-1-8
-
图片放大器源码 javascript
2019-1-7