js面向对象模拟京东商城图片放大效果

JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。本文简单介绍一下使用JavaScript面向对象思想模拟京东商城鼠标悬浮商品图片，图片放大的效果。

1. 首先分析该效果的主要结构：

京东商城图片放大效果
分析原图效果可以看到主要结构为小图片，黄色透明遮罩，底部图片按钮，大图片。图片放大的效果实际上是一张大图片进行位移，移动合适的位置显示。知道主要结构后先将结构和样式写好。
结构代码。

<div class="box"><div class="middle"><img src="data:images/big1.jpg"><div class="shade"></div><div class="big"></div></div><div class="small"><ul><li class="active"><a href="#"><img src="data:images/big1.jpg" alt=""></a></li><li><a href="#"><img src="data:images/big2.jpg" alt=""></a></li></ul></div></div>

样式代码。

<style>* {margin: 0;padding: 0;list-style: none;}.box {width: 400px;height: 500px;margin: 100px;position: relative;}.shade {width: 100px;height: 100px;background: rgba(255, 255, 0, 0.5);position: absolute;left: 0;top: 0;display: none;}.middle {width: 400px;height: 400px;border: 1px solid #000;position: relative;}.middle img {width: 400px;height: 400px;}.big {width: 400px;height: 400px;position: absolute;left: 105%;top: 0;border: solid;background-image: url("images/big1.jpg");background-size: 1600px 1600px;display: none;background-repeat: no-repeat;}.shade:hover {cursor: move;}.small ul li {margin: 0 5px;border: 1px solid #cccccc;}.small ul li img {width: 50px;height: 50%;vertical-align: middle;}.small ul {width: 400px;height: 100px;display: flex;align-items: center;justify-content: flex-start;}.small ul li.active {border-color: #f00;}</style>

2. 编写JavaScript
首先创建一个构造函数Enlarge，并实例化对象Enlarge；在构造函数中获取所需要的元素节点，获取元素节点后为元素绑定事件。

// 首先创建一个构造函数Enlarge
function Enlarge(classname) {//获取需要用到的元素this.box = document.querySelector("." + classname);this.middle = this.box.querySelector(".middle");this.middleImg = this.box.querySelector(".middle img");this.shade = this.box.querySelector(".middle .shade");this.big = this.box.querySelector(".middle .big");this.lis = this.box.querySelectorAll(".small ul li");//将this赋值给_this，方便后面代码获取Enlarge对象var _this = this;//为middle添加鼠标移入事件this.middle.onmouseover = function () {//调用over方法_this.over();}//为middle添加鼠标移出事件this.middle.onmouseout = function () {//调用out方法_this.out();}//使用循环为每一个li添加单击事件for (var i = 0; i < this.lis.length; i++) {this.lis[i].index = i;this.lis[i].onclick = function () {//调用click方法_this.click(this);}}
}

定义over方法，将方法绑定给原型对象

//将over方法绑定在原型对象中
Enlarge.prototype.over = function () {//鼠标移入改变遮罩shade和大图片big的display属性，让这两个元素显示this.shade.style.display = "block";this.big.style.display = "block";//定义鼠标移动方法this.middle.onmousemove = e => {//获取鼠标坐标var e = e || window.event;var x = e.pageX;var y = e.pageY;//通过鼠标坐标获取移动的距离var l = x - this.box.offsetLeft - this.middle.offsetLeft - this.shade.offsetWidth / 2;var t = y - this.box.offsetTop - this.middle.offsetTop - this.shade.offsetHeight / 2;//限定遮罩shade的移动范围if (l <= 0) {l = 0;}if (l >= this.middle.clientWidth - this.shade.offsetWidth) {l = this.middle.clientWidth - this.shade.offsetWidth;}if (t <= 0) {t = 0;}if (t >= this.middle.clientHeight - this.shade.offsetHeight) {t = this.middle.clientHeight - this.shade.offsetHeight}//将移动距离赋值给遮罩shadethis.shade.style.left = l + "px";this.shade.style.top = t + "px";this.fangda(l, t);}}

图片放大实际上是一张大图进行了位移，那么这个大图需要移动多少合适？
原图是宽400px，遮罩是100px，将大图看作是原图，包裹大图的div看作是遮罩。那么如果遮罩相对于原图移动200px，包裹大图的div就应该相对于大图移动800px；由此可以看出包裹大图的div应该移动的距离会等于大图的宽*（遮罩移动的距离/原图宽）。由于包裹大图的div盒子是不能动的所以只能移动图片，遮罩向左移大图就向右移动值取相反就好。

//定义图片放大效果的方法
Enlarge.prototype.fangda = function (l, t) {//计算遮罩相对于原图移动的距离/原图宽var w = l / this.middle.clientWidth;var h = t / this.middle.clientHeight;var style = window.getComputedStyle(this.big).backgroundSize;//通过字符串方法split取到background-position的两个值var bigW = parseInt(style.split(" ")[0]);var bigH = parseInt(style.split(" ")[1]);var bigL = bigW * w;var bigT = bigH * h;//将计算的值赋值给大图this.big.style.backgroundPosition = `-${bigL}px -${bigT}px`;
}

定义鼠标out方法

Enlarge.prototype.out = function () {this.shade.style.display = "none";this.big.style.display = "none";
}

定义小图片单击click方法

//定义click方法
Enlarge.prototype.click = function (ele) {//创建一个数组存放要使用到的图片地址var imgArr = ["1.jpg", "2.jpg"];//使用循环先将两个小图片的类名都清除掉for (var i = 0; i < this.lis.length; i++) {this.lis[i].className = "";}//清除完之后谁点击的给谁添加上active类名ele.className = "active";//定义bigImg用来存放图片地址var bigImg = 'images/big' + imgArr[ele.index]//改变两个大盒子中的图片地址从而实现图片切换功能this.middleImg.src = bigImg;this.big.style.backgroundImage = "url(" + bigImg + ")";
}

最后实例化对象

var enlarge = new Enlarge("box");

代码最终效果

到这里京东商城鼠标悬浮商品，商品图片放大的效果就做好了。制作这个效果就是将需要获取到的元素通过this存放在构造函数中，将方法绑定在原型对象上，然后一步一步编写就可以了。编写过程中要注意this的指向。

js面向对象模拟京东商城图片放大效果相关推荐

JS实现淘宝商品图片放大效果（放大镜）
思路: 1.用两个div分别装一个小图片和一个相同的大图片 2.鼠标经过的时候显示大的div盒子和大的图片,当鼠标离开box的时候隐藏大的div盒子和大的图片 3.当鼠标在盒子中移动的时候,让选中区域 ...
body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观存在两个问题 1.点击查看后,电子照片会变形 ...
jquery图片放大效果,鼠标经过图片时局部放大，类似京东图片放大镜效果
原文:jquery图片放大效果,鼠标经过图片时局部放大,类似京东图片放大镜效果源代码下载地址:http://www.zuidaima.com/share/1746784990055424.htm 1 ...
JavaScript打造很酷的图片放大效果实例代码
代码简介: 非常酷的一个JavaScript图片放大效果,不信就运行一下试试,相信你会喜欢的. 代码内容: View Code <html><head><title> ...
基于HTML+CSS+JS+JQuery的京东商城
基于HTML+CSS+JS+JQuery的京东商城包含京东商城首页,商品详情页,购物车页,订单确认页,结算页面,登录页,注册页. 项目截图注册页面,有正则表达式验证,验证码则为6位随机数,注册成功 ...
jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

js面向对象模拟京东商城图片放大效果

js面向对象模拟京东商城图片放大效果

js面向对象模拟京东商城图片放大效果相关推荐

最新文章

热门文章