淘宝商品放大镜效果-JavaScript
效果图
HTML代码
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
} #box {
width: 860px;
height: 430px;
border: 1px solid;
display: flex;
margin: 100px auto;
} #box>div {
width: 430px;
height: 430px;
outline: 1px solid;
} #box>div:first-child {
background-image: url("image/imgA_2.jpg");
position: relative;
} #box>div:first-child>div {
width: 231px;
height: 231px;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
display: none;
} #box>div:first-child:hover div {
display: block;
} #box>div:last-child {
background-image: url("image/imgA_3.jpg"); } #box1 {
margin: auto;
width: 800px;
height: 60px;
}
</style>
</head> <body>
<div id="box">
<div id="left">
<div id="shadow"></div>
</div>
<div id="right"></div>
</div>
<div id="box1">
<img src="data:image/imgA_1.jpg" alt="">
<img src="data:image/imgB_1.jpg" alt="">
<img src="data:image/imgC_1.jpg" alt="">
</div> </body> </html>
JavaScript 代码示例
<script>
let index = 0;
let arr = ["image/imgA_2.jpg", "image/imgB_2.jpg", "image/imgC_2.jpg"];
let arr1 = ["image/imgA_3.jpg", "image/imgB_3.jpg", "image/imgC_3.jpg"];
let img = document.querySelectorAll("img");
let left = document.querySelector("#left");
let right = document.querySelector("#right");
let shadow = document.querySelector("#shadow"); for (let i = 0; i < img.length; i++) {
img[i].onmouseover = function () {
index = i;
left.style.background = `url("${arr[index]}")`;
right.style.background = `url("${arr1[index]}")`;
}
}
left.onmousemove = function (event) {
let e = event || window.event;
let pagex = e.pageX;//鼠标的位置
let pagey = e.pageY;
let shadowZiseX = shadow.offsetWidth;//遮罩div大小
let shadowZiseY = shadow.offsetHeight;
let shubiaoX = pagex - box.offsetLeft-shadowZiseX/2 ;//最后遮罩div的移动位置
let shubiaoY = pagey - box.offsetTop-shadowZiseY/2 ;
if (shubiaoX <=0) {//如果遮罩div的移动位置大于了X坐标的最小值,那就等于X坐标最小值
shubiaoX =0;
}
let maxRightX = left.offsetWidth - shadowZiseX;//left盒子空白位置等于:自身宽度-去小盒子宽度;
if (shubiaoX >= maxRightX) {//如果大于了空白盒子X的最大值那就等于最大值
shubiaoX = maxRightX
}
if (shubiaoY <=0) {//如果遮罩div的移动位置大于了Y坐标的最小值,那就等于Y坐标最小值
shubiaoY=0;
}
let maxRightY = left.offsetHeight-shadowZiseY;
if (shubiaoY >= maxRightY) {//如果大于了空白盒子Y的最大值那就等于最大值
shubiaoY = maxRightY
}
shadow.style.left = shubiaoX+ "px";//这里是分别给小盒子赋值X,Y坐标的值
shadow.style.top = shubiaoY+ "px"; right.style["backgroundPosition"]=`-${shadow.offsetLeft/left.offsetWidth*800}px -${shadow.offsetTop/left.offsetHeight*800}px`;
//右边的背景图片的移动位置=阴影盒子/left盒子的宽高*自身背景图的大小;
console.log("woshi"+shadow.offsetTop);
}
</script>
淘宝商品放大镜效果-JavaScript的更多相关文章
- canvas+javascript实现淘宝商品放大镜效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript仿淘宝实现放大镜效果的实例
我们都知道放大镜效果一般都是用于一些商城中的,列如每当我们打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大镜的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是 ...
- Vue实现仿淘宝商品详情属性选择的功能
Vue实现仿淘宝商品详情属性选择的功能 先看下效果图:(同个属性内部单选,属性与属性之间可以多选) 主要实现过程: 所使用到的数据类型是(一个大数组里面嵌套了另一个数组)具体格式如下: attrA ...
- YY一下淘宝商品模型
淘宝的电商产品种类非常丰富,必然得力于其商品模型的高度通用性和扩展性. 下面我将亲自操作淘宝商品的发布过程,结合网上其他博客对淘宝网商品库的分析,简单谈谈我的理解. 注:下面不特殊说明,各个表除主键外 ...
- 用PHP抓取淘宝商品的用户晒单评论+图片实例
为什么想起来做这个功能?是因为前段时间在做一个淘客网站的时候,想到是否能抓取到淘宝商品的买家秀呢?经过一番折腾发现,淘宝商品用户评价信息是通过Ajax来调取的,通过嗅探网址发现,评论数据的请求接口是: ...
- 利用Python爬虫爬取淘宝商品做数据挖掘分析实战篇,超详细教程
项目内容 本案例选择>> 商品类目:沙发: 数量:共100页 4400个商品: 筛选条件:天猫.销量从高到低.价格500元以上. 项目目的 1. 对商品标题进行文本分析 词云可视化 2. ...
- python爬虫学习(三):使用re库爬取"淘宝商品",并把结果写进txt文件
第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...
- YY淘宝商品数据库设计
http://www.cnblogs.com/mmmjiang13/archive/2010/11/04/1868609.html 前言 这几个月都在做一个通过淘宝API线下管理淘宝店的系统,学习了很 ...
- 仿淘宝商品详情页上拉弹出新ViewController
新项目就要开始做了,里面有购物那块,就试着先把淘宝商品详情页的效果做了一下. 1.需求 1.第一次上拉时,A视图拉到一定距离将视图B从底部弹出,A视图也向上 2.显示B视图时下拉时,有刷新效果,之后将 ...
随机推荐
- vue知识day1
HTML语义.CSS:样式 js:行为 jQuery:简化了js操作 boostrap :框架 ,以类方式展现 react:facebook 公司的产品 angular:谷歌公司产品 vue:作者尤雨 ...
- 毕向东_Java基础视频教程第19天_IO流(20~22)
第19天-20-IO流(改变标准输入输出设备) static void setIn(InputStream in) Reassigns the "standard" input s ...
- Docker-容器数据卷
docker容器数据卷相当于外置的移动硬盘 docker容器数据卷主要功能是:容器的持久化.容器间继承+共享数据 特点: (1)数据卷可以容器之间共享或重用数据 (2)卷中更改可以直接生效 (3)数据 ...
- HTML5新增的标签和属性归纳
收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...
- 最近选购MP3而有感便携追求音质的一些心得
之前的创新小石头MP3的耳机接口松动了.考虑到它已经服役了4年了.所以我准备重新买一个.而小石头出色的外放,我决定让给宝宝当玩具. 选购心得MP3的时候,原来的主导思想,是在低价位的里面考虑一台国际品 ...
- Python学习---Model拾遗[2]180318
Model的字段及字段参数: Model字段: 数字 字符串(带正则的字段) 时间 文件 特殊字段:(一对一,一对多,多对多) Models.py ...
- 沉淀,再出发:PHP的简单使用
沉淀,再出发:PHP的简单使用 一.前言 关于PHP,笔者在本科的时候就听到了太多太多,可惜虽然看了很多的教材,听到了无数遍,也没有系统性的整理过和学习过这方面的知识,这点无论什么时候想起来都是一种遗 ...
- contextlib
contextlib with 语句 上下文 任何对象,只要正确实现了上下文管理,就可以用于with语句. 实现上下文管理是通过__enter__和__exit__这两个方法实现的. 例如,下面的 ...
- [COGS 0065][NOIP 2002] 字串变换
65. [NOIP2002] 字串变换 ★★ 输入文件:string.in 输出文件:string.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 已知有两个字 ...
- Kali Nethunter初体验
1.官网环境要求:n5 n7 n10 android 4.4 2.实验设备: N7 android 4.4.4 N7 android 4.4.3 N5 nadroid 4.4.2 3.开发者模式+us ...