搜索
您的当前位置:首页正文

实现jquery放大镜的两种方法

2023-12-08 来源:好心意情感网

jquery写的两种放大镜效果,没有使用到插件。调理和思路清晰。不是使用面向对象方式写的,初学者较容易看懂。废话不多说,看代码。图片这里就不上传了,大家自己找下。最好是找到比例的,这样效果比较好。

<body> <div id="father"> <div id="container"> <img src="img/400_1.jpg" style="display: block;"> <img src="img/400_2.jpg" > <div class="shade"></div> </div> <div class="small first"><img src="img/50_1.jpg"></div> <div class="small second"><img src="img/50_2.jpg"></div> </div> <div class="big"> <img src="img/800_1.jpg" style="display: block;"> <img src="img/800_2.jpg"> </div> </body> 

css代码

*{padding: 0; margin: 0;} #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} #father .second{left: 70px;} .third{left: 140px;} #father{position: relative; top: 100px; left: 50px; height: 460px;} #container{position: absolute; width: 400px; height: 400px;} #container img{position: absolute; display: none;} .shade{width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.4; top: 0; left: 0; display: none;} .big{width: 400px; height: 400px; position: absolute; top: 100px; overflow: hidden; left: 500px; display: none;} .big img{width: 800px; height: 800px; position: absolute; display: none;} 

js代码

<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> <script type="text/javascript"> $(function () { changePic('.first',0); changePic('.second',1); var shadeWidth = $('.shade').width(),//阴影的宽度 shadeHeight = $('.shade').height(),//阴影的高度 middleWidth = $('#container').width(),//容器的宽度 middleHeight = $('#container').height(),//容器的高度 bigWidth = $('.big').width(),//放大图片盒子的宽度 bigHeight = $('.big').height(),//放大图片盒子的高度 rateX = bigWidth / shadeWidth,//放大区和遮罩层的宽度比例 rateY = bigHeight / shadeHeight;//放大区和遮罩层的高度比例 //当鼠标移入与移出时阴影与放大去显现/消失 $('#container').hover(function() { $('.shade').show(); $('.big').show(); }, function() { $('.shade').hide(); $('.big').hide(); }).mousemove(function(e) {//当鼠标移动时,阴影和放大区图片进行移动 //记录下光标距离页面的距离 var x = e.pageX, y = e.pageY; //设置遮罩层的位置 $('.shade').offset({ top: y-shadeHeight/2, left: x-shadeWidth/2 }); //获取遮罩层相对父元素的位置 var cur = $('.shade').position(), _top = cur.top, _left = cur.left, hdiffer = middleHeight - shadeHeight, wdiffer = middleWidth - shadeWidth; if (_top < 0) _top = 0; else if (_top > hdiffer) _top = hdiffer; if (_left < 0) _left = 0; else if (_left > wdiffer) _left =wdiffer; //判断完成后设置遮罩层的范围 $('.shade').css({ top: _top, left: _left }); //设置放大区图片移动 $('.big img').css({ top: - rateY*_top, left: - rateX*_left }); });; //封装的改变图片显示的函数 function changePic (element,index) { $(element).click(function() { $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); $('.big img').eq(index).css('display', 'block').siblings().css('display', 'none'); }); } }); 

以上是常用的,下面这个是在原图基础上放大的

htm

<body> <div id="father"> <div id="container"> <img src="img/400_1.jpg" style="display: block;"> <img src="img/400_2.jpg" > <img src="img/400_3.jpg" > <div class="shade"> <img src="img/800_1.jpg" style="display: block;"> <img src="img/800_2.jpg"> <img src="img/800_3.jpg"> </div> </div> <div class="small first"><img src="img/50_1.jpg"></div> <div class="small second"><img src="img/50_2.jpg"></div> <div class="small third"><img src="img/50_3.jpg"></div> </div> </body> 

css代码

*{padding: 0; margin: 0;} #father .small{width: 50px; height: 50px; border: 2px solid #ccc; bottom: 0; position: absolute;} #father .second{left: 70px;} .third{left: 140px;} #father{position: relative; top: 100px; left: 50px; height: 460px;} #container{position: absolute; width: 400px; height: 400px;} #container img{position: absolute; display: none;} .shade{width: 200px; height: 200px; position: absolute; top: 0;left: 0; display: none; border-radius: 50%; overflow: hidden; background: #000;} .shade img{display: none; width: 800px; height: 800px; position: absolute;} 

js代码

<span style="white-space:pre"> </span><script type="text/javascript" src='js/jquery-1.12.4.min.js'></script> <script type="text/javascript"> $(function () { changePic('.first',0); changePic('.second',1); changePic('.third',2); var shadeWidth = $('.shade').width(),//阴影的宽度 shadeHeight = $('.shade').height(),//阴影的高度 middleWidth = $('#container').width(),//容器的宽度 middleHeight = $('#container').height(),//容器的高度 bigImgWidth = $('.shade img').width(),//放大图片盒子的宽度 bigImgHeight = $('.shade img').height(),//放大图片盒子的高度 rateX = bigImgWidth / middleWidth,//放大区和遮罩层的宽度比例2 rateY = bigImgHeight / middleHeight;//放大区和遮罩层的高度比例2 //当鼠标移入与移出时阴影与放大去显现/消失 $('#container').hover(function() { $('.shade').show(); $('.big').show(); }, function() { $('.shade').hide(); $('.big').hide(); }).mousemove(function(e) {//当鼠标移动时,阴影和放大区图片进行移动 //记录下光标距离页面的距离 var x = e.pageX, y = e.pageY; //设置遮罩层的位置 $('.shade').offset({ top: y-shadeHeight/2, left: x-shadeWidth/2 }); //获取遮罩层相对父元素的位置 var cur = $('.shade').position(), _top = cur.top, _left = cur.left, hdiffer = middleHeight - shadeHeight, wdiffer = middleWidth - shadeWidth; if (_top < 0) _top = 0; else if (_top > hdiffer) _top = hdiffer; if (_left < 0) _left = 0; else if (_left > wdiffer) _left =wdiffer; //判断完成后设置遮罩层的范围 $('.shade').css({ top: _top, left: _left }); //设置放大区图片移动 $('.shade img').css({ top: - _top*rateY*3/2, left: - _left*rateX*3/2 }); });; //封装的改变图片显示的函数 function changePic (element,index) { $(element).click(function() { $('#container img').eq(index).css('display', 'block').siblings().css('display', 'none'); $('.shade img').eq(index).css('display', 'block').siblings().css('display', 'none'); }); } }); <span style="white-space:pre"> </span></script> 

小编还为您整理了以下内容,可能对您也有帮助:

用jQuery制作的放大镜效果,为什么放大出来的图片在其他图片下面,怎么设置就显示在上面了?

尝试将对应的css中的 z-index 设置成最大值,应该就显示在最前面了,如设置成9999.追问不行

为什么jQuery用了放大镜我的放大镜跟鼠标不在一起的,放大镜也不会只出现在小图片上面,如图大神帮帮忙

不是拼接的。基本原理是用一个(big.jpg )或两个图(small.jpg ,big.jpg)实现。一个图的方式:img控件直接加载大图,用width,height控制缩小显示,mouseover时根据设置比例,放大的范围,在另一个img中显示原图的相应部分(需控制css:overflow:hidden),两个图的差不多,小图是大图的缩略图片,这样做的好处是不用直接加载大图,提高网页显示速度,只有发生了鼠标滑动放大事件时才动态加载大图。p.s. 多看看“js 放大镜”的源码,就能知道具体怎样实现的了

jquery放大镜原理,详细点

我个人理解 一个容器小图 一个容器大图
鼠标放在小图上 获得在小图上面的鼠标坐标的百分比 比如距离顶部/左边50%
定位到大图 距离顶部/左边50% 大图的容器大小有* 超出部分隐藏 因此就有了小图看大图鼠标增加监听事件
onmove

jquery放大镜原理,详细点

我个人理解 一个容器小图 一个容器大图
鼠标放在小图上 获得在小图上面的鼠标坐标的百分比 比如距离顶部/左边50%
定位到大图 距离顶部/左边50% 大图的容器大小有* 超出部分隐藏 因此就有了小图看大图鼠标增加监听事件
onmove

jquery放大镜效果右面的图片出不来

试试这个图片放大效果
鼠标移上去就会显示放大图片
里面有教程和源码

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?9=y&id=11843

jquery放大镜效果右面的图片出不来

试试这个图片放大效果
鼠标移上去就会显示放大图片
里面有教程和源码

参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?9=y&id=11843

持普通自小客车驾照可否骑乘轻型机车?

根据中国的相关法律法规,持普通自小客车驾照的驾驶员不可以骑乘轻型摩托车。只有取得了A1、A2、A3等相应的摩托车驾照才能合法驾驶轻型摩托车。

需要注意的是,在中国台湾地区和香港特别行政区的驾驶证制度中,持普通自小客车驾照的驾驶员可以骑乘一定排量以下的轻型机车,但这些规定并不适用于地区。

基于jQuery的图片放大镜jQZoom ,页面中img标签的jqimg下有黄色波浪线警告

你是不是落什么了,用法是没错的。除了要导入jqzoom包还要写一个js才可以。

<html>

<head>

若干包,jquery.js啥的~

<script type="text/javascript">

$(document).ready(function(){

$(".jqzoom").jqueryzoom({

xzoom: 300,

yzoom: 300,

offset: 10,

position: "right",

preload: 1

});

});

</script>

</head>

<body>

<div class="jqzoom" style='margin-right:5px;float:left;'><img src="images/0.jpg" alt="scarpa" jqimg(**此处有警告线提示**)="images/11.jpg" /></div>

</body>

</html>

这样就ok啦~

好心意情感网还为您提供以下相关内容希望对您有帮助:

jQuery的zoom插件如何设置

使用方法:1、在head引入my.css文件 2、在body引入下面的代码:

给一个图片设置放大镜。跟淘宝的放大镜一样,代码怎么做。

window.onload = function() {$(".jqzoom").jqueryzoom({xzoom: 250, //设置放大 DIV 长度(默认为 200)yzoom: 250, //设置放大 DIV 高度(默认为 200)offset: 10, //设置放大 DIV 偏移(默认为 10)position...

用jQuery制作的放大镜效果,为什么放大出来的图片在其他图片下面,怎么...

尝试将对应的css中的 z-index 设置成最大值,应该就显示在最前面了,如设置成9999.

jquery放大镜原理,详细点

鼠标放在小图上 获得在小图上面的鼠标坐标的百分比 比如距离顶部/左边50 定位到大图 距离顶部/左边50% 大图的容器大小有限制 超出部分隐藏 因此就有了小图看大图鼠标增加监听事件 onmove ...

为什么jQuery用了放大镜我的放大镜跟鼠标不在一起的,放大镜也不会只出 ...

基本原理是用一个(big.jpg )或两个图(small.jpg ,big.jpg)实现。一个图的方式:img控件直接加载大图,用width,height控制缩小显示,mouseover时根据设置比例,放大的范围,在另一个img中显示原图的相应部分(需控制css...

基于jQuery的图片放大镜jQZoom ,页面中img标签的jqimg下有黄色波浪线...

(document).ready(function(){ (".jqzoom").jqueryzoom({ xzoom: 300,yzoom: 300,offset: 10,position: "right",preload: 1 });}); 这样就ok啦~

HTML5中,如何为图片制作放大镜效果?

制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上,然后在对canvas进行局部裁剪最后对裁剪的部分进行放大,这样就可以实现放大镜的效果。这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对...

jquery放大镜效果右面的图片出不来

试试这个图片放大效果 鼠标移上去就会显示放大图片 里面有教程和源码 参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?9=y&amp;id=11843

jQuery做的放大镜鼠标无法保持在放大框的中心怎么办,求大神解答_百度知 ...

1、预计是你的设置问题,可以试试线程的JQ插件,如jqzoom之类的,2、自己计算的公式需要线理解位置关系,然后慢慢调整

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 酬王定国·岂有多方书五车相同朝代诗歌

    《酬王定国·岂有多方书五车》刘攽相同朝代诗词。《曹将军》、《下瞿塘》、《滕王阁》、《儿馁嗔郎罢妻寒怨藁砧唐眉山诗也戏为笺之》、《题艾溪》、《废贡院为米廪过之值盘厫》、《送客至灵谷》、《叹屩词》、《题陈朝玉爱竹轩》、《酬春湖史履庸惠四皓图》。《酬王定国·岂有多方书五车》相同朝代的诗词:《曹将军》、《下瞿塘》、《滕王阁》、《儿馁嗔郎罢妻寒怨藁砧唐眉山诗也戏为笺之》、《题艾溪》、《废贡院为米廪过之值盘厫》、《送客至灵谷》、《叹屩词》、《题陈朝玉爱竹轩》、《酬春湖史履庸惠四皓图》作者:刘攽。年代:宋代。我们为您从以下几个方面提供酬王定国·岂有多方书五车的详细介绍。一、《酬王定国·岂有多方书五车》的全文 点此查看《酬王定国·岂有多方书五车》的详细内容。岂有多方书五车,尔来留意就丹砂。

  • 和超然翁韵二首的全文 和超然翁韵二首的全文是什么

    《和超然翁韵二首》黄公度全文:西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。《和超然翁韵二首》全文:西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。作者:黄公度。年代:宋代。我们为您从以下几个方面提供和超然翁韵二首的详细介绍。一、《和超然翁韵二首》的全文 点此查看《和超然翁韵二首》的详细内容。西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。二、《和超然翁韵二首》黄公度其他诗词《乙亥岁除渔梁村》、《悲秋》、《卜算子》、《道间即事》、《眼儿媚》。

  • 酬王定国·岂有多方书五车的全文 酬王定国·岂有多方书五车的全文是什么

    《酬王定国·岂有多方书五车》刘攽全文:岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。《酬王定国·岂有多方书五车》全文:岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。作者:刘攽。年代:宋代。我们为您从以下几个方面提供酬王定国·岂有多方书五车的详细介绍。一、《酬王定国·岂有多方书五车》的全文 点此查看《酬王定国·岂有多方书五车》的详细内容。岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。

  • 和超然翁韵二首的全文是什么

    《和超然翁韵二首》黄公度全文:西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。《和超然翁韵二首》全文:西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。作者:黄公度。年代:宋代。我们为您从以下几个方面提供和超然翁韵二首的详细介绍。一、《和超然翁韵二首》的全文 点此查看《和超然翁韵二首》的详细内容。西风回首故乡情,何日为园学邵平。已办孤帆冲夕浪,可堪万壑更秋声。折腰为米追时辈,当面输心愧老成。饮罢归来未能寝,微吟拥鼻数寒更。二、《和超然翁韵二首》黄公度其他诗词《乙亥岁除渔梁村》、《悲秋》、《卜算子》、《道间即事》、《眼儿媚》。

  • 酬王定国·岂有多方书五车的全文是什么

    《酬王定国·岂有多方书五车》刘攽全文:岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。《酬王定国·岂有多方书五车》全文:岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。作者:刘攽。年代:宋代。我们为您从以下几个方面提供酬王定国·岂有多方书五车的详细介绍。一、《酬王定国·岂有多方书五车》的全文 点此查看《酬王定国·岂有多方书五车》的详细内容。岂有多方书五车,尔来留意就丹砂。谁将饱食仓中鼠,换取红莲火里花。三顾祇能矜彼善,万钟多不悟堪嗟。蟠桃结实何难俟,况值安期枣似瓜。

Top