###放大镜要实现的效果如下图：
放大镜的代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="images/small.webp" width="350" alt=""/>
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" width="800" alt=""/>
</div>
</div>
<script>
//获取需要的dom对象
var box = document.getElementById("box");
var smallBox = box.children[0];
//黄色的遮盖层
var mask = smallBox.children[1];
//找到大盒子
var bigBox = box.children[1];
var bigImg = bigBox.children[0];
//1 鼠标放到smallBox。显示黄色的层
smallBox.onmouseover = function () {
bigBox.style.display = "block";
mask.style.display = "block";
}
smallBox.onmouseout = function () {
bigBox.style.display = "none";
mask.style.display = "none";
}
//2 鼠标移动的时候，设置mask的位置
smallBox.onmousemove = function (e) {
//offsetWidth 可以获取到mask的宽度包括 边框和内边距
var w = mask.offsetWidth/2;
var h = mask.offsetHeight/2;
//mask的坐标
var x = e.clientX - 100 -w;
var y = e.clientY - 100 -h;
//控制mask不出去
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
x = x > smallBox.offsetWidth - mask.offsetWidth ? smallBox.offsetWidth - mask.offsetWidth : x;
y = y > smallBox.offsetHeight - mask.offsetHeight ? smallBox.offsetHeight - mask.offsetHeight:y;
mask.style.left = x + "px";
mask.style.top = y + "px";
//3 改变大图片的位置
// mask最大的移动距离/图片的最大移动距离 = mask的移动距离/bigImg的移动距离
//bigImg的移动距离= mask的移动距离 * 图片的最大移动距离 / mask最大的移动距离;
//最小移动距离
var smallToMove = smallBox.offsetWidth - mask.offsetWidth;
//最大移动距离
var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
//bigImg的左外边距
var marginLeft = x * bigToMove / smallToMove;
//bigImg的上外边距
var marginTop = y * bigToMove / smallToMove;
//
bigImg.style.marginLeft = - marginLeft + "px";
bigImg.style.marginTop = - marginTop + "px";
}
</script>
</body>
</html>
jquery仿放大镜
html代码
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jquery放大镜</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content=""/>
<script src="./js/jquery.min.js"></script>
<script src="./common.js"></script>
<link href="./css/common.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function () {
var showproduct = {
"boxid": "showbox",
"sumid": "showsum",
"boxw": 400,//宽度,该版本中请把宽高填写成一样
"boxh": 400,//高度,该版本中请把宽高填写成一样
"sumw": 60,//列表每个宽度,该版本中请把宽高填写成一样
"sumh": 60,//列表每个高度,该版本中请把宽高填写成一样
"sumi": 7,//列表间隔
"sums": 5,//列表显示个数
"sumsel": "sel",
"sumborder": 1,//列表边框，没有边框填写0，边框在css中修改
"lastid": "showlast",
"nextid": "shownext"
};//参数定义
$.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
});
</script>
</head>
<body>
<div style="width:600px; margin:0 auto;">
<p>欢迎使用常用商品详情页商品放大镜效果，兼容IE6及以上版本</p>
<p style="padding-bottom:50px;">图片标签上请务必注意width和height的值，这是必要的值，图片随意形状，随意大小，但必须填写该两个值，图片个数大于1就行，数量不固定</p>
<!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
<div id="showbox">
<img src="images/img01.png" width="270" height="180"/>
<img src="images/img03.png" width="430" height="430"/>
<img src="images/img04.png" width="290" height="290"/>
<img src="images/img05.png" width="786" height="525"/>
<img src="images/img06.png" width="300" height="300"/>
<img src="images/img07.png" width="200" height="200"/>
<img src="images/img08.png" width="810" height="582"/>
<img src="images/img09.png" width="1920" height="900"/>
</div>
<!--展示图片盒子-->
<div id="showsum"></div>
<!--展示图片里边-->
<p class="showpage">
<a href="javascript:void(0);" id="showlast"> < </a>
<a href="javascript:void(0);" id="shownext"> > </a>
</p>
</div>
</body>
</html>
common.js代码
/**
* Created by baidu on 17/10/12.
*/
jQuery.ljsGlasses = {
pcGlasses: function (_obj) {
var _box = $("#" + _obj.boxid);
var _sum = $("#" + _obj.sumid);
var _last, _next;
var _imgarr = _box.find("img");
var _length = _imgarr.length;
var _index = 0;
var _arr = new Array();
_sum.append("<p style='position:absolute;left:0;top:0;'></p>");
var _sumbox = _sum.find("p");
for (var i = 0; i < _length; i++) {
_arr[i] = new Array();
_arr[i][0] = _imgarr.eq(i).attr("src");
_arr[i][1] = _imgarr.eq(i).attr("width");
_arr[i][2] = _imgarr.eq(i).attr("height");
var _scale = _arr[i][1] / _arr[i][2];
if (_scale == 1) {
_arr[i][3] = _obj.boxw;// width
_arr[i][4] = _obj.boxh;// height
_arr[i][5] = 0;//top
_arr[i][6] = 0;//left
_arr[i][7] = _obj.boxw / 2;
_arr[i][8] = _obj.boxw * 2;// width
_arr[i][9] = _obj.boxh * 2;// height
_sumbox.append("<span><img src='" + _imgarr.eq(i).attr("src") + "' width='" + _obj.sumw + "' height='" + _obj.sumh + "' /></span>");
}
if (_scale > 1) {
_arr[i][3] = _obj.boxw;// width
_arr[i][4] = _obj.boxw / _scale;
_arr[i][5] = (_obj.boxh - _arr[i][4]) / 2;
_arr[i][6] = 0;//left
_arr[i][7] = _arr[i][4] / 2;
_arr[i][8] = _obj.boxh * 2 * _scale;// width
_arr[i][9] = _obj.boxh * 2;// height
var _place = _obj.sumh - (_obj.sumw / _scale);
_place = _place / 2;
_sumbox.append("<span><img src='" + _imgarr.eq(i).attr("src") + "' width='" + _obj.sumw + "' style='top:" + _place + "px;' /></span>");
}
if (_scale < 1) {
_arr[i][3] = _obj.boxh * _scale;// width
_arr[i][4] = _obj.boxh;// height
_arr[i][5] = 0;// top
_arr[i][6] = (_obj.boxw - _arr[i][3]) / 2;
_arr[i][7] = _arr[i][3] / 2;
_arr[i][8] = _obj.boxw * 2;// width
_arr[i][9] = _obj.boxw * 2 / _scale;
var _place = _obj.sumw - (_obj.sumh * _scale);
_place = _place / 2;
_sumbox.append("<span><img src='" + _imgarr.eq(i).attr("src") + "' height='" + _obj.sumh + "' style='left:" + _place + "px;' /></span>");
}
}
_imgarr.remove();
_sum.append("<div style='clear:both;width:100%;'></div>");
var _sumarr = _sum.find("span");
var _sumimg = _sum.find("img");
_sumarr.eq(_index).addClass(_obj.sumsel);
var _border = _obj.sumborder * 2 + _obj.sumh;
var _sumwidth = (_border + _obj.sumi) * _obj.sums;
var _sumboxwidth = (_border + _obj.sumi) * _length;
_sum.css({
"overflow": "hidden",
"height": _border + "px",
"width": _sumwidth + "px",
"position": "relative"
});
_sumbox.css({
"width": _sumboxwidth + "px"
});
_sumarr.css({
"float": "left",
"margin-left": _obj.sumi + "px",
"width": _obj.sumw + "px",
"height": _obj.sumh + "px",
"overflow": "hidden",
"position": "relative"
});
_sumimg.css({
"max-width": "100%",
"max-height": "100%",
"position": "relative"
});
_box.append("<div style='position:relative;'><b style='display:block;'><img style='display:block;' src='' /></b><span style='position:absolute;left:0;top:0;display:none;z-index:5;'></span></div><p style='position:absolute;overflow:hidden;top:0;display:none;'><img style='max-width:none;max-height:none;position:relative;left:0;top:0;' src='' /></p>");
var _glass = _box.find("span");
var _boximg = _box.find("b img");
var _imgout = _box.find("div");
var _showbox = _box.find("p");
var _showimg = _box.find("p img");
_box.css({
"width": _obj.boxw + "px",
"height": _obj.boxh + "px",
"position": "relative"
});
var _showboxleft = _obj.boxw + 10;
_showbox.css({
"width": _obj.boxw + "px",
"height": _obj.boxh + "px",
"left": _showboxleft + "px"
});
var imgPlaces = function () {
_showimg.attr("src", _arr[_index][0]);
_boximg.attr("src", _arr[_index][0]);
_boximg.css({
"width": _arr[_index][3] + "px",
"height": _arr[_index][4] + "px"
});
_imgout.css({
"width": _arr[_index][3] + "px",
"height": _arr[_index][4] + "px",
"top": _arr[_index][5] + "px",
"left": _arr[_index][6] + "px",
"position": "relative"
});
_glass.css({
"width": _arr[_index][7] + "px",
"height": _arr[_index][7] + "px"
});
_showimg.css({
"width": _arr[_index][8] + "px",
"height": _arr[_index][9] + "px"
});
};
imgPlaces();
_imgout.mousemove(function (e) {
var _gl_w = _glass.width() / 2;
var _maxX = _imgout.width() - _gl_w;
var _maxY = _imgout.height() - _gl_w;
var _moveX = 0, _moveY = 0;
var _nowX = e.pageX - _imgout.offset().left;
var _nowY = e.pageY - _imgout.offset().top;
var _moveX = _nowX - _gl_w, _moveY = _nowY - _gl_w;
if (_nowX <= _gl_w) {
_moveX = 0;
}
if (_nowX >= _maxX) {
_moveX = _maxX - _gl_w;
}
if (_nowY <= _gl_w) {
_moveY = 0;
}
if (_nowY >= _maxY) {
_moveY = _maxY - _gl_w;
}
_glass.css({"left": _moveX + "px", "top": _moveY + "px"});
var _imgX = -_moveX * _showbox.width() / _glass.width();
var _imgY = -_moveY * _showbox.width() / _glass.width();
_showimg.css({"left": _imgX + "px", "top": _imgY + "px"});
});//mouse END
_imgout.mouseenter(function () {
_glass.css("display", "block");
_showbox.css("display", "block");
});
_imgout.mouseleave(function () {
_glass.css("display", "none");
_showbox.css("display", "none");
});
//鍒楄〃閮ㄥ垎
var _nextbtn = $("#" + _obj.nextid);
var _lastbtn = $("#" + _obj.lastid);
var _moveindex = 0;//绱㈠紩绉诲姩
var _sumListMove = function () {
var _leftmove = -_moveindex * (_border + _obj.sumi);
if (_sumbox.is(":animated")) {
_sumbox.stop(true, true);
}
_sumbox.animate({left: _leftmove + "px"}, 300);
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
};//fun END
if (_length <= _obj.sums) {
var _place = (_obj.sums - _length) * _border / 2;
_sumbox.css("left", _place + "px");
_nextbtn.click(function () {
_index++;
if (_index >= _length) {
_index = _length - 1;
}
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
_lastbtn.click(function () {
_index--;
if (_index <= 0) {
_index = 0;
}
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
} else {
var _maxNum = _length - _obj.sums;
_nextbtn.click(function () {
_moveindex++;
if (_moveindex >= _maxNum) {
_moveindex = _maxNum;
}
if (_index <= _moveindex) {
_index = _moveindex;
}
_sumListMove();
});
_lastbtn.click(function () {
_moveindex--;
if (_moveindex <= 0) {
_moveindex = 0;
}
if (_index >= _moveindex + _obj.sums) {
_index = _moveindex + _obj.sums - 1;
}
_sumListMove();
});
}//if END
_sumarr.hover(function () {
_index = $(this).index();
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
}//pcGlasses END
}//ljsGlasses END
common.css
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
body {
margin: 0px;
padding: 0px;
min-width: 1200px;
}
/*相关样式*/
#showbox {
background: #eee;
}
#showbox span {
background: url(../images/whitebg.png) repeat;
}
#showsum {
left: 25px;
margin-top: 10px;
}
#showsum span {
border: 1px solid #ddd;
}
#showsum span.sel {
border: 1px solid #f60;
}
.showpage {
width: 400px;
position: relative;
}
.showpage a {
display: block;
width: 15px;
border: 1px solid #ddd;
height: 60px;
line-height: 60px;
background: #eee;
text-align: center;
font-size: 18px;
position: absolute;
left: 0;
top: -62px;
text-decoration: none;
color: #999;
}
.showpage a#shownext {
left: auto;
right: 0;
}
.showpage a:hover {
background: #ccc;
color: #777;
}
扫一扫
3573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
