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中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...
随机推荐
- Fastreport史无前例5折，仅十天快抢！
慧都十年第一弹,与全球顶级报表控件厂商Fastreport携手同欢:仅仅十天,仅仅提供给慧都控件网,Fastreport旗下全部产品,全部5折!立即订购>> 慧都作为中国第一家与其建立合作 ...
- zookeeper学习实践1-实现分布式锁
引言 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提 ...
- 第7章 征服CSS3选择器（下）
:enabled选择器 在Web的表单中,有些表单元素有可用(":enabled")和不可用(":disabled")状态,比如输入框,密码框,复选框等.在默认 ...
- 多版本python如何切换
一.在命令行中 通过py -x 二.在py文件中 头部字段添加 #!python2 或 #!python3 即可调用相应版本解释器 命令行调用python:py helloworld.py
- Java 之 static的使用方法（6）
Java 中的 static 使用之静态变量 大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立. 然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 ...
- ArcGIS for JavaScript 关于路径开发的一些记录（三）
最近被一个bug困扰了两天~ 我新发布了一个NAserver(路径分析服务),但是放在之前的代码里面发现不能生成路径.经过我的调试发现并没有代码并没有报错,并且能够返回所生成路径的Graphic la ...
- c++开发ocx入门实践二
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/51374355 IDE:vs2010,c++,测试工具,vs自带的TstCo ...
- Python爬虫教程-19-数据提取-正则表达式(re)
本篇主页内容:match的基本使用,search的基本使用,findall,finditer的基本使用,匹配中文,贪婪与非贪婪模式 Python爬虫教程-19-数据提取-正则表达式(re) 正则表达式 ...
- php 环境搭配 脚本模式（1）
php介绍目标1:<?phpecho 'hello world'; //配置好了apacheecho '<br/> 现在时间:" .date(’Y-m-d H:i:s‘)“ ...
- Java基础之this关键字的作用
this关键字主要存在三种应用 1.this调用本类中的属性,也就是说调用类中的成员变量: 2.this调用本类中的其他方法: 3.this调用本类中的其他构造方法,调用时要放在构造方法的首行,否则会 ...