js Dom 放大镜

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 400px;
height: 400px;
position: relative;
}
.leftbox{
position: relative;
width: 400px;
height: 400px;
}
.left{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.rightbox{
width: 400px;
height: 400px;
position: absolute;
left: 420px;
top: 0;
overflow: hidden;
display: none;
}
.right{
width: 800px;
height: 800px;
position: absolute;
}
.pointer{
width: 100px;
height: 100px;
background: black;
opacity: .5;
cursor: move;
position: absolute;
top: 0;
left: 0;
display: none;
color: white;
}
</style>
<script>
window.onload=function(){
var leftbox=document.querySelector(".leftbox");
var left=document.querySelector(".left");
var pointer=document.querySelector(".pointer");
var rightbox=document.querySelector(".rightbox");
var right=document.querySelector(".right");
leftbox.onmouseover=function(){
pointer.style.display="block";
rightbox.style.display="block";
}
leftbox.onmouseout=function(){
pointer.style.display="none";
rightbox.style.display="none";
}
leftbox.onmousemove=function(event){
var oEvent=event||window.event;
var x=oEvent.clientX;
var y=oEvent.clientY;
pointer.innerText=x+":px;"+" "+y+":px";
l=x-pointer.offsetWidth/2;
t=y-pointer.offsetHeight/2;

if(x<pointer.offsetWidth/2){
l=0;
}else if(x>=leftbox.offsetWidth-pointer.offsetWidth/2){
l=leftbox.offsetWidth-pointer.offsetWidth;
}
if(y<pointer.offsetHeight/2){
t=0;
}else if(y>leftbox.offsetHeight-pointer.offsetHeight/2){
t=leftbox.offsetHeight-pointer.offsetHeight;
}
pointer.style.left=l+"px";
pointer.style.top=t+"px";
var imgl=(rightbox.offsetWidth-right.offsetWidth)/(leftbox.offsetWidth-pointer.offsetWidth);
var imgt=(rightbox.offsetHeight-right.offsetHeight)/(leftbox.offsetHeight-pointer.offsetHeight);
right.style.left=imgl*l+"px";
right.style.top=imgt*t+"px";
}
}
</script>
</head>
<body>
<div class="containter">
<div class="leftbox">
<img src="https://img.alicdn.com/bao/uploaded/i3/TB12fEyKXXXXXX5XXXXXXXXXXXX_!!0-item_pic.jpg_400x400q90.jpg" class="left">
<div class="pointer"></div>
</div>
<div class="rightbox">
<img src="https://img.alicdn.com/bao/uploaded/i3/TB12fEyKXXXXXX5XXXXXXXXXXXX_!!0-item_pic.jpg_800x800q90.jpg" class="right">
</div>
</div>
</body>
</html>

时间： 2024-08-02 08:57:33

js Dom 放大镜的相关文章

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件) <!-- Author: XiaoWen Create a file: 2017-01-13 12:28:36 Last modified: 2017-01-13 17:16:46 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <me

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JS DOM（文档对象模型）与BOM（浏览器对象模型）

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

js Dom 编程

1. 节点及其类型:  1). 元素节点  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.  3). 文本节点: 是元素节点的子节点, 其内容为文本.   2. 在 html 文档的什么位置编写 js 代码?    0). 直接在 html 页面中书写代码.   <button id="button" onclick="alert('hello world');">Click Me!</button>   缺点:    ①.

JS &amp; DOM 对象

22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Location HTML DOM 对象 DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Canvas DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Ima

jquery.jqzoom.js图片放大镜

jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Autho