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中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...
随机推荐
- WPF画箭头
简介 参考Using WPF to Visualize a Graph with Circular Dependencies的基础上写了一个WPF画箭头的库. 效果图如下: 使用的XAML代码如下: ...
- Spring boot Mybatis 整合（注解版）
之前写过一篇关于springboot 与 mybatis整合的博文,使用了一段时间spring-data-jpa,发现那种方式真的是太爽了,mybatis的xml的映射配置总觉得有点麻烦.接口定义和映 ...
- 【转】js判断一个object对象是否为空
判断一个对象是否为空对象,本文给出三种判断方法: 1.最常见的思路,for...in... 遍历属性,为真则为“非空数组”:否则为“空数组” for (var i in obj) { // 如果不为空 ...
- css移动端:acitve效果的实现
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“ ...
- EMSAscript
1.javaScript 中const.var.let区别 const 定义的变量不可修改 而且必须初始化 =>解决闭包变量污染问题 var 定义的变量可以修改 如果不初始化则默认值为undef ...
- ArcGIS DataStore手册——常见问题篇
第三章:ArcGIS DataStore常见问题处理 1.DataStore使用的数据库是什么? 从安装后的内容和配置完DataStore中Server Manager中的信息来看,DataStore ...
- androidtab
https://github.com/H07000223/FlycoTabLayout tensorflow https://github.com/topics/tensorflow-examples ...
- Java—进程与线程
进程与线程 进程是程序(任务)的执行过程,具有动态性:持有资源(共享内存.共享文件)和线程,是资源和线程的载体. 线程是系统中最小的执行单元,同一进程中有多个线程,线程共享进程的资源. 线程的交互,交 ...
- Java程序中解决数据库超时与死锁
Java程序中解决数据库超时与死锁 2011-06-07 11:09 佚名 帮考网 字号:T | T Java程序中解决数据库超时与死锁,每个使用关系型数据库的程序都可能遇到数据死锁或不可用的情况 ...
- 使用GDI技术创建ASP.NET验证码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...