js放大镜效果

PROMULGATOR

暖冬的黎明ノ

河南省郑州市

← 全屏的图片剪切轮播动画特效

→ js图片内放大镜效果

相关代码

js图片内放大镜效果

js放大镜效果

jQuery放大镜（原创）

jQuery图片点击放大

原生js放大镜

图片放大代码

图片放大镜功能

Html

Css

Js

* {
	margin:0;
	padding:0;
}
#small_Box {
	width:300px;
	height:300px;
	position:relative;
	margin:0 auto;
}
#small_Box img {
	width:100%;
	height:100%;
}

window.onload = function() {
    var span = document.createElement("span");
    var box = document.getElementById("small_Box");
    var img = document.createElement("img");
    var boxWidth = box.clientWidth;
    var boxHeight = box.clientHeight;
    var scale = 2;
    span.style.position = "absolute";
    span.style.width = boxWidth / scale + "px";
    span.style.height = boxHeight / scale + "px";
    span.style.display = 'none';
    span.style.overflow = 'hidden';
    span.style.border = "1px solid #ccc";
    span.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
    span.style.cursor = 'pointer';
    box.appendChild(span);
    img.setAttribute("src", "https://www.jq22.com/img/cs/500x500-1.png");
    img.style.width = scale * boxWidth + "px";
    img.style.height = scale * boxHeight + "px";
    box.onmouseover = function(e) {
        span.style.display = "block";
    }
    box.onmousemove = function(e) {
        e = e || window.event;
        var x = e.clientX - span.clientWidth / scale - this.offsetLeft;
        var y = e.clientY - span.clientHeight / scale - this.offsetTop;
        if (x <= 0) {
            x = 0
        }
        if (x >= box.clientWidth - span.clientWidth) {
            x = box.clientWidth - span.clientWidth
        }
        if (y <= 0) {
            y = 0
        }
        if (y >= box.clientHeight - span.clientHeight) {
            y = box.clientHeight - span.clientHeight
        }
        span.style.left = x + "px";
        span.style.top = y + "px";

img.style.marginLeft = -1 * span.offsetLeft * scale - x + "px";
        img.style.marginTop = -1 * span.offsetTop * scale - y + "px";
        span.appendChild(img);
    }

box.onmouseout = function(e) {
        span.style.display = "none";
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js放大镜效果



代码描述：原生js图片放大镜效果

更新时间：2021-05-18 00:11:21
原生js图片内部放大镜效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>js放大镜效果-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号