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绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js中拼接字符串的几种方法
- pythonjson格式化原理(详解pythonstr与json类型转换)
- extjs table布局
- laravel-admin代码执行流程(解决laravel-admin 自己新建页面里 js 需要刷新一次的问题)
- ExtJs中getCmp、getDom、Get的区别
- Js操作cookie
- js中的this与with关键字
- js解除网页屏蔽(js检测标题与描述中的关键词发现就替换或跳转到别的页面)
- 微信浏览器中JS实现返回操作
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- angularjs数据绑定类指令及作用(详解Angular数据绑定及其实现方式)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
- js判断是否为手机访问
- nodejs的广播机制(node.js如何自定义实现一个EventEmitter)
- mysql 查询json(MySQL处理JSON常见函数的使用)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
- 小说 小伙穿越成刘备,用现代知识指挥作战,众谋士都看呆了(小伙穿越成刘备)
- 解析葡萄牙6-1瑞士 进攻多点开花,贡萨洛-拉莫斯一战成名(解析葡萄牙6-1瑞士)
- 这支 奇兵队 腕大 有范儿还各怀绝技,毒贩杀人犯见了都要仓皇而逃(这支奇兵队腕大)
- 雄藩崛起 奇兵队与幕末长州藩军事改革(雄藩崛起奇兵队与幕末长州藩军事改革)
- 九月初,爱如蜜糖,甜到心扉,迷恋彼此,一日不见兮,思之若狂(九月初爱如蜜糖)
热门推荐
- 织梦dedecms专题页制作详细教程(织梦Dedecms系统SEO优化之网站URL目录优化)
- JS实现金额大小写转换
- 深入理解mysql索引(MySQL中冗余和重复索引的区别说明)
- dedecms标签怎么用(浅析DedeCMS GBK版安装sphinx全文索引无法查询无结果的解决方法)
- php网页生成程序(php生成静态页面并实现预览功能)
- js array的所有方法(js 数组 find,some,filter,reduce区别详解)
- vue指令使用技巧(Vue指令工作原理实现方法)
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- mysql所有用户命令(MySQL用户管理与PostgreSQL用户管理的区别说明)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)