JS-面向对象放大镜

仿京东的放大镜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin: 0px;padding:0px;}#box{width: 450px;height: 450px;position: relative;border: 1px solid salmon; }/* .small{width: 450px;height: 450px;}.cover{width: 300px;height: 300px;background: rgba(255,246,143,0.5);position: absolute;left: 0px;top: 0px;display: none;}.big{width: 540px;height: 540px;border: 1px solid seagreen;overflow: hidden;position: absolute;left: 480px;top: 50px;}.big img{position: absolute;left: 0px;top: 0px;} */</style>
</head>
<body><div id="box"><!-- <div class="small" id="small"><img src="data:images/11.jpg" alt=""><div class="cover" id="cover"></div></div><div class="big" id="big"><img src="data:images/10.jpg" alt=""></div> --></div><script>// 小div(function(){function Small(width,height){this.width=width|| 450this.height=height|| 450}Small.prototype.init=function(box){var small = document.createElement('div')var img = document.createElement('img')var box = document.getElementById('box')// div.id='small'img.src = 'images/11.jpg'small.style.width = this.width + 'px'small.style.height = this.height + 'px'// small.style.backgroundColor = 'pink'box.append(small)small.append(img)}window.Small = Small})();// 大div(function(){function Big(width,height) { this.width = width || 540this.height = height || 540}Big.prototype.init = function(box){var big = document.createElement('div')var img = document.createElement('img')var box = document.getElementById('box')// div.id='big'img.src = 'images/10.jpg'img.style.position = 'absolute'img.style.left = 0 + 'px'img.style.top = 0 + 'px'big.style.width = this.width + 'px'big.style.height = this.height + 'px'big.style.position = 'absolute'big.style.border = '1px solid salmon'big.style.left = 540 + 'px'big.style.top = 50 + 'px'big.style.overflow = 'hidden'big.style.display = 'none'box.append(big)big.append(img)}window.Big = Big})();// 遮罩层(function(){function Cover(width,height){this.width=width|| 300this.height=height|| 300}Cover.prototype.init=function(box,small){var cover = document.createElement('div')var box = document.getElementById('box')cover.style.width = this.width + 'px'cover.style.height = this.height + 'px'cover.style.position = 'absolute'cover.style.background = 'rgba(255,246,143,0.5)'cover.style.display = 'none'cover.style.left = 0 + 'px'cover.style.top = 0 + 'px'box.children[0].append(cover)}window.Cover = Cover})();// 初始化(function(){var small1 = new Small(450,450)small1.init();var cover1 = new Cover(300,300)cover1.init();var big1 = new Big(540,540)big1.init();var box = document.getElementById('box')var coverBox =  box.children[0].children[1]var bigBox = box.children[1]var bigImg = box.children[1].children[0]var small = box.children[0]box.onmouseover = function (cover,big) { coverBox.style.display = 'block'bigBox.style.display = 'block'}box.onmouseout = function (cover,big) { coverBox.style.display = 'none'bigBox.style.display = 'none'// console.log( box.children[1].children[0])}box.onmousemove = function(e){var e = window.event || evar coverPositionX =  e.clientX - 150var coverPositionY =  e.clientY - 150 if(coverPositionX<=0){coverPositionX = 0}if(coverPositionX>=150){coverPositionX = 150}if(coverPositionY<=0){coverPositionY=0}if(coverPositionY>=150){coverPositionY=150}coverBox.style.left = coverPositionX +'px'coverBox.style.top = coverPositionY +'px'//大图的移动// 遮罩层的移动距离/图片的移动距离 = 遮罩层的最大移动距离/ 图片的最大移动距离var imgMaxDistance =  bigImg.offsetWidth- bigBox.offsetWidth   //258var coverMaxDistance = small.offsetWidth - coverBox.offsetWidth   //150bigImg.style.left = - imgMaxDistance*coverPositionX /coverMaxDistance + 'px'bigImg.style.top = - imgMaxDistance*coverPositionY /coverMaxDistance + 'px'}})();</script>
</body>
</html>

JS-面向对象放大镜相关推荐

案例：用JS实现放大镜特效
案例:用JS实现放大镜特效案例:用JS实现放大镜特效
JavaScript – 6.JS面向对象基础(*) + 7.Array对象 + 8.JS中的Dictionary + 9.数组、for及其他...
6.JS面向对象基础(*) 7.Array对象 7.1 练习:求一个数组中的最大值.定义成函数. 7.2 练习:将一个字符串数组输出为|分割的形式,比如"刘在石|金钟国|李光洙|HAHA|宋 ...
JS面向对象一:MVC的面向对象封装
JS面向对象一:MVC的面向对象封装 MDNjavascript面向对象面向对象(Object-Oriented) 面向对象里面向的意思是以...为主,面向对象编程既以对象为主的编程. 面向对象的一 ...
java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
js面向对象程序设置——创建对象
<script type="text/javascript"> //工厂方式 //1.原始方式 /* var ...
简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程作者:茄果链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
对js面向对象的理解
转自:http://www.cnblogs.com/jingwhale/p/4678656.html js面向对象理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP ...
JS面向对象的程序设计之继承-继承的实现-借用构造函数
JS面向对象的程序设计之继承-继承的实现-借用构造函数前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以用自己所理解的,尝试解读下.如有纰漏或错误 ...
js面向对象与PHP面向对象总结
js面向对象: 1.什么是对象? 对象:任何实体都是对象,拥有属性和方法两大特征属性:描述事物的特点: 方法:实物拥有的行为: 2.在JS里 Person.name="zhang" ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

JS-面向对象放大镜

仿京东的放大镜

JS-面向对象放大镜相关推荐

最新文章

热门文章