【demo】虫眼镜的制作 制作 完了 finish
2024-04-30 16:45:57
参考资料
margin auto
overflow:hidden
20200422 着手日 ~
20200423 进度率 也就百分之十
20200428 完了
元素结构
<div id="mainDiv"><!-- 列表上面显示的那个中型号得到大图 --><div class="middle"><span class="floatSpan"></span><img src="data:images/m1.jpg" id="imgNode"/></div><!-- 放大镜放大时候的那个div --><div class="big"></div><!-- 左箭头 --><span id="left"></span><!-- 右箭头 --><span id="right"></span><!-- 下面红框的那个列表LIST --><!-- List 中的是最小号的衣服图片 --><!-- 带active的是当前选中的，是有红框的 --><div id="list"><ul><li class="active"><img src="data:images/s1.jpg" /></li><li><img src="data:images/s2.jpg" /></li><li><img src="data:images/s3.jpg" /></li><li><img src="data:images/s4.jpg" /></li><li><img src="data:images/s5.jpg" /></li><li><img src="data:images/s6.jpg" /></li><li><img src="data:images/s7.jpg" /></li><li><img src="data:images/s8.jpg" /></li><li><img src="data:images/s9.jpg" /></li><li><img src="data:images/s10.jpg" /></li></ul></div></div>元素样式
<style type="text/css">/* 初始化全部元素 */*{margin: 0;padding: 0;}/* 最外层的div *//* 相对定位，且左右居中 *//* height，background-color这两是为了看一眼确实左右居中，调试用的 */#mainDiv{width:312px;/* height: 10px; */margin: 50px auto;position: relative;/* background-color: chocolate; */}/* 展示 列表里面被选召的孩子 那个大框 *//* 绝对定位 贴在父级的div上 *//* overflow:hidden 溢出来 溢出框的部分 选择 */.middle{width: 310px;height: 310px;border: 1px solid #cdcdcd;left: 0;top: 0;position: absolute;overflow:hidden;}/* 大框里面的图片属性 */#imgNode{width: 310px;height: 310px;}/* 虫眼镜 那个能移动的的小框 *//* TODO 为什么是span呢 */.floatSpan{width: 100px;height: 100px;position: absolute;background:#fede4f; border:1px solid #aaa;/* 好像没用 *//* filter:alpha(opacity:50); *//* 透明度 */opacity:0.5;/* 浮在上层 */z-index:2;/* 鼠标编程十字移动型的 */cursor:move;display:none;}/* 外面那个虫眼镜放大div得到属性 *//* 绝对定位是相当于父类div(#mainDiv)的相对定位 */.big{width: 310px;height: 310px;border: 1px solid #cdcdcd;overflow: hidden;position:absolute;left: 320px;top: 0;display: none;}.big img{position:absolute;left: 0px;top: 0px;}/* 下面list开发部 */#list{width: 288px;height: 46px;overflow: hidden;position:absolute;left: 10px;top: 320px;}#list ul{position: absolute;left: opx;}#list li{list-style: none;/* 浮动以后 小图片可以横过来了 */float: left;padding: 4px;overflow: hidden;width: 40px;height: 40px;}#list li img{border: 1px solid #cdcdcd;}#list li.active img{border: 1px solid red;}/* 左按钮 */#left{width: 10px;height: 45px;/* 变块级元素了 */display: block;background: url(images/left.gif) no-repeat;position:absolute;top: 322px;left: 0px;cursor: pointer;}/* 右按钮 */#right{width: 10px;height: 45px;/* 变块级元素了 */display: block;background: url(images/right.gif) no-repeat;position:absolute;top: 322px;left: 300px;cursor: pointer;}</style>1、list里面的小图片、选中哪个圈上框
<script type="text/javascript">// 1、list里面的小图片、选中哪个圈上框// 选中最大的listlet imgSmallList = document.getElementById("list");// 根据list选中第一个孩子ul (imgSmallList.children)// 根据imgSmallList.children 选中ul 下面的 li// 不知道怎么选 就 打印出来 扒拉扒拉 找找 哪个是自己需要的元素let imgSmalls = imgSmallList.children[0].children;// console.log(imgSmallList);// console.log(imgSmalls[0].children);// 给middle那个div里的imglet imgNode = document.getElementById("imgNode");// 给每一个li都帮点选中的点击事件// 不是点击事件，是鼠标移过去事件for(let i = 0;i<imgSmalls.length;i++){// 箭头函数的话 ， 里面那个this是 window 对象啊// imgSmalls[i].onmouseover = ()=>{// console.log(this);// };// 而普通的这种 function 的函数里面的this 是该绑定的对象自己本身imgSmalls[i].onmouseover = function(){// console.log(this);// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 设置该 activethis.className = "active";// 2、给middle那个地方的 换上相对应的 大图// console.log(this.children[0].src);// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = this.children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = this.children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + this.children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;// 3、给big那个地方的 换上相对应的图let strNewB = strTemp + 'b' + this.children[0].src.substr(lastIndex+1);// console.log(strNew);big.children[0].src = strNewB;};}// 左键点击let leftBtn = document.getElementById("left");leftBtn.onclick = function(){// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 整个list向左方向移动五个for(let j=0;j<imgSmalls.length;j++){// imgSmalls[j].className = "";let src = imgSmalls[j].children[0].src;let lastIndex = src.lastIndexOf("s");let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");let indexNew = parseInt(index) + 6;if(indexNew > 10){indexNew -= 10;}imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";if(j== 0){imgSmalls[j].className = "active";// 2、给middle那个地方的 换上相对应的 大图// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;}}}// 右键点击let rightBtn = document.getElementById("right");rightBtn.onclick = ()=>{// 清除 掉 所有的 activefor(let j=0;j<imgSmalls.length;j++){imgSmalls[j].className = "";}// 整个list向左方向移动五个for(let j=0;j<imgSmalls.length;j++){// imgSmalls[j].className = "";let src = imgSmalls[j].children[0].src;let lastIndex = src.lastIndexOf("s");let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");let indexNew = parseInt(index) - 6;if(indexNew < 1){indexNew += 10;}imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";if(j== 0){imgSmalls[j].className = "active";// 2、给middle那个地方的 换上相对应的 大图// imgNode.src = this.children[0].src.replace("s","m");let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");// this.children[0].src.lastIndexOf("s")let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);// console.log(strNew);imgNode.src = strNew;}}}// 放大镜效果（虫眼镜效果）// 鼠标移入到middle画面的时候，middleId.onmouseover = ()=>{// 内部小黄框表示floatSpanId.style.display = "block";// 右侧div表示big.style.display = "block";// 添加一个图片元素}middleId.onmouseout = ()=>{// 内部小黄框非表示floatSpanId.style.display = "none";// 右侧div非表示big.style.display = "none";}// middleId.onmousemove = function(e){ev = e || event;// console.log("middleId.onmousemove===" + ev.clientX);// floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // 实时的小黄框的坐标位置let moveX = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2);let moveY = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2);// 小黄框的最大边界// middleId.offsetLeft，middleId.offsetTop 都是0// 因为 middleId 是绝对定位，且left，top为0~~！！？？// 所以是一样的let moveXMax = (middleId.offsetLeft + middleId.offsetWidth) - floatSpanId.offsetWidth;let moveYMax = (middleId.offsetTop + middleId.offsetHeight) - floatSpanId.offsetHeight;// let moveXMax = middleId.offsetWidth - floatSpanId.offsetWidth;// let moveYMax = middleId.offsetHeight - floatSpanId.offsetHeight;// 三目运算// 小黄框可不出middleId边框 - STARTmoveX = moveX < 0 ? 0 : moveX;moveX = moveX > moveXMax ? moveXMax : moveX;moveY = moveY < 0 ? 0 : moveY;moveY = moveY > moveYMax ? moveYMax : moveY;// 小黄框可不出middleId边框 - ENDfloatSpanId.style.left = moveX + "px"; floatSpanId.style.top = moveY + "px"; // 计算big div 的坐标var maxImageHeight = big.children[0].offsetHeight - (big.offsetHeight-2)var maxImageWidth = big.children[0].offsetWidth - (big.offsetWidth-2)big.children[0].style.left = -(floatSpanId.offsetLeft/moveXMax)*maxImageWidth+'px';big.children[0].style.top = -(floatSpanId.offsetTop/moveYMax)*maxImageHeight+'px';}// 【晓踩一坑】小黄框的移动事件// 这个有个什么问题呢// 就感觉 只有鼠标在小黄框里面的时候// 才是动的// 但是在大框里面时候，拖拽小黄框的时候// 却动不起来// 不知道是不是因为触发了 小黄框的onmousedown 这个事件而受到了影响// floatSpanId.onmousemove = function(e){// ev = e || event;// // console.log("middleId.onmousemove===" + ev.clientX);// floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // }// 【晓踩二坑】小黄框的拽下事件// // 里面的黄色的小框的拖拽// 这个事件的绑定是不可以的// 因为 ev.clientX , ev.clientY 是不正确的// 他两是你开始拖拽那个时间点的坐标点// 就是那个时间点的 坐标// 后来你再怎么拖拽移动的，这两都不会发生改变// 所以 不正// floatSpanId.onmousedown = function(e){// ev = e || event;// console.log("floatSpanId.onmousedown===" + ev.clientX);// // floatSpanId.style.left = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; // // // console.log(ev.clientX);// // floatSpanId.style.top = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; // }floatSpanId.onmouseup = function(e){}// middleId.onmousemove = function(e){// ev = e || event;// floatSpanId.style.left = ev.clientX + "px"; // // console.log(ev.clientX);// floatSpanId.style.top = ev.clientY + "px"; // }</script>【demo】虫眼镜的制作 制作 完了 finish相关推荐
- PhotoShop简单案例（2）——利用时间轴功能制作制作省略号GIF动画
目录 一.项目介绍 二.基本流程 2.1 新建画布 2.2 输入文字 2.3 增删省略号 2.4 创建视频时间轴 三.效果演示 一.项目介绍 本文将介绍利用时间轴功能制作制作省略号GIF动画,制作完成 ...
- 烟雨黑帽SEO程序演示：AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板
烟雨黑帽SEO程序演示:AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板 烟雨黑帽SEO程序演示:AI智能模板制作神器,用于一键制作黑帽程序模板.零基础小白神器, ...
- Turbo Demo在软件教学课件制作中的应用
随着高校教学信息化的逐步深入,对于各种教学手段.教学内容设计.多媒体技术应用等方面问题的研究 探索也逐步加深.从过去的几十年中,信息的呈现手段发生了巨大的变迁,从"语言文字"为中心 ...
- 让人跌破眼镜的人造鸡蛋制作过程
2019独角兽企业重金招聘Python工程师标准>>> [案例回放一] 邯郸一位老师托自己的学生从农村老家的集上为自己捎回了十几斤"散养笨鸡蛋".然而,这位老师发 ...
- 发布乐维Webgis平台1.0 Demo，欢迎加入参与制作前端
文件: /Files/lwis_webgis/LwisWebgis1.0Demo.rar /Files/lwis_webgis/map_update.rar 配置请参看第1个压缩包的"配置说 ...
- linux7.3系统u盘制作,制作centos7U盘启动盘
收拾东西发现了7 8年之前用过的一款渣渣windows笔记本,使用windows系统的话发现已经卡到怀疑人生,因此本文记录使用mac制作linux U盘启动盘,然后安装centos7的全部过程. Wi ...
- linux内核镜像sd卡,【原创】Linux QT镜像的制作--制作SD卡启动盘
最近买了个新的开发板,原生的是Android操作系统,需要自己少个启动盘,制作Linux+QT操作系统. 新的开发板带这个制作的源文件,要先把这个文件拷贝到虚拟机Ubunbtu的共享目录下. 打开sh ...
- docker 安装linux镜像制作,制作ubuntu完整版docker镜像
最近需要制作ubuntu14.04 server版完整docker镜像,并启动container(容器)用来编译kernel等. 以下是步骤: 一:获取ubuntu14.04 server版的完整根 ...
- 计算机简历封面制作教程,计算机应用 个人简历封面制作 制作个人简历封面教案.doc...
环境评价与咨询服务专业教学资源库 电子教材 ·PAGE 157· <计算机应用>电子教材 制作个人简历封面 课程导入 在众多的求职者中,想让自己的简历吸人眼球,首先必须要一个漂亮的封面,李 ...
- 利用python制作制作直播视频录制、下载、播放
一.使用工具 python VLC #媒体播放工具 FFMPEG #媒体编辑工具 designer #界面UI制作工具 二.python库 import os import vlc from 脚本 i ...
最新文章
- mysql表打包到程序中_关于数据库程序的打包
- [转]python的requests发送/上传多个文件
- linux线程同步之互斥锁——linux的关键区域
- java中的内部类总结
- mysql报错5_mysql5.5 启动报错：ERROR!_MySQL
- r语言调用python_小众做法，通过python调用R语言的第三方包
- 用好这两大office模板资源网，办公轻松又高效
- 数据仓库的分层，你知道吗？
- Softing物联网（IoT）方案之OT/IT数据集成
- jetty 去掉项目名称访问
- Vmware+Ubuntu18.04配置桥接模式，并解决虚机中网络慢的问题
- python 读取行数据_openpyxl读取所有行数据之rows属性
- Rikka with Travels 动态维护树直径
- 2020 03 13 小米实习生一面
- H. 知识图谱 知识问答
- ublox center获取RTK卫星数据
- SHA1 算法加密技术核心思想
- 漫画：什么是旅行商问题？
- 各linux桌面性能比较,七大顶级桌面比较！Linux平台自由选择
- Linux服务器Anaconda安装Pytorch（注意，前方有大坑）