建设自己的网站怎么做,南宁seo,能建网站的app,如何免费自己做个网站注意#xff1a;看懂本文需要#xff1a;懂中文 #xff1a;)学习过 JavaScript 和 css代码较长#xff0c;框框可左右滑动哦您的观看和点赞是对本公众号最大力的支持 ~~原文链接#xff1a;https://blog.csdn.net/qq_43624878/article/details/110197749 CSS3JS完美实现放… 注意看懂本文需要懂中文 )学习过 JavaScript 和 css代码较长框框可左右滑动哦您的观看和点赞是对本公众号最大力的支持 ~~原文链接https://blog.csdn.net/qq_43624878/article/details/110197749 CSS3JS完美实现放大镜模式效果test核心CSS函数如calc() —— 动态计算var() —— 使用自定义变量CSS伪元素::before/after —— 方便控制而且独立于文档流之外易于渲染JS APIoffsetX/offsetY相对父节点区域左上角定位…其实我们具体要实现的就是在鼠标移入时显示出来一个小圆圈(跟着鼠标走)这个小圆圈到哪哪里的图片区域就放大相应的倍数并且显示在圆圈内。为什么要用offset API其实根据上面的描述我们需要实时获取鼠标的左偏移量和上偏移量而这两个偏移量是相对父节点的。通过左偏移量和上偏移量结合calc()即可计算放大镜显示内容相对父节点的显示位置。不难找到在鼠标事件对象中js为我们提供了如下APIscreenX/screenY相对屏幕区域左上角定位若发生滚动行为则相对该区域定位pageX/pageY相对网页区域左上角定位clientX/clientY相对浏览器可视区域左上角定位offsetX/offsetY相对父节点区域左上角定位若无父节点则相对或定位但相较而言唯一符合要求的就只有offset“相对于父元素”了。div classbruce div classmagnifierdivdivlet magnifierdocument.querySelector(.magnifier);magnifier.addEventListener(mousemove,e{ //控制“镜子”小圆圈的移动});放大镜显示内容其实就是将原图像放大N倍通过上述偏移量按照比例截取一定区域显示内容。先定义相关的css变量。我们设定放大倍率为2.5倍那么被放大图像的宽高也是原来宽高的2.5倍。声明两个变量分为为 --x 和 --y :root{ --ratio: 2.5; --box-w: 600px; --box-h: 400px; --outbox-w: calc(var(--box-w) * var(--ratio)); --outbox-h: calc(var(--box-h) * var(--ratio));}.bruce{ margin-top: 50px;}.magnifier{ --x:0; --y:0; overflow: hidden; position: relative; width: var(--box-w); height: var(--box-h); background: url(img/nan.png) no-repeat center/100% 100%; cursor: grabbing;}图片以背景图的形式展示方便控制大小。很显然在这个场景下无需插入子节点作为放大镜的容器了使用::before即可放大镜在使用时宽高为100px不使用时宽高为0。通过绝对定位布局放大镜随鼠标移动的位置即声明left和top再通过声明 transform:translate(-50%,-50%) 将放大镜补位使放大镜中心与鼠标光标位置一致。由于声明left和top定位放大镜的位置还可以声明 will-change 改善left和top因改变而引发的性能问题而且用CSS解决这些问题的另一个好处就是借助于伪元素/伪类我们可以将一些比较细节的东西用CSS解决而不是寄托于“繁重”的JavaScript。比如鼠标移入样式hover.magnifier::before{ --size: 0; position: absolute; left: var(--x); top: var(--y); border-radius: 100%; width: var(--size); height: var(--size); box-shadow: 1px 1px 3px rgba(0,0,0,.5); content: ; will-change: left,top; transform: translate(-50%,-50%);}.magnifier:hover::before{ --size: 100px;}接下来使用background实现(展示)放大镜内容。依据放大倍率为2.5倍那么可声明size: --outbox-w --outbox-h通过 position-x 和 position-y 移动背景即可最终可连写成 background:#333 url(背景图片) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h) 。其中 --scale-x 和 --scale-y 对应 position-x 和 position-y (即background-position)用于随着鼠标移动而改变背景位置。--scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x));--scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));12那么上面mousemove函数中改变镜子的“位置坐标”就可以这么写了e.target.style.setProperty(--x,${e.offsetX}px);e.target.style.setProperty(--y,${e.offsetY}px);12so eazy~最终的CSS内容如下:root{ --ratio: 2.5; --box-w: 600px; --box-h: 400px; --outbox-w: calc(var(--box-w) * var(--ratio)); --outbox-h: calc(var(--box-h) * var(--ratio));}.bruce{ margin-top: 50px;}.magnifier{ --x:0; --y:0; overflow: hidden; position: relative; width: var(--box-w); height: var(--box-h); background: url(img/nan.png) no-repeat center/100% 100%; cursor: grabbing;}.magnifier::before{ --size: 0; --scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x)); --scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y)); position: absolute; left: var(--x); top: var(--y); border-radius: 100%; width: var(--size); height: var(--size); background: #333 url(img/nan.png) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h); box-shadow: 1px 1px 3px rgba(0,0,0,.5); content: ; will-change: left,top; transform: translate(-50%,-50%);}.magnifier:hover::before{ --size: 100px;}若是::before中想要用一张本身就是2倍大小的图片则background中将--outbox-w和--outbox-h替换为原本的--box-w和--box-h 再做适当的微调即可。注意看你放大镜中的内容它表明不只是简单的图片的放大所以才有了 var(--size) / var(--ratio) 这一段代码关于css中修改css3自定义变量我仍然认为只能在“同级同属”范围内才能修改并显示成功。完整代码已加上注释注意修改图片路径htmlhtml langenhead meta charsetUTF-8 titleTitletitle style:root {--ratio: 2.5; /* 放大倍率 */--box-w: 600px; /* 原始宽度 */--box-h: 400px; /* 原始高度 */--outbox-w: calc(var(--box-w) * var(--ratio)); /* 放大后宽度 */--outbox-h: calc(var(--box-h) * var(--ratio)); /* 放大后高度 */ }/* 调一下框框位置 */.bruce {margin-top: 50px; }/* 界面 */.magnifier {--x: 0;--y: 0;overflow: hidden; /* 溢出隐藏边框的内容 */position: relative; /* 相对定位 */width: var(--box-w); /* 应用root定义的宽度 */height: var(--box-h); /* 应用root定义的高度 *//* 注意如果同时设置了position和size两个属性应该用左斜杠“/”而不是用空格把两个参数值隔开position/size */background: url(1.jpg) no-repeat center/100% 100%; /* 调整图片宽高设置背景图片居中不重复显示 */cursor: grabbing; /* 定义鼠标形状为手势 */ }.magnifier::before {--size: 0;/* 原图和放大之后的图片比例做计算 */--scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x)); /* 显示放大后图片的x轴 */--scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y)); /* 显示放大后图片的y轴 *//* 绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于: */position: absolute;left: var(--x); /* 左距离 */top: var(--y); /* 顶距离 */border-radius: 100%; /* 设置为圆形 */width: var(--size); /* 设置放大镜宽度 */height: var(--size); /* 设置放大镜高度 */background: #333 url(1.jpg) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h);/* 设置阴影 */box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);content: ; /* content属性一般用于:before, :after伪元素中,用于呈现伪元素的内容 */will-change: left, top; /* 性能优化 *//* 设置放大镜 xy向左偏移一半因为放大镜本身是一个正方形 */transform: translate(-50%, -50%); }.magnifier:hover::before {--size: 100px; /* 当选择鼠标指针浮动在其上的元素调整样式 */ }styleheadbodydiv classbruce div classmagnifierdivdivscriptlet magnifier document.querySelector(.magnifier);// 添加鼠标移动事件的监听 magnifier.addEventListener(mousemove, e {//控制“镜子”小圆圈的移动 e.target.style.setProperty(--x, ${e.offsetX}px); e.target.style.setProperty(--y, ${e.offsetY}px); });scriptbodyhtmlend您的观看和点赞是对本公众号最大力的支持 ~~
