js实现商品添加(js实现购物网站放大镜功能)
类别:编程学习 浏览量:1763
时间:2021-10-16 00:36:33 js实现商品添加
js实现购物网站放大镜功能本文实例为大家分享了js实现购物网站放大镜功能的具体代码,供大家参考,具体内容如下
首先看效果图:
先是布局,左边一个小图框,包含一个鼠标移动框,右边一个放大框。
<li class="box"> <li class="small"> <img src="small3.jpg" alt="js实现商品添加(js实现购物网站放大镜功能)" border="0" />
写一下css
.small{ position: relative; float: left; width: 450px; height: 450px; border:1px solid #000; } .small .move{ position: absolute; top:0; width: 300px; height: 300px; background-color: rgba(0,0,0,0.4); cursor:move; display: none; } .big{ position: relative; float: left; width: 540px; height: 540px; margin-left: 20px; overflow: hidden; border:1px solid #000; display: none; } .big img{ position: absolute; top:0; left: 0; }
js部分:
var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0]; //首先把需要的元素都获取出来 small.onmouseover=function(){ move.style.display='block'; big.style.display="block"; }; small.onmouseout=function(){ move.style.display='none'; big.style.display="none"; }; small.onmousemove=function(e){ e=e||window.event;//兼容性考虑 var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2; var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2; if(x<0){ x=0; } if(x>smallImg.offsetWidth-move.offsetWidth){ x=smallImg.offsetWidth-move.offsetWidth; } if(y<0){ y=0; } if(y>smallImg.offsetHeight-move.offsetHeight){ y=smallImg.offsetHeight-move.offsetHeight; } move.style.left=x+"px"; move.style.top=y+"px"; //实现左边move块跟随鼠标移动的代码 var scale=bigImg.offsetWidth/smallImg.offsetWidth; //按照比例放大 bigImg.style.left='-'+x*scale+'px'; //因为图片是需要左移和上移的所以要加负号 bigImg.style.top='-'+y*scale+'px'; }
放大镜效果就实现啦!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js中字符串拼接
- js特效星空(ThingJS粒子特效一键实现雨雪效果)
- nodejs如何识别接口(Node实现搜索框进行模糊查询)
- js页面跳转的几种代码
- node.js express 上线(node+express实现分页效果)
- 动画用css3还是js(前端制作动画的几种方式css3,js)
- js编写简单网页计算器(js实现网页计算器)
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- js实现CSS格式化和压缩
- python class转json(Python对象转换为json的方法步骤)
- js怎么转拼音(js实现中文转拼音的完整步骤记录)
- js基础入门到高级教程(浅谈如何循序渐进的学好JS)
- extjs 日期控件
- js竖屏切换程序(js判断移动端横竖屏视口检测实现的几种方法)
- js中substring的用法、与substr的区别
- extjs中Toolbar工具栏
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
- 成都轨道交通19号线二期全线电通(成都轨道交通19号线二期全线电通)
- 19号线二期全线电通 轨道交通项目最新进展来了(19号线二期全线电通)
热门推荐
- 日常操作docker命令(Docker常用命令详解)
- angular封装公共组件(详解Angular组件之生命周期二)
- php经典算法大全(php菜单/评论数据递归分级算法的实现方法)
- djangorestfulframework教程(Django restframework 源码分析之认证详解)
- css3边框和边界图片(css3 box-shadow阴影外阴影与外发光图示讲解)
- jquery图片轮播代码
- mac版本php环境搭建(在Mac OS X中配置Apache+PHP+MySQL运行环境的详细步骤)
- canvas小程序海报(使用canvas生成含有微信头像的邀请海报没有微信头像问题)
- sqlserver常用函数(SQLServer 日期函数大全小结)
- mysql 查询json(MySQL处理JSON常见函数的使用)