700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jQuery实现点击图片放大 鼠标滑轮控制缩放

jQuery实现点击图片放大 鼠标滑轮控制缩放

时间:2022-01-14 15:49:53

相关推荐

jQuery实现点击图片放大 鼠标滑轮控制缩放

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>测试</title></head><body><div align="center"><img class="pimg" src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg" height="130" width="100"></div><div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"><div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div></div></body><script typet="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script><script>$(function(){$(".pimg").click(function(){var _this = $(this);imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);});});function zoomImg(o) {var zoom = parseInt(o.style.zoom, 10) || 100;zoom += event.wheelDelta / 2;if (zoom > 0) o.style.zoom = zoom + '%';}function imgShow(outerdiv, innerdiv, bigimg, _this){var src = _this.attr("src");$(bigimg).attr("src", src);$("<img/>").attr("src", src).load(function(){var windowW = $(window).width();var windowH = $(window).height();var realWidth = this.width;var realHeight = this.height;var imgWidth, imgHeight;var scale = 0.8;if(realHeight>windowH*scale) {imgHeight = windowH*scale;imgWidth = imgHeight/realHeight*realWidth;if(imgWidth>windowW*scale) {imgWidth = windowW*scale;}} else if(realWidth>windowW*scale) {imgWidth = windowW*scale;imgHeight = imgWidth/realWidth*realHeight;} else {imgWidth = realWidth;imgHeight = realHeight;}$(bigimg).css("width",imgWidth);var w = (windowW-imgWidth)/2;var h = (windowH-imgHeight)/2;$(innerdiv).css({"top":h, "left":w});$(outerdiv).fadeIn("fast");$("img").bind("mousewheel",function() {zoomImg(this);return false;});});$(outerdiv).click(function(){$(this).fadeOut("fast");});}</script></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。