html 放大镜效果

还是用到html还有css，写的非常简单，很容易懂，就不多废话了

代码如下：

<!DOCTYPE html>
<html>

<head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #smallbox {
               border: 1px solid #000000;
               width: 450px;
               height: 450px;
               position: absolute;
               cursor: pointer;
               z-index: 5;
           }

           #movebox {
               display: none;
               position: absolute;
               left: 0;
               top: 0;
               opacity: 0.5;
               width: 303.75px;
               height: 303.75px;
               background: yellow;
               z-index: 100;
           }

           #smallimg1 {
               height: 450px;
               width: 450px;
           }

           #bigimg {
               position: absolute;
               left: 0px;
               top: 0px;
           }

           #what {
               display: none;
               height: 540px;
               width: 540px;
               overflow: hidden;
               position: absolute;
               left: 500px;
               top: 0px;
           }
       </style>
       <script>
           var _left;
           var _top;
           var myscale;
           window.onload = function() {
               //               myscale=document.getElementById("smallbox").clientWidth/document.getElementById("movebox").clientWidth;
               myscale = 1.76;
               document.getElementById("smallbox").addEventListener("mousemove", function(evt) {
                   //先设置快元素的display
                   document.getElementById("movebox").style.display = "block";
                   document.getElementById("what").style.display = "block";

function movediv(divleft, divtop, myscale) {
               document.getElementById("movebox").style.left = divleft + "px";
               document.getElementById("movebox").style.top = divtop + "px";
               document.getElementById("bigimg").style.left = -(myscale * divleft) + "px";
               document.getElementById("bigimg").style.top = -(myscale * divtop) + "px";

}
</script>
</head>

<div id="movebox"></div>
   </div>
   <div id="what">
       <img id="bigimg" src="http://img10.360buyimg.com//n0/jfs/t4042/336/485174131/112786/cbfa499e/5851f4ecN397534ba.jpg" />
   </div>
<div style="width: 100px; height: 100px; background: green; position: absolute; left: 0px; top: 500px;" >图片来源京东</div>
</html>

在js部分的代码很简单，当然，你也可以选择用jq，但是没不要

html 放大镜效果相关推荐

使用OpenGL Shader实现放大镜效果
使用OpenGL Shader实现放大镜效果 2014年3月16日renjihe发表评论阅读评论周末闲来无事,想玩玩OpenGL Shader,想想就实现一个放大镜效果的Shader吧. 着色器可以 ...
使用js实现放大镜效果
点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心可以通过滑轮控制放大倍数,由于图片太大如果放大镜没有出现可刷新一下网页转载于:https://www.cnblogs. ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
Leaflet中使用Leaflet.MagnifyingGlass实现放大镜效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
十六、Javascript实现放大镜效果
@Author:Runsen @Date:2020/6/1 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
canvas整体放大_【HTML5】Canvas 实现放大镜效果
图片放大镜效果原理首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化获得 canvas 和 image 对象,这里使用标签 ...
uniapp点击图片放大_手机做图片放大镜效果很难？看这里，分分钟就能学会！
将图片放大的放大镜效果图: PicsArt手机图片放大镜 PicsArt手机图片放大镜在PicsArt中打开图片,点击[工具]--[图形剪辑]. PicsArt手机图片放大镜选择圆形,通过缩放双指 ...
JQuery放大镜效果
在网上找了些实现放大镜效果的方法,感觉这个方法符合我的要求就摘过来了,非原创在一些电子商务或商品展示网上,为了更好的显示商品,一般都会添加放大镜的效果. 如图:(当把鼠标放到小图片上,右边会自动的出 ...
php 放大镜,图片放大镜效果实战总结
摘要:本次实战主要完成了图片放大镜的效果,通过定义原始图片,放大镜,放大后的图片,然后设置放大后的图片为原始图片的3倍,通过鼠标移上显示放大后的图片,并通过位移计算当前放大镜的位置,设置放大后图片的偏 ...

html 放大镜效果

html 放大镜效果相关推荐

最新文章

热门文章