搜索到
1
篇与
放大镜
的结果
-
HTML5+CSS3+JavaScript实现放大镜功能 HTML5+CSS3+JavaScript实现放大镜功能预览{anote icon="" href="https://000081.xyz/html/227.html" type="success" content="点我预览"/}源代码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>放大</title> </head> <style> * { box-sizing: border-box; border: 0px; padding: 0px; margin: 0px; } .box { background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; float: left; border: 5px solid black; } .fdj { visibility: hidden; position: relative; background-color: aqua; opacity: 0.1; } .out_box { visibility: hidden; margin-left: 50px; overflow: hidden; float: left; border: 5px solid black; } .big_box { position: relative; background-image: url(https://img14.360buyimg.com/n0/jfs/t1/94207/33/20990/176816/6201dec4E37ffda91/5cff1795baf37b01.jpg); background-size: 100% 100%; } </style> <body> <div class="box" id="box"> <div class="fdj" id="fdj"></div> </div> <div class="out_box" id="out_box"> <div class="big_box" id="big_box"></div> </div> </body> <script> var box = document.getElementById("box"); var fdj = document.getElementById("fdj"); var out_box = document.getElementById("out_box"); var big_box = document.getElementById("big_box"); // 普通图片宽高大小 box var small_width = 400; var small_height = 400; // 放大镜宽高 var fdj_width = 200; var fdj_height = 200; // 放大div的宽高大小 out_box; var out_width = 400; var out_height = 400; // 放大后图片宽高 big_box var big_width = 800; var big_height = 800; // 放大倍率 var width_beilv = -1 * (big_width / small_width); var height_beilv = -1 * (big_height / small_height); // 重新调整布局 //box box.style.width = small_width + "px"; box.style.height = small_height + "px"; //fdj fdj.style.width = fdj_width + "px"; fdj.style.height = fdj_height + "px"; //out_box out_box.style.width = out_width + "px"; out_box.style.height = out_height + "px"; //big_box big_box.style.width = big_width + "px"; big_box.style.height = big_height + "px"; box.onmouseover = function (e) { fdj.style.visibility = "visible"; out_box.style.visibility = "visible"; }; box.onmousemove = function (e) { //用page而不用clien的原因是如果页面过长导致轮滑滚动，clien错位 var x = e.pageX - fdj_width / 2; var y = e.pageY - fdj_height / 2; x = x < 0 ? 0 : x > small_width - fdj_width ? small_width - fdj_width : x; y = y < 0 ? 0 : y > small_height - fdj_height ? small_height - fdj_height : y; fdj.style.left = x + "px"; fdj.style.top = y + "px"; big_box.style.left = width_beilv * x + "px"; big_box.style.top = height_beilv * y + "px"; }; box.onmouseout = function (e) { fdj.style.visibility = "hidden"; out_box.style.visibility = "hidden"; }; </script> </html>
