js实现淘宝浏览商品放大镜功能


Posted in Javascript onOctober 28, 2020

本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下

1、准备两张图片,其中一张图片分辨率为另一张图片的二倍。

2、前端页面布局

js实现淘宝浏览商品放大镜功能

//box1位左侧原图,box2为右侧放大图额显示框,son为iv class="box1">
 <div class="son"></div>
 <div class="ceng"></div>
</div>
<div class="box2"></div>

3、js写逻辑

let box1=document.querySelector(".box1");
 let box2=document.querySelector(".box2");
 let son=document.querySelector(".son");
 let ceng=document.querySelector(".ceng");
 //鼠标移入:son,box2出现
 ceng.onmouseenter=function(){
  son.style.display="block"
  box2.style.display="block"
 }
 //鼠标移出:son,box2消失
 ceng.onmouseleave=function(){
  son.style.display="none"
  box2.style.display="none"
 }
 //鼠标移动:son的位置随鼠标移动,box2背景图的位置变化
 ceng.onmousemove=function(e){
  let sw=e.clientX-son.offsetWidth/2
  let sh=e.clientY-son.offsetHeight/2  
  if(sw>ceng.offsetWidth-son.offsetWidth){
   sw=ceng.offsetWidth-son.offsetWidth
  }
  else if(sw<=0){
   sw=0;
  }
  if(sh>ceng.offsetHeight-son.offsetHeight){
   sh=ceng.offsetHeight-son.offHeight
  }
  else if(sh<=0){
   sh=0;
  }
  son.style.left=sw+"px"
  son.style.top=sh+"px"
  box2.style.backgroundPosition=`${-2*sw}px ${-2*sh}px`
 }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>放大镜</title>
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 .box1{
  width: 500px;
  height:333px;
  /* border:1px solid red; */
  background: url('shatan.jpg') no-repeat;
  position: relative;
  float: left;
  box-sizing: border-box
 }
 .son{
  width: 100px;
  height: 100px;
  background-color: #fff;
  position: fixed;
  left:0;
  top:0;
  opacity: 0.7;
  display: none;
 }
 .ceng{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
 }
 .box2{
  width: 200px;
  height:200px;
  border:1px solid red;
  background: url('shatan1.jpg') no-repeat;
  float: left;
  display: none;
 }
</style>
<body>
 <div class="box1">
  <div class="son"></div>
  <div class="ceng"></div>
 </div>
 <div class="box2"></div>
</body>
</html>
<script>
 let box1=document.querySelector(".box1");
 let box2=document.querySelector(".box2");
 let son=document.querySelector(".son");
 let ceng=document.querySelector(".ceng");
 ceng.onmouseenter=function(){
  son.style.display="block"
  box2.style.display="block"
 }
 ceng.onmouseleave=function(){
  son.style.display="none"
  box2.style.display="none"
 }
 ceng.onmousemove=function(e){
  let sw=e.clientX-son.offsetWidth/2
  let sh=e.clientY-son.offsetHeight/2  
  if(sw>ceng.offsetWidth-son.offsetWidth){
   sw=ceng.offsetWidth-son.offsetWidth
  }
  else if(sw<=0){
   sw=0;
  }
  if(sh>ceng.offsetHeight-son.offsetHeight){
   sh=ceng.offsetHeight-son.offHeight
  }
  else if(sh<=0){
   sh=0;
  }
  son.style.left=sw+"px"
  son.style.top=sh+"px"
  box2.style.backgroundPosition=`${-2*sw}px ${-2*sh}px`
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
js单词形式的运算符
May 06 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
js实现详情页放大镜效果
Oct 28 #Javascript
用js实现放大镜效果
Oct 28 #Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 #Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 #Javascript
原生JS生成指定位数的验证码
Oct 28 #Javascript
微信小程序接入vant Weapp组件的详细步骤
Oct 28 #Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 #Javascript
You might like
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
学习python的几条建议分享
2013/02/10 Python
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
销售主管岗位职责
2014/02/08 职场文书
国际会计专业求职信
2014/08/04 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书