北京橙乐视觉广告有限公司网站优化垂直化好还是扁平化好

当前位置： 首页 > news >正文

北京橙乐视觉广告有限公司,网站优化垂直化好还是扁平化好,区域名查询,宿州房地产网站建设JS案例图片放大镜 #x1f31f;效果展示
#x1f31f;HTML结构 #x1f31f;CSS样式 #x1f31f;实现思路
#x1f31f;具体实现
1.初始化数据图片 2.获取所需DOM元素 3.初始化页面 初始化缩略图 绑定事件 #x1f31f;完整代码 #x1f31f;写在最后 效果展示  HTML结构 CSS样式 实现思路   具体实现  1.初始化数据图片 2.获取所需DOM元素 3.初始化页面 初始化缩略图 绑定事件 完整代码 写在最后  效果展示  HTML结构 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css /head body!–最外层容器 –div classcontainer!– 左侧原图 –div classleft-img!– 遮罩层 –div classmask/div/div!– 右侧放大图片 –div classright-img/div!– 缩略图集合 –div classimg-list-wrapperul classimg-listli/li/ul/div/divscript src./index.js/script /body /html CSS样式

• {margin: 0;padding: 0;list-style: none; }.container {width: 1000px;height: 600px;margin: 50px auto;font-size: 0; }.left-img {width: 490px;height: 510px;margin-right: 16px;border: 1px solid #eee;display: inline-block;/* 图片 /background-image: url(./images/imgA_2.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;/ 遮罩层相对我进行定位 /position: relative; } .mask {width: 230px;height: 230px;background-image: url(./images/bg.png);position: absolute;top: 0;left: 0;/ opacity: 0; / } .right-img {width: 490px;height: 510px;border: 1px solid #eee;display: inline-block;background-image: url(./images/imgA_3.jpg);background-repeat: no-repeat;/ opacity: 0; / }.img-list-wrapper {width: 490px;text-align: center;margin-top: 10px; } .img-list {display: inline-block; } .img-list li {display: inline-block;width: 60px;height: 60px;margin: 0 5px;cursor: pointer;background-image: url(./images/imgA_1.jpg);background-repeat: no-repeat;border: 2px solid #000;/ border: 1px solid #eee; */ } 实现思路   在敲完上面HTML文件和CSS文件后可以看到下图效果(图片素材及完整代码文末可下载) 可以看到整体分为四块 1. 阴影区域其实是一张很小的像素图铺满元素形成后续跟随鼠标移动所选区域在右侧高清展示。 2.图片大图就是展示的图片。 3.缩略图列表点击切换图片。 4.高清大图展示区域。 在项目中②和③一般可以用同一种图④会使用一张高清图。我们这里是使用三张图片来开发缩略图普通展示图高清图。 因为①和④是鼠标移入才出现所以这里 给.mask和.right-img加上opacity: 0;属性如下 接下来我们需要做的就是在鼠标移入和移出时在右侧展示与隐藏高清图从而实现图片放大镜效果。 具体实现  1.初始化数据图片 这里用的就是本地图片所以先初始化数据图片三种大小对应缩略图展示图高清图 // 初始化数据图片 var imgs {// 小图small: [imgA_1.jpg, imgB_1.jpg, imgC_1.jpg],// 中图middle: [imgA_2.jpg, imgB_2.jpg, imgC_2.jpg],// 大图large: [imgA_3.jpg, imgB_3.jpg, imgC_3.jpg] } 2.获取所需DOM元素 因为需要频繁操作DOM元素这里简单封装一个获取DOM元素方法 // 单一元素 function \((selector) {return document.querySelector(selector); }// 多个元素 function \)\((selector) {return document.querySelectorAll(selector); } 接下来获取需要用到的元素 3.初始化页面 初始化缩略图 初始化所有缩略图及③区域的缩略图列表。拿到缩略图值拼接字符串将li/li插入页面并默认选中第一张缩略图 // 初始化所有缩略图let str ;for(var i0; iimgs.small.length; i) {str li stylebackground-image: url(./images/ imgs.small[i] );/li}smallImg.innerHTML str // 默认选中第一个缩略图 \)(.img-list li).style.border 2px solid #000; 绑定事件 该效果中一共有两种事件一个是点击缩略图另一个是鼠标移入移出。 点击缩略图切换展示图片 smallImg.onclick function (e) {// 判断我点击的元素是li元素if (e.target.tagName LI) {// 让所有li元素取消borderlet lis $$(li);for (let i 0; i lis.length; i) {lis[i].style.border none;}// 让选中的li元素添加bordere.target.style.border 2px solid #000;// 点击缩略图后原图和大图也需要跟着变换// 点的是第几个元素, 获取元素索引// [1,2,3].indexOf(3) 2let index [].indexOf.call(lis, e.target);midImg.style.backgroundImage url(./images/ imgs.middle[index] );largeImg.style.backgroundImage url(./images/ imgs.large[index] );} } 移入移出事件 这里需要计算遮罩层离边框的距离可得到的距离有 绿色边框距离浏览器左边的距离 红色鼠标距离浏览器左边的距离 黄色遮罩层一半的距离 通过这几个值就可求出遮罩层距离边框的距离left了同理top值一样的求法 鼠标移入 midImg.onmousemove function (e) {// 让遮罩层和大图展示mask.style.opacity 1;largeImg.style.opacity 1;// 根据鼠标位置计算遮罩层的位置let left e.clientX - midImg.offsetLeft - mask.offsetWidth / 2;// 同理let top e.clientY - midImg.offsetTop - mask.offsetHeight / 2;// 边界条件if (left 0) {left 0;}if (top 0) {top 0;}if (left midImg.offsetWidth - mask.offsetWidth) {left midImg.offsetWidth - mask.offsetWidth}if (top midImg.offsetHeight - mask.offsetHeight) {top midImg.offsetHeight - mask.offsetHeight}// 根据top和left调整mask的位置mask.style.left left px;mask.style.top top px;// 根据top 和 left修改大图的位置background-position-xlargeImg.style.backgroundPositionX -left px;largeImg.style.backgroundPositionY -top px;} 鼠标移出 midImg.onmouseleave function (e) {// 让遮罩层和大图消失mask.style.opacity 0;largeImg.style.opacity 0;} 完整代码 最后在把js代码进行整理与二次封装完整代码如下 index.html !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css /head body!–最外层容器 –div classcontainer!– 左侧原图 –div classleft-img!– 遮罩层 –div classmask/div/div!– 右侧放大图片 –div classright-img/div!– 缩略图集合 –div classimg-list-wrapperul classimg-list/ul/div/divscript src./index.js/script /body /html index.css
• {margin: 0;padding: 0;list-style: none; }.container {width: 1000px;height: 600px;margin: 50px auto;font-size: 0; }.left-img {width: 490px;height: 510px;margin-right: 16px;border: 1px solid #eee;display: inline-block;/* 图片 /background-image: url(./images/imgA_2.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;/ 遮罩层相对我进行定位 /position: relative; } .mask {width: 230px;height: 230px;background-image: url(./images/bg.png);position: absolute;top: 0;left: 0;opacity: 0; } .right-img {width: 490px;height: 510px;border: 1px solid #eee;display: inline-block;background-image: url(./images/imgA_3.jpg);background-repeat: no-repeat;opacity: 0; }.img-list-wrapper {width: 490px;text-align: center;margin-top: 10px; } .img-list {display: inline-block; } .img-list li {display: inline-block;width: 60px;height: 60px;margin: 0 5px;cursor: pointer;background-image: url(./images/imgA_1.jpg);background-repeat: no-repeat;/ border: 2px solid #000; */border: 1px solid #eee; } index.js // 封装一个获取DOM元素的方法// 单一元素 function \((selector) {return document.querySelector(selector); }// 多个元素 function \)\((selector) {return document.querySelectorAll(selector); }// 初始化数据图片 let imgs {// 小图small: [imgA_1.jpg, imgB_1.jpg, imgC_1.jpg],// 中图middle: [imgA_2.jpg, imgB_2.jpg, imgC_2.jpg],// 大图large: [imgA_3.jpg, imgB_3.jpg, imgC_3.jpg] }// 获取一些将要使用的dom元素 let container \)(.container); let largeImg \((.right-img); let midImg \)(.left-img); let smallImg \((.img-list); let mask \)(.mask);// 两大类事件类型 点击 鼠标移入移出 // 1. 点击事件, 事件委托 smallImg.onclick function (e) {// 判断我点击的元素是li元素if (e.target.tagName LI) {// 让所有li元素取消borderlet lis $\((li);for (let i 0; i lis.length; i) {lis[i].style.border none;}// 让选中的li元素添加bordere.target.style.border 2px solid #000;// 点击缩略图后原图和大图也需要跟着变换// 点的是第几个元素, 获取元素索引// [1,2,3].indexOf(3) 2let index [].indexOf.call(lis, e.target);midImg.style.backgroundImage url(./images/ imgs.middle[index] );largeImg.style.backgroundImage url(./images/ imgs.large[index] );} }// 函数封装一键启动 // 函数本质若干步骤的集合 // 初始化页面函数 function initPage() {var str ;for (let i 0; i imgs.small.length; i) {str li stylebackground-image: url(./images/ imgs.small[i] );/li}smallImg.innerHTML str;// 2. 默认选中第一个缩略图\)(.img-list li).style.border 2px solid #000; }// 绑定事件 function bindEvent() {midImg.onmousemove function (e) {// 让遮罩层和大图展示mask.style.opacity 1;largeImg.style.opacity 1;// 根据鼠标位置计算遮罩层的位置let left e.clientX - midImg.offsetLeft - mask.offsetWidth / 2;// 同理let top e.clientY - midImg.offsetTop - mask.offsetHeight / 2;// 边界条件if (left 0) {left 0;}if (top 0) {top 0;}if (left midImg.offsetWidth - mask.offsetWidth) {left midImg.offsetWidth - mask.offsetWidth}if (top midImg.offsetHeight - mask.offsetHeight) {top midImg.offsetHeight - mask.offsetHeight}// 根据top和left调整mask的位置mask.style.left left px;mask.style.top top px;// 根据top 和 left修改大图的位置background-position-xlargeImg.style.backgroundPositionX -left px;largeImg.style.backgroundPositionY -top px;}// 2. 移出midImg.onmouseleave function (e) {// 让遮罩层和大图消失mask.style.opacity 0;largeImg.style.opacity 0;} }// 一键启动执行一个函数 function main() {initPage();bindEvent(); }main(); 写在最后  本专栏将持续更新原生JS案例提供一些工作中也能用上的一些小案例详细讲解分析提升JS开发水平与开发思路的积累如果文中出现有瑕疵的地方各位通过评论或者私信联系我我们一起进步有兴趣的伙伴可以订阅一下点击关注JS经典案例专栏