网上有许多放大镜的jquery的插件,但是用着不是那么得心应手,现在一页代码实现一个放大镜功能,如果需要附加的功能可以手动修改,原理都在注释里
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>放大镜效果& lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
}
.small {
margin-left: 40像素;
margin-top: 50 px;
宽度:150 px;
身高:150 px;/*边境:2 px固体黄色;*/}
.small> img {
宽度:150 px;
身高:150 px;
}
.slider {
宽度:50 px;
高度:50 px;
背景:rgba (180180135, 0.3);
位置:绝对的;
显示:没有;
}
#{大//设置为固定大小;
宽度:200 px;
身高:200 px;
位置:绝对的;/*边境:2 px固体红色;*/溢出:隐藏;
显示:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !——缩略图——比;
& lt; div类=靶 北?
& lt; img src=" https://www.yisu.com/zixun/thumb.jpg "/比;
& lt; !——放大镜,在原图不上的小块,在
& lt; div类=盎椤弊４? lt;/div>
& lt;/div>
& lt; !——放大镜区域,大图,设置为没有隐藏——比;
& lt; div id=按蟆痹?
& lt; img id=" bigImg " src=" https://www.yisu.com/zixun/big.jpg "/比;
& lt;/div>
even.clientX<输入类型="文本" value=" https://www.yisu.com/zixun/0 " id="测试"/祝辞& lt; br/比;
even.clientY<输入类型="文本" value=" https://www.yisu.com/zixun/0 " id=" test1 "/比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/jquery-1.7.2.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
?$ var (“.small”) [0];
滑块var=$ (“.slider”) [0];
var大=. getelementbyid(“大”);//试一试js获取
var bigImg=. getelementbyid (“bigImg”);//让滑块跟随鼠标移动。给小的方块绑定事件
$ (" .small ") .mousemove(函数(e) {
甚至var=e | |事件;//兼容火狐浏览器
var x=lientX——小。offsetLeft - slider.offsetWidth/2;
var y=lientY——小。offsetTop - slider.offsetHeight/2;//测试even.clientX和even.clientY
$(" #测试”).val (even.clientX);
$ (" # test1) .val (even.clientY);//水平方向的最大值
var maxX=小。clientWidth - slider.clientWidth;//竖直方向的最大值
var maxY=小。clientHeight - slider.clientHeight;
如果(x<0) {//相当于超出左侧,超出左侧时,拉回
x=0;
}//超出右侧时拉回
如果(x> maxX) {
x=maxX的;
}//顶部超出
如果(y<0) {
y=0;
}//底部超出
如果(y> maxY) {
y=maxY;
}
slider.style。顶级=(y + small.offsetTop) +“px”;
slider.style。左=(x + small.offsetLeft) +“px”;//放大的图片的主要实现代码:比例计算,big.scrollLeft是id=大的div中下方滚轴的位置//由于大的div id=设置成固定大小,而图片又非常大,所以这个div就像个放大镜一样在大图上晃//比例计算很简单,鼠标在缩略图的位置与缩略图宽高比=鼠标在大图位置与大图宽高,比现在未知数是大图鼠标的位置
大了。scrollLeft=x/maxX * (bigImg。clientWidth - big.clientWidth);
大了。scrollTop=y/maxY * (bigImg。clientHeight -big.clientHeight);
}）;//鼠标移入事件
$ (" .small ") .mouseenter(函数(){//鼠标移入到缩略图时候实现,上面出现的小的方块
$ (" .slider ") . css(“显示”、“块”);
$(" #大”). css(“顶级”,small.offsetTop +“px”);//隐藏的大图=获取左图的左边位置+宽度+ 10(隔开点缝隙与缩略图)+ px
big.style。左=小。offsetLeft +小。offsetWidth + 10 +“px”;//右侧的大图区域显示出来图片
$(" #大”). css(“显示”、“块”);
}）;//移除事件//添加鼠标移出事件,鼠标移出缩略图的时候
$ (" .small ") .mouseleave(函数(){
$ (" .slider ") . css(“显示”,“没有一个”);
$(" #大”). css(“显示”,“没有一个”);
}）;
& lt;/script>
& lt;/body>
& lt;/html>
下载演示
https://github.com/mytheshow/..。
链接:http://pan.baidu.com/s/1nvMBgb3
以上所述是小编给大家介绍的jquery实现放大镜简洁代码,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
