JS笔记
绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1.内联模式
2.外联模式/脚本模式
绑定事件格式：元素节点.on + 事件类型 = 匿名函数
事件绑定一旦完成，系统会生成一个事件对象；
触发事件的时候，系统会自动去调用事件绑定的函数，将事件对象当做第一个参数传入
*/
function btnClick(){
alert("内联模式");
}
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
alert("外联模式");
}
}
</script>
</head>
<body>
<button onclick="btnClick();">内联模式</button>
<button id="btn1">外联模式</button>
</body>
</html>
事件类型的种类
一、鼠标事件（可以绑定在任意的元素节点上）
- cick 单击
- dblclick 双击
- mouseover 鼠标移入 ；mouseout 鼠标移出：经过子节点会重复触发
- mousemove 鼠标移动
- mouseenter 鼠标移入； mouseleave 鼠标移出：经过子节点不会重复触发（IE8以后）
- mouseup 鼠标按下
- mousedown 鼠标抬起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
}
</style>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn1");
oBtn.ondblclick = function () {
alert("双击");
};
oBtn.onmouseover = function () {
oBtn.style.backgroundColor = "green";
};
oBtn.onmouseout = function () {
oBtn.style.backgroundColor = "yellow";
};
oBtn.onmousedown = function () {
oBtn.innerHTML = "按下";
};
oBtn.onmouseup = function () {
oBtn.innerHTML = "弹起";
};
var oDiv = document.getElementById("div1");
var i = 0;
oDiv.onmousemove = function () {
this.innerHTML = i++;
};
};
</script>
</head>
<body>
<button id="btn1">按钮</button>
<div id="div1"></div>
</body>
</html>
二、键盘事件（表单元素、全局window）
- keydowm 键盘按下（如果按下不放手，会一直触发）
- keyup 键盘抬起
- keypress 键盘按下（只支持字符键）
三、HTML事件
- window事件
load 当页面加载完成以后会触发
unload 当页面解构的时候触发（刷新页面、关闭当前页面）IE浏览器兼容
scroll 页面滚动
resize 窗口大小发生变化的时候触发 - 表单事件
blur 失去焦点
focus 获取焦点
select 当我们在输入框内选中文本的时候触发
change 当我们对输入框的文本进行修改并且失去焦点的时候
【注】下面两个需添加在form元素上
submit 当我们点击submit上的按钮才能触发
reset 当我们点击reset上的按钮才能触发
//浏览器兼容，通过形参取事件对象
var show = function(ev){
var e = ev || window.event;
alert(e);
}
事件对象
一、鼠标事件对象
- button属性
0 左键；1 滚轮；2 右键 - 获取鼠标当前的位置
clientX clientY：可视窗口的左上角为原点
pageX pageY：整个页面的左上角（包括滚动的距离）
screenX screenY：电脑屏幕的左上角为原点
//实例，提示框随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
display: block;
font-size: 40px;
margin: 100px;
width: 150px;
}
#msg {
width: 600px;
height: 150px;
background-color: blanchedalmond;
color: black;
display: none;
position: absolute;
}
</style>
<script>
var arr = [
"hello world hello world hello world hello world",
"hello world hello world hello world hello world hello world hello world hello world hello world",
"hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world",
];
window.onload = function () {
var aAs = document.getElementsByTagName("a");
var oMsg = document.getElementById("msg");
for (var i = 0; i < aAs.length; i++) {
aAs[i].index = i;
aAs[i].onmouseover = function () {
oMsg.innerHTML = arr[this.index];
oMsg.style.display = "block";
};
aAs[i].onmouseout = function () {
oMsg.style.display = "none";
};
aAs[i].onmousemove = function (ev) {
var e = ev || window.event;
oMsg.style.left = e.clientX + 5 + "px";
oMsg.style.top = e.clientY + 5 + "px";
};
}
};
</script>
</head>
<body>
<a href="#">html</a>
<a href="#">css</a>
<a href="#">js</a>
<div id="msg"></div>
</body>
</html>
- 修改键
shiftKey 按下shift键为true，默认false
altKey 按下alt键为true，默认false
ctrlKey 按下ctrl键为true，默认false
metaKey 按下windows（开始）键为true，默认false【windows系统】；按下command键为true，默认false【macos系统】
二、键盘事件对象 - keyCode 键码【注】只在keydown下支持
格式：var which = e.which || e.keyCode; - charCode 字符码 【注】只在keypress下支持
格式：var which = e.which || e.charCode
返回值：字符码区分大小写，返回当前按下键对应字符的ASCII码值
物体跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物体跟随鼠标移动</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function () {
var oBox = document.querySelector('.box')
document.onmousemove = function (event) {
event = window.event || event
var pagex = event.pageX || scroll().top + event.clientX
var pagey = event.pageY || scroll().left + event.clientY
// 焦点在左上角
// oBox.style.left = pagex + 'px'
// oBox.style.top = pagey + 'px'
// 焦点在盒子中心
oBox.style.left = pagex - 50 + 'px'
oBox.style.top = pagey - 50 + 'px'
}
}
function scroll() {
return {
top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop,
left: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,
}
}
</script>
</body>
</html>
获取鼠标距离所在盒子的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取鼠标距离所在盒子的距离</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.onload = function () {
var oBox = document.querySelector('.box')
oBox.onmousemove = function (event) {
event = window.event || event
var pagex = event.pageX || scroll().top + event.clientX
var pagey = event.pageY || scroll().left + event.clientY
var targetx = pagex - oBox.offsetLeft
var targety = pagey - oBox.offsetTop
oBox.innerHTML = `targetx:${targetx};targety:${targety}`
}
}
function scroll() {
return {
top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop,
left: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,
}
}
</script>
</body>
</html>
目标对象
target 目标对象/触发对象（IE8以下不兼容，window.event.srcElement）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
var oLi = document.getElementById("li1");
oLi.onclick = function (ev) {
var e = ev || window.event;
var target = e.target || window.event.srcElement;
alert(this.innerHTML);//111
alert(target.innerHTML); //111
};
};
window.onload = function () {
var oUl = document.getElementById("ul1");
oUl.onclick = function (ev) {
var e = ev || window.event;
var target = e.target || window.event.srcElement;
alert(this.tagName); //UL
alert(target.innerHTML); //222
};
};
</script>
</head>
<body>
<ul id="ul1">
<li id="li1">111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现一个放大镜效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
}
.small {
position: relative;
width: 150px;
height: 90px;
border: 1px solid #ccc;
}
.small img {
width: 150px;
height: 90px;
}
.small .mask {
position: absolute;
display: none;
top: 0;
left: 0;
width: 50px;
height: 30px;
background: #fff;
opacity: 0.5;
cursor: move;
}
.big {
display: none;
position: absolute;
top: 0;
left: 200px;
width: 400px;
height: 240px;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
width: 1200px;
height: 720px;
}
</style>
</head>
<body>
<div class="box">
<div class="small">
<img src="./imgs/sp5.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="./imgs/sp5.jpg" alt="">
</div>
</div>
<script>
var oBox = document.querySelector('.box')
var oSmall = document.querySelector('.small')
var oBig = document.querySelector('.big')
var oMask = document.querySelector('.mask')
var bigImg = document.querySelector('.big img')
/**
* mouseover - 支持冒泡，对应mouseout
* mouseenter - 不支持冒泡，对应mouseleave
*/
// 控制遮罩和大图的显示与隐藏
oSmall.onmouseenter = function () {
show(oMask)
show(oBig)
}
oSmall.onmouseleave = function () {
hidden(oMask)
hidden(oBig)
}
// 定义鼠标的移动事件
oSmall.onmousemove = function (event) {
event = event || window.event
// 获取鼠标所在网页的x，y
var pagex = event.pageX || scroll().left() + event.clientX
var pagey = event.pageY || scroll().top() + event.clientY
// 获取鼠标所在small盒子的x，y，减去一半的mask盒子宽高，保证鼠标在遮罩中间
var x = pagex - oMask.offsetWidth / 2 - oSmall.offsetLeft
var y = pagey - oMask.offsetHeight / 2 - oSmall.offsetTop
// 设定边界
if (x < 0) {
x = 0
}
if (x > oSmall.offsetWidth - oMask.offsetWidth) {
x = oSmall.offsetWidth - oMask.offsetWidth
}
if (y < 0) {
y = 0
}
if (y > oSmall.offsetHeight - oMask.offsetHeight) {
y = oSmall.offsetHeight - oMask.offsetHeight
}
// 移动遮罩
oMask.style.left = x + 'px'
oMask.style.top = y + 'px'
// 右侧的大图等比移动
var scale = bigImg.offsetWidth / oSmall.offsetWidth
var xx = -scale * x
var yy = -scale * y
bigImg.style.marginLeft = xx + 'px'
bigImg.style.marginTop = yy + 'px'
}
// 封装显示和隐藏函数
function show(ele) {
ele.style.display = 'block'
}
function hidden(ele) {
ele.style.display = 'none'
}
// 封装scroll函数
function scroll() {
return {
top: window.pageYOffset || document.body.offsetTop || document.documentElement.offsetTop,
top: window.pageXOffset || document.body.offsetLeft || document.documentElement.offsetLeft,
}
}
</script>
</body>
</html>
事件冒泡（由里向外逐级触发）
【注】是浏览器自带的一个特点（事件流）
事件捕获：由外向里逐级触发
//事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
padding: 50px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
}
#div3 {
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var aDivs = document.getElementsByTagName("div");
for (var i = 0; i < aDivs.length; i++) {
aDivs[i].onclick = function () {
alert(globalThis.id);
};
}
};
</script>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
阻止事件冒泡：(都是事件对象的属性和方法）cancelBubble = true stopPropagation()
window.onload = function () {
var aDivs = document.getElementsByTagName("div");
for(var i = 0;i < aDivs.length;i++){
aDivs[i].onclick = function(ev){
var e = ev || window.event;
alert(this.id);
//e.cancelBubble = true;
//e.stopPropagation();
//调用封装函数
stopBubble(e);
}
}
};
//封装跨浏览器兼容的阻止事件冒泡
function stopBubble(e){
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
练习题
//动图跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 208px;
height: 208px;
background: url(timg.gif) no-repeat;
position: absolute;
}
body {
background-color: black;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1");
document.onmousemove = function (ev) {
var e = ev || window.event;
oDiv.style.left = e.clientX - 100 + "px";
oDiv.style.top = e.clientY - 100 + "px";
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
//跟随鼠标移动一串
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
div {
position: absolute;
width: 20px;
height: 20px;
background-color: greenyellow;
border-radius: 50%;
}
</style>
<script>
window.onload = function () {
var aDivs = document.getElementsByTagName("div");
document.onmousemove = function (ev) {
var e = ev || window.event;
for (var i = aDivs.length - 1; i > 0; i--) {
//后一个节点总跟随自己前面那一个节点移动
aDivs[i].style.left = aDivs[i - 1].offsetLeft + "px";
aDivs[i].style.top = aDivs[i - 1].offsetTop + "px";
}
//让下标0的div随鼠标移动
aDivs[0].style.left = e.clientX + "px";
aDivs[0].style.top = e.clientY + "px";
};
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
//阻止菜单右键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#menu {
width: 100px;
height: 100px;
background-color: lightgray;
display: none;
position: absolute;
}
#menu ul li {
list-style-type: none;
}
</style>
<script>
window.onload = function () {
//阻止官方右键菜单
document.oncontextmenu = function () {
return false;
};
//自己建立菜单，右键弹出，其他消失
var oMenu = document.getElementById("menu");
document.onmousedown = function (ev) {
var e = ev || window.event;
if (e.button == 2) {
oMenu.style.display = "block";
oMenu.style.left = e.clientX + "px";
oMenu.style.top = e.clientY + "px";
} else {
oMenu.style.display = "none";
}
};
};
</script>
</head>
<body>
<div id="menu">
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
</body>
</html>
//阻止超链接跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
window.onload = function () {
var oA = document.getElementById("a1");
/* oA.onclick = function () {
return confirm("你确定要离开吗？");
}; */
oA.onclick = function (ev) {
var e = ev || window.event;
preDef(e);
};
};
//跨浏览器的阻止超链接默认行为的函数
function preDef(e) {
e.preventDefault
? e.preventDefault()
: (window.event.returnValue = false);
}
</script>
</head>
<body>
<a href="https://www.cn.bing.com" id="a1">必应</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
height: 150px;
width: 150px;
background-color: lightgreen;
position: absolute;
}
</style>
<script>
//鼠标拖拽：mousedown mousemove mouseup
window.onload = function () {
var oDiv = document.getElementById("div1");
oDiv.onmousedown = function (ev) {
var e = ev || window.event;
var offsetX = e.clientX - oDiv.offsetLeft;
var offsetY = e.clientY - oDiv.offsetTop;
document.onmousemove = function (ev) {
var e = ev || window.event;
oDiv.style.left = e.clientX - offsetX + "px";
oDiv.style.top = e.clientY - offsetY + "px";
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
height: 200px;
width: 200px;
background-color: lightgreen;
position: absolute;
}
</style>
<script>
/*
鼠标拖拽：mousedown mousemove mouseup
*/
window.onload = function () {
var oDiv = document.getElementById("div1");
Drag(oDiv);
function Drag(node) {
//限制边界的鼠标拖拽
node.onmousedown = function (ev) {
var e = ev || window.event;
var offsetX = e.clientX - node.offsetLeft;
var offsetY = e.clientY - node.offsetTop;
document.onmousemove = function (ev) {
var e = ev || window.event;
var l = e.clientX - offsetX;
var t = e.clientY - offsetY;
if (l <= 0) {
l = 0;
}
var windowWidth =
document.documentElement.clientWidth ||
document.body.clientWidth;
if (l >= windowWidth - node.offsetWidth) {
l = windowWidth - node.offsetWidth;
}
if (t <= 0) {
t = 0;
}
var windowHeight =
document.documentElement.clientHeight ||
document.body.clientHeight;
if (t >= windowHeight - node.offsetHeight) {
t = windowHeight - node.offsetHeight;
}
node.style.left = l + "px";
node.style.top = t + "px";
};
};
document.onmouseup = function () {
document.onmousemove = null;
};
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
/*
事件委托：（步骤）
1. 找到当前节点的父元素或者祖先节点
2.将事件添加到你找到的这个父节点或者祖先节点上
3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作
*/
window.onload = function () {
var oUl = document.getElementById("ul1");
oUl.onclick = function (ev) {
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if (target.nodeName.toLowerCase() == "li") {
target.style.backgroundColor = "red";
}
};
var oBtn = document.getElementById("btn");
var i = 6;
oBtn.onclick = function () {
var newNode = document.createElement("li");
newNode.innerHTML = i++;
oUl.append(newNode);
};
};
</script>
</head>
<body>
<button id="btn">新增节点</button>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
//动态生成表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#t1 tr td {
width: 100px;
height: 30px;
}
.box0 {
background-color: lawngreen;
}
.box1 {
background-color: lightcoral;
}
</style>
<script>
window.onload = function () {
var oRow = document.getElementById("row");
var oCol = document.getElementById("col");
var oBtn = document.getElementById("btn1");
var oT = document.getElementById("t1");
//给表格上的删除按钮添加事件委托
oT.onclick = function (ev) {
var e = ev || window.event;
var target = e.target || window.event.srcElement;
if (target.nodeName.toLowerCase() == "button") {
oT.removeChild(target.parentNode.parentNode);
}
};
oBtn.onclick = function () {
if (!oRow.value || !oCol.value) {
alert("请输入对应的行和列，生成表格");
} else {
for (var i = 0; i < oRow.value; i++) {
var oTr = document.createElement("tr");
oTr.className = "box" + (i % 2);
for (var j = 0; j < oCol.value; j++) {
var oTd = document.createElement("td");
oTr.appendChild(oTd);
}
//添加一个删除按钮
var oClose = document.createElement("td");
oClose.innerHTML = "<button>删除</button>";
oTr.appendChild(oClose);
oT.appendChild(oTr);
}
}
};
};
</script>
</head>
<body>
<input type="text" placeholder="输入行" id="row" />
<input type="text" placeholder="输入列" id="col" />
<button id="btn1">确定</button>
<table id="t1" border="1"></table>
</body>
</html>
事件监听
传统事件绑定：
重复添加，覆盖
不能精确删除事件上的某一个函数
- addEventListener()
格式：node.addEventListener("click")
参数：
第一个参数 事件类型
第二个参数 绑定函数
第三个参数 布尔值（true，事件捕获；false，事件冒泡，默认） - removeEventListener()
格式：node.removeEventListener
参数：
第一个参数 事件类型
第二个参数 删除函数的名字
<!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>
<script>
window.onload = function () {
var aBtns = document.getElementsByTagName("button");
aBtns[1].addEventListener(
"click",
function () {
alert("it's normal");
},
false
);
aBtns[0].onclick = function () {
aBtns[1].addEventListener("click", show, false);
};
aBtns[2].onclick = function () {
aBtns[1].removeEventListener("click", show);
};
};
function show() {
alert("hello world");
}
</script>
</head>
<body>
<button>add</button>
<button>normal</button>
<button>delete</button>
</body>
</html>
事件监听器的兼容
attachEvent() 和 detachEvent()
//事件监听器的兼容
function addEvent(node, evenType, funcName) {
if (node.addEventListener) {
node.addEventListener(evenType, funcName, false);
} else {
node.attachEvent("on" + evenType, funcName);
}
}
function removeEvent(node, eventType, funcName) {
if (node.removeEventListener) {
node.removeEventListener(eventType, funcName);
} else {
node.detachEvent("on" + eventType, funcName);
}
}
放大镜效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#init {
width: 500px;
height: 330px;
position: absolute;
left: 100px;
top: 100px;
}
#init img {
width: 100%;
height: 100%;
}
#mark {
width: 100px;
height: 100px;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left: 0px;
top: 0px;
}
#big {
display: none;
width: 400px;
height: 400px;
border: 1px solid black;
left: 700px;
top: 100px;
position: absolute;
overflow: hidden;
}
#big img {
width: 1000px;
height: 660px;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<script>
window.onload = function () {
var oInit = document.getElementById("init");
var oBig = document.getElementById("big");
var oMark = document.getElementById("mark");
var oBigImg = oBig.getElementsByTagName("img")[0];
oInit.onmouseover = function () {
oMark.style.display = "block";
oBig.style.display = "block";
};
oInit.onmouseout = function () {
oMark.style.display = "none";
oBig.style.display = "none";
};
oInit.onmousemove = function (ev) {
var e = ev || window.event;
var l = e.clientX - oInit.offsetLeft - 50;
var t = e.clientY - oInit.offsetTop - 50;
if (l <= 0) {
l = 0;
}
if (l >= 400) {
l = 400;
}
if (t <= 0) {
t = 0;
}
if (t >= 230) {
t = 230;
}
oMark.style.left = l + "px";
oMark.style.top = t + "px";
//右边图片的移动方式，左边半透明层如何移动，右边图片反方向对应倍数移动
oBigImg.style.left = l * -2 + "px";
oBigImg.style.top = t * -2 + "px";
};
};
</script>
</head>
<body>
<div id="init">
<img src="bigger.jpg" alt="" />
<div id="mark"></div>
</div>
<div id="big">
<img src="bigger.jpg" alt="" />
</div>
</body>
</html>
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
