JS实现购物商城商品放大
img属于行内元素
<img src=''>gq</img>
效果
当放大图片时候,文字位置发生改变
文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候,用于专门写英语单词作业本上的线条最下方
解决这个问题只需要设置:display:block;就能把那空出来的位置给消除掉
也可以在图片里设置font-size:0;把文字大小为0,g线的位置就可以底线(图片)位置就可以对齐了
winodw:浏览器对象,操作浏览器相关属性和相关方法就用到window
document:就是一个API
<!DOCTYPE html>
<html>
<head>
<title>图片放大</title>
<meta charset="utf-8"> <style>
body{
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
list-style:none;
}
#container{
position:relative;
width:400px;
height:480px;
border:1px #888 solid;
margin:50px auto;
}
#container .pig{
margin-bottom:15px;
}
#container .pig .caver{
position:absolute;
display:none;
top:0;
width:100px;
height:100px;
background-color:rgba(255,255,255,.2);
}
#container .pig img{
display:block;
width:400px;
height:400px;
}
#container .list{
display:flex;
}
#container .list li{
margin:auto;
}
#container .list img{
display: block;
width:50px;
height:50px;
}
#container .detell{
position:absolute;
display:none;
top:0;
left:400px;
width:400px;
height:400px;
/*border:1px solid #888;*/
background-image:url(images/mn1.jpg);
background-size:400%;
}
#container .list .current{
border:2px solid red;
}
</style>
</head>
<body>
<div id='container'>
<div class='pig'>
<img src="data:images/mn1.jpg">
<div class='caver'></div>
</div>
<ul class='list'>
<li>
<img class='current' src="data:images/mn1.jpg">
</li>
<li>
<img src="data:images/mn.jpg">
</li>
<li>
<img src="data:images/mn2.jpg">
</li>
<li>
<img src="data:images/mn3.jpg">
</li>
<li>
<img src="data:images/1.jpg">
</li>
<li>
<img src="data:images/2.jpg">
</li>
</ul>
<div class='detell'></div>
</div> <script>
var list = document.querySelector('.list'),
imgs = list.querySelectorAll('img'),
pig = document.querySelector('#container .pig'),
caver = pig.querySelector('.caver'),
detell = document.querySelector('#container .detell'),
img = document.querySelector('.pig img');
list.addEventListener('mousemove',function(e){
if(e.target.tagName == 'IMG'){
img.src = e.target.src;
detell.style.backgroundImage = 'url('+e.target.src+')' ;
imgs.forEach(function(item){
item.className = '';
})
e.target.className = 'current';
}
}) pig.addEventListener('mousemove',function(e){
var x = e.clientX,/*基于pig盒子左边线到浏览器的距离(鼠标在pig盒子X坐标 = 鼠标到pig盒子左边线距离 + pig盒子左边线到浏览器的距离)*/
y = e.clientY,/*基于pig盒子上边线到浏览器的距离(鼠标在pig盒子y坐标 = 鼠标到pig盒子上边线距离 + pig盒子上边线到浏览器的距离)*/
xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离
yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离
cx = x - xp - 50,
cy = y - yp - 50;
console.log(x,y); if(cx < 0 ){
cx = 0;
}
if(cy < 0){
cy = 0;
}
if(cx > 300){
cx = 300;
}
if(cy > 300){
cy = 300;
}
detell.style.backgroundPosition = cx/300*100+'%'+cy/300*100+'%';
caver.style.left = cx + 'px';//caver盒子 = X轴-pig盒子左边距
caver.style.top = cy + 'px';//caver盒子 = y轴-pig盒子上边距 detell.style.display = 'block';
caver.style.display = 'block';
})
pig.addEventListener('mouseout',function(e){
var x = e.clientX,
y = e.clientY,
xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离
yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离
rp = pig.getBoundingClientRect().right,
tp = pig.getBoundingClientRect().bottom;
if(x < xp || y < yp){//基于pig盒子左上角坐标进行判断
detell.style.display = 'none';
caver.style.display = 'none';
}else if(x > rp || y >tp){//基于盒子右下角坐标进行判断
detell.style.display = 'none';
caver.style.display = 'none';
}
})
/*
getBoundingClientRect()
e.clientX和e.clientY是基于浏览器边界的距离
*/ </script>
</body>
</html>
首先说明为什么要用target属性
在鼠标移入事件监听中传了一个参数e,然后console.log(e),在pig盒子里移动鼠标
会得到MouseEvent属性,点击下拉标,会看到很多属性,其中就有一个target
然后console.log(e.target)
得到HTML DOM树形节点 <ul>结构
最后e.target.tagName会到一个大写的<img>标签
getBoundingClientRect()这里简单介绍一下
指定盒子.getBoundingClientRect().left --->左边距到浏览器的距离
具体可以到该网站查看:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
cx = x - xp - 50,
cy = y - yp - 50;
cx和cy是鼠标在caver盒子X轴和Y轴位置,
为什么要减50,因为caver盒子宽和高都是100px,为了让鼠标处于caver盒子中间所以各减50
background-size:400%;这个是pig盒子/caver盒子得到的倍率,pig盒子的图片是100%,detell盒子是放大pig盒子图片的结果
detell.style.backgroundPosition = cx/400*100+'%'+cy/400*100+'%';
动态操作为detell盒子设置background-position属性,400是算出来倍率,乘100是caver到pig盒子右边距离为100%,到下边距离100%(这里说明有点牵强)
x < xp || y < yp表示pig盒子左边距到浏览器的距离和pig盒子上边距到浏览器的距离(x,y)
x > rp || y >tp表示pig盒子右边距到浏览器的距离和pig盒子下边距到浏览器的距离(x,y)
浏览器坐标是--->上和左是负值, 下和右是正值
JS实现购物商城商品放大的更多相关文章
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- 使用 vue 仿写的一个购物商城
在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...
- 微信小程序购物商城系统开发系列-目录结构
上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...
- Python开发程序：ATM+购物商城
一.程序要求 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还 ...
- ThinkPHP 购物商城网站（数据库中增删改查的功能实现）——————重点——————
控制器 ---------------------GoodsController.class.php------------------------------------------------- ...
- python_day2_homework_1（简单购物商城）
'''简单购物商城(要求):1,商品展示,价格2,买,加入购物车3,付款,钱不够''' 1 #_*_ coding: utf-8 _*_ __author__ = 'A-rno' meu_list_1 ...
- python_项目_ATM和购物商城的程序
1 需求 模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 ...
- 模拟实现ATM+购物商城程序
流程图: 需求: ATM:模拟实现一个ATM + 购物商城程序额度 15000或自定义实现购物商城,买东西加入 购物车,调用信用卡接口结账可以提现,手续费5%支持多账户登录支持账户间转账记录每月日常消 ...
- Scrapy实战篇（八）之Scrapy对接selenium爬取京东商城商品数据
本篇目标:我们以爬取京东商城商品数据为例,展示Scrapy框架对接selenium爬取京东商城商品数据. 背景: 京东商城页面为js动态加载页面,直接使用request请求,无法得到我们想要的商品数据 ...
随机推荐
- linux中常见的命令
linux 中的命令非常多,但是玩过linux的人也从来不会因为Linux的命令如此之多而烦恼,我们只需要掌握其中常见的命令即可,可以在使用时去找man,会帮助你解决不少问题.下面就列出一些常见的li ...
- html的基础属性
1.name属性: name用于指定标签元素的名称.<a>标签内必须提供href或name属性. 例子: <a name="value"> 2.id属性: ...
- （2018 Multi-University Training Contest 3）Problem L. Visual Cube
//题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6330//题目大意:按照一定格式画出一个 a×b×c 的长方体. #include <b ...
- pycharm中连接数据库常见问题
pymysql.err.InterfaceError: (0, '')解决办法 导致这个错误的原因是通过pymysql连接MySQL,没有关闭连接的操作,所以短时间内不会出问题,长时间保持这个连接 ...
- [工控安全]西门子S7-400 PLC固件逆向分析(一)
不算前言的前言:拖了这么久,才发现这个专题没有想象中的简单,学习的路径大致是Step7->S7comm->MC7 code->firmware,我会用尽量简短的语言把前两部分讲清楚, ...
- python模块和包（模块、包、发布模块）
模块和包 目标 模块 包 发布模块 01. 模块 1.1 模块的概念 模块是 Python 程序架构的一个核心概念 每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块 模块名 同样也 ...
- RedLock.Net - 基于Redis分布式锁的开源实现
工作中,经常会遇到分布式环境中资源访问冲突问题,比如商城的库存数量处理,或者某个事件的原子性操作,都需要确保某个时间段内只有一个线程在访问或处理资源. 因此现在网上也有很多的分布式锁的解决方案,有数据 ...
- CSS&JS小结
回顾:html: 作用:展示 文件标签: <html> <head> <title></title> </head> <body> ...
- DAY6：文件读取
文件读取: f = open("文件名","r",encoding="utf-8").read()#文件读取 print(f) 写入文件 ...
- NHibernate4使用Oracle.ManagedDataAccess.dll连接oracle及配置多个数据库连接
NHibernate数据库配置参数在hibernate.cfg.xml中 <?xml version="1.0" encoding="utf-8"?> ...