js 实现商品放大镜效果
知识点，需熟悉下面属性及含义：
offsetLeft //获取元素相对左侧的距离 （计算是从最左侧边框外开始）
offsetTop //获取元素相对顶部的距离 （计算是从最顶部边框外开始）
offsetWidth //获取元素宽度 （border + padding + margin）
offsetHeight //获取元素高度 （border +padding + margin）
clientLeft //测量的是元素左侧边框的宽度
clientHeight //测量的是元素的上边框的宽度
clientWidht //获取元素的宽度 不带边框（padding + margin）
clientHeight //获取元素的高度 不带边框 （padding + margin）
第一种： 商品类
正文：现在很多pc端商城网站详情页面都使用的有放大镜效果，那我们怎样使用一张图片实现放大镜效果呢？具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#smallImg{
width: 300px;
height: 300px;
position: relative;
}
#smallImg img{
width: 300px;
height: 300px;
}
#lay{
position: absolute;
left: 0;
top: 0;
border: 1px solid #666;
opacity: 0.6;
filter: alpha(opacity = 60);
background: #fff;
display: none;
cursor: move;
}
#bigImg{
width: 300px;
height: 300px;
position: absolute;
left: 320px;
overflow: hidden;
top: 0;
display: none;
}
#bigImg img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="smallImg">
<img src="img/1.jpg" alt="">
<div id="lay"></div>
</div>
<div id="bigImg">
<img src="img/1.jpg" alt="">
</div>
<script>
window.onload = function(){
var lay = getId("lay"),
smallImg = getId("smallImg"),
bigImg = getId("bigImg");
var imgB = bigImg.children[0]; //大图中的图片
var scale = 4; //缩放倍数 可调整
var w = smallImg.offsetWidth; //小图的宽高
var h = smallImg.offsetHeight;
lay.style.width = w / scale + "px";
lay.style.height = h / scale + "px"; imgB.style.width = w * scale + "px";
imgB.style.height = h * scale + "px";
smallImg.onmouseover = function(){
lay.style.display = "block";
bigImg.style.display = "block";
}
smallImg.onmouseout = function(){
lay.style.display = "none";
bigImg.style.display = "none";
}
smallImg.onmousemove = function(e){
e = e || window.event;
var x = e.clientX - lay.offsetWidth/2;
var y = e.clientY - lay.offsetHeight/2;
if(x <= 0){ //左侧边界判断
x = 0;
}
if(y <= 0){ //顶部边界判断
y = 0;
}
if(x >= smallImg.offsetWidth - lay.offsetWidth ){
x = smallImg.offsetWidth - lay.offsetWidth //右侧边界判断
}
if(y >= smallImg.offsetHeight - lay.offsetHeight ){
y = smallImg.offsetHeight - lay.offsetHeight //底部边界判断
}
lay.style.left = x + "px";
lay.style.top = y + "px";
imgB.style.left = -x*scale + "px"; //图片默认位置为0 0左上角位置 需要反向才能两者相对显示
imgB.style.top = -y*scale + "px";
}
}
function getId(id){
return document.getElementById(id);
}
</script>
</body>
</html>
好了商品外部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。
模拟效果图如下：
第二种： 商品内部实现放大效果
<!DOCTYPE html>
<html>
<head>
<title>测试放大镜</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#small_Box{
width: 300px;
height: 300px;
position: relative;
margin: 50px auto;
}
#small_Box img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="small_Box"><img src="1.jpg"></div>
<script type="text/javascript">
window.onload = function() {
var span = document.createElement("span");
var box = document.getElementById("small_Box");
var img = document.createElement("img");
var boxWidth = box.clientWidth;
var boxHeight = box.clientHeight;
var scale = 2;
span.style.position = "absolute";
span.style.width = boxWidth / scale+"px";
span.style.height = boxHeight / scale+"px";
span.style.display = 'none';
span.style.overflow = 'hidden';
span.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
span.style.cursor = 'pointer';
box.appendChild(span);
img.setAttribute("src", "1.jpg");
img.style.width = scale*boxWidth + "px";
img.style.height = scale*boxHeight + "px";
box.onmouseover = function(e){
span.style.display = "block";
}
box.onmousemove = function(e){
e = e || window.event;
var x = e.clientX - span.clientWidth / scale - this.offsetLeft;
var y = e.clientY - span.clientHeight / scale - this.offsetTop;
if (x <= 0){
x = 0
}
if (x >= box.clientWidth - span.clientWidth){
x = box.clientWidth - span.clientWidth
}
if (y <= 0){
y = 0
}
if (y >= box.clientHeight - span.clientHeight){
y = box.clientHeight - span.clientHeight
}
span.style.left = x + "px";
span.style.top = y + "px"; img.style.marginLeft = -1 * span.offsetLeft * scale - x + "px";
img.style.marginTop = -1 * span.offsetTop * scale - y + "px";
span.appendChild(img);
} box.onmouseout = function(e){
span.style.display = "none";
}
}
</script>
</body>
</html>
好了商品内部放大镜效果就这样完成了，而且还带有边界检测。希望可以给有需要的人提供到帮助。
模拟效果图如下：
js 实现商品放大镜效果的更多相关文章
- JS 文本输入框放大镜效果
JS 文本输入框放大镜效果 今天下午研究了下 "文本输入框放大镜效果" 当然KISSY官网也有这种组件 请看kissy demo 其实这种效果 对于很多童鞋来说 应该并不陌生!我今 ...
- 原生js实现的放大镜效果
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML><html&g ...
- 前端JS电商放大镜效果
前端JS电商放大镜效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- js代码实现放大镜效果
每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果.在没有去理解分析它的原理时,感觉非常的神奇,当真正地去接触,也是非常好理解.如下图展示所见: 很是常见,在此记载一下,毕 ...
- 淘宝商品放大镜效果-JavaScript
效果图 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- canvas+javascript实现淘宝商品放大镜效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- js---电商中常见的放大镜效果
js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...
随机推荐
- C# 多线程系列之Mutex使用
互斥量是一个内核对象,它用来确保一个线程独占一个资源的访问,并且互斥量可以用于不同进程中的线程互斥访问资源. 我们可以把Mutex看作一个出租车,乘客看作线程.乘客首先等车,然后上车,最后下车.当一个 ...
- nodejs时间工具类
/** * * @fmt 格式化字符串 * @Date 为需要格式化的日期 * * 示例:format(new Date(),'yyyy-MM-dd hh:mm:ss'); * 返回值为字符串 */ ...
- flask_restful的使用方法
一 安装: pip install flask_restrul 二 初始化并注册路由 # run.py from flask_restful import Api ... api = Api(app) ...
- Springboot事务使用与回滚
Springboot中事务的使用: 1.启动类加上@EnableTransactionManagement注解,开启事务支持(其实默认是开启的). 2.在使用事务的public(只有public支持事 ...
- pyhton基础中的要点一
1.python变量的命名规范: (1)变量必须以数字,字母,下划线的任意组合 (2)变量建议用驼峰标识,或下划线 (3)变量要有可描述性 (4)不能以数字开头 (5)不能用python的关键字 (6 ...
- Django 常用字段和参数
一.ORM字段 类型 说明 AutoField 一个自动增加的整数类型字段.通常你不需要自己编写它,Django会自动帮你添加字段:`id = models.AutoField(primary_key ...
- XPath路径表达式笔记（转载）
简单说,xpath就是选择XML文件中节点的方法. 所谓节点(node),就是XML文件的最小构成单位,一共分成7种. - element(元素节点)- attribute(属性节点)- text ( ...
- 基础架构之日志管理平台搭建及java&net使用
在现代化的软件开发流程中,日志显得非常的重要,不可能再零散的游离在各个项目中,等查看日志的时候再登录服务器去到特定的目录去查看,这显然很繁琐且效率低下,所有整合一套日志管理平台,也显得非常重要,这篇文 ...
- 如何对MySQL数据库中的数据进行实时同步
- memset用法详解
原文:http://www.cnblogs.com/PegasusWang/archive/2013/01/20/2868824.html 1.void *memset(void *s,int c,s ...