铁雪资源网 Design By www.gsvan.com
大家经常逛淘宝、天猫、京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果。今天闲着没事干,就打算复习一下JavaScript基础,用一下基础知识制作一个类似于淘宝的放大镜效果。
先说一下这个效果需要用到的一些基础知识:
css相对定位:position:absolute;
鼠标移入移出以及移动事件:onmouseover、onmouseout、onmousemove,记住这些事件一般不会单个出现
获取鼠标点击坐标:X轴:clientX,Y轴:clientY
当前元素相对于父元素的左位移:offsetLeft
当前元素相对于父元素的上位移:offsetTop
当前元素的实际高、宽度(不包括滚动条):offsetWidth、offsetHeight
球当前元素的最小值,最大值:Math.min()、Math.max();
话不多说直接上代码吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } #demo{ display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #float-box{ position: relative; z-index: 1; } #small-box{ display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; cursor: move; } #big-box{ display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1; } #big-box img{ position: absolute; z-index: 5; } </style> </head> <body> <div id="demo"> <div id="float-box"> <div id="small-box"></div> <img src="/UploadFiles/2021-04-02/macbook-small.jpg">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无原生js实现淘宝放大镜效果的评论...