JSAP106
JSAP106
1、clientX、clientY
点击位置距离当前body可视区域的x，y坐标javascript
2、pageX、pageY
对于整个页面来讲，包括了被卷去的body部分的长度css
3、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标html
4、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标java
5、x、y和screenX、screenY同样web
window.pageXOffsetjson
整数只读属性，表示X轴滚动条向右滚动过的像素数（表示文档向右滚动过的像素数）。IE不支持该属性，使用body元素的scrollLeft属性替代。数组
window.pageYoffset浏览器
整数只读属性，表示Y轴滚动条向下滚动过的像素数（表示文档向下滚动过的像素数）。IE不支持该属性，使用body元素的scrollTop属性替代。ide
一、目标：
jQuery中的顶级对象$–jQuerysvg
二、scroll系列
.scrollWidth/Height
元素中内容的实际的宽度/高度，均没有边框；若元素中没有内容或内容不足元素的高，返回元素的宽/高
.scrollLeft/Top
向左/上被卷曲（被隐藏）的内容的长度
实时获取div向上卷曲的值
div的滚动事件：对象.onscroll
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
border: 1px red solid;
height: 100px;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="dv">
麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司
麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司
麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司
麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司
麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司麻辣寿司
</div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("dv").onscroll = function () {
console.log(this.scrollTop);
};
</script>
</body>
//固定导航栏案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 0 auto;
width: 1000px;
margin-top: 10px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt=""/>
</div>
<script src="common.js"></script>
<script>
//获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滚动事件
window.onscroll=function () {
//向上卷曲出去的距离和最上面的div的高度对比
if(getScroll().top>=my$("topPart").offsetHeight){
//设置第二个div的类样式
my$("navBar").className="nav fixed";
//设置第三个div的marginTop的值
my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px";
}else{
my$("navBar").className="nav";
my$("mainPart").style.marginTop="10px";
}
};
</script>
<script>
//获取浏览器向上卷曲出去的距离的值,向左卷曲出去的距离
// function getScroll() {
// var obj={};
// var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.left=left;
// obj.top=top1;
// return obj;
//
// }
// function getScroll() {
// var obj={};
// obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
// obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
// return obj;
//
// }
// function getScroll() {
// var obj = {
// left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
// top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
// };
// return obj;
//
// }
//浏览器的滚动事件
// window.onscroll=function () {
//console.log(getScroll().top);
// };
//向上卷曲出去的距离
</script>
</body>
</html>
获取浏览器向上/左卷曲的距离值？
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft
|| document.body.scrollLeft,
top: window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0
};
}
//向上卷曲出去的距离，有三种方法，不一样浏览器的支持种类不尽相同，须要写兼容性代码
// var scrollTop1 = window.pageYOffset;
// var scrollTop1 = document.documentElement.scrollTop;
// var scrollTop1=window.body.scrollTop;
//向左卷曲的值同理，将上述的TOP换位Left便可
</script>
<script>
//筋斗云案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
body {
background-color: #333;
}
.nav {
width: 800px;
height: 42px;
margin: 100px auto;
background: url(images/rss.png) right center no-repeat;
background-color: #fff;
border-radius: 10px;
position: relative;
}
.nav li {
width: 83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.nav span {
position: absolute;
top: 0;
left: 0;
width: 83px;
height: 42px;
background: url(images/cloud.gif) no-repeat;
}
ul {
position: relative;
}
</style>
</head>
<body>
<div class="nav">
<span id="cloud"></span>
<ul id="navBar">
<li>北京校区</li>
<li>上海校区</li>
<li>广州校区</li>
<li>深圳校区</li>
<li>武汉校区</li>
<li>关于咱们</li>
<li>联系咱们</li>
<li>招贤纳士</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
}, 20);
}
//获取云彩
var cloud = my$("cloud");
//获取全部的li标签
var list = my$("navBar").children;
//循环遍历分别注册鼠标进入,鼠标离开,点击事件
for (var i = 0; i < list.length; i++) {
//鼠标进入事件
list[i].onmouseover = mouseoverHandle;
//点击事件
list[i].onclick = clickHandle;
//鼠标离开事件
list[i].onmouseout = mouseoutHandle;
}
function mouseoverHandle() {//进入
//移动到鼠标这次进入的li的位置
animate(cloud, this.offsetLeft);
}
//点击的时候,记录这次点击的位置
var lastPosition = 0;
function clickHandle() {//点击
lastPosition = this.offsetLeft;
}
function mouseoutHandle() {//离开
animate(cloud, lastPosition);
}
</script>
</body>
</html>
//变速动画封装
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;
element.style.left = current + "px";
if (current == target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step);
}, 20);
}
三、获取元素计算后的样式属性值
offsetLeft返回的结果不必定都是对的
函数：
window.getComputedStyle(…)
两个参数分别是元素和伪类（可传Null）
将返回一个对象CSSStyleDeclaration,包含全部的CSS属性。利用此方式获取某一元素的CSS样式属性值很是地准确，ie8不支持
.currentStyle
支持ie8
其返回的属性的都是字符串类型
兼容性代码：
unction getStyle(element,attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
案例：封装缓动动画增长任意一个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
//获取div此时left的当前位置,达到目标400
// animate(my$("dv"),"left",400);
//获取div此时的宽度,达到目标200
animate(my$("dv"),"width",200);
};
//获取任意的一个属性的当前的属性值: left--->此时的left属性的值,width---当前的元素的宽
function getStyle(element,attr) {
//判断浏览器是否支持这个方法
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
}
//匀速动画
//element---元素
//attr---属性名字
//target---目标位置
function animate(element,attr ,target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = parseInt(getStyle(element,attr));//数字类型//===============================
//移动的步数
var step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
element.style[attr] = current + "px";//============================================
if(current==target) {
//清理定时器
clearInterval(element.timeId);
}
//测试代码:
console.log("目标位置:"+target+",当前位置:"+current+",每次移动步数:"+step);
}, 20);
}
</script>
</div>
</body>
</html>
案例：缓动动画追加任意多个属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
function animate(element,json) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认,假设,所有到达目标
for(var attr in json){
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//当前的属性对应的目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current+"px";
if(current!=target){
flag=false;
}
}
if(flag){
//清理定时器
clearInterval(element.timeId);
}
//测试代码
console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
},20);
}
my$("btn1").onclick=function () {
animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80});
};
</script>
</body>
</html>
//添加回调函数
//添加回调函数能够一次性嵌套多个动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 30px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element,attr) {
return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
}
//element---元素
//json---对象---多个属性及多个目标值
//fn---函数
function animate(element,json,fn) {
clearInterval(element.timeId);
element.timeId=setInterval(function () {
var flag=true;//默认,假设,所有到达目标
for(var attr in json){
//获取元素这个属性的当前的值
var current=parseInt(getStyle(element,attr));
//当前的属性对应的目标值
var target=json[attr];
//移动的步数
var step=(target-current)/10;
step=step>0?Math.ceil(step):Math.floor(step);
current+=step;//移动后的值
element.style[attr]=current+"px";
if(current!=target){
flag=false;
}
}
if(flag){
//清理定时器
clearInterval(element.timeId);
//全部的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if(fn){
fn();
}
}
//测试代码
console.log("目标:"+target+",当前:"+current+",每次的移动步数:"+step);
},20);
}
my$("btn1").onclick=function () {
var json1={"width":400,"height":500,"left":500,"top":80};
animate(my$("dv"),json1,function () {
var json2={"width":40,"height":50,"left":50,"top":800};
animate(my$("dv"),json2,function () {
var json3={"width":450,"height":550,"left":550,"top":600};
animate(my$("dv"),json3);
});
});
};
</script>
</body>
</html>
//动画函数增长透明度以及层级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
input {
z-index: 10;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<div id="dv">
</div>
<script src="common.js"></script>
<script>
//点击按钮,改变宽度到达一个目标值,高度到达一个目标值
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,所有到达目标
//遍历json对象中的每一个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是否是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是否是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//全部的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
}
//zIndex:1000
//透明度: 数字类型----小数---放大100倍
my$("btn1").onclick = function () {
var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2};
animate(my$("dv"), json1, function () {
animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000});
});
};
</script>
</body>
</html>
案例：手风琴
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
* {
margin: 0;
padding: 0;
}
div {
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
width: 240px;
height: 400px;
float: left;
}
div ul {
width: 1300px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="common.js"></script>
<script>
//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
function animate(element, json, fn) {
clearInterval(element.timeId);//清理定时器
//定时器,返回的是定时器的id
element.timeId = setInterval(function () {
var flag = true;//默认,假设,所有到达目标
//遍历json对象中的每一个属性还有属性对应的目标值
for (var attr in json) {
//判断这个属性attr中是否是opacity
if (attr == "opacity") {
//获取元素的当前的透明度,当前的透明度放大100倍
var current = getStyle(element, attr) * 100;
//目标的透明度放大100倍
var target = json[attr] * 100;
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current / 100;
} else if (attr == "zIndex") { //判断这个属性attr中是否是zIndex
//层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} else {
//普通的属性
//获取元素这个属性的当前的值
var current = parseInt(getStyle(element, attr));
//当前的属性对应的目标值
var target = json[attr];
//移动的步数
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//移动后的值
element.style[attr] = current + "px";
}
//是否到达目标
if (current != target) {
flag = false;
}
}
if (flag) {
//清理定时器
clearInterval(element.timeId);
//全部的属性到达目标才能使用这个函数,前提是用户传入了这个函数
if (fn) {
fn();
}
}
//测试代码
console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
}, 20);
}
//先获取全部的li标签
var list = my$("box").getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
//鼠标进入
list[i].onmouseover = mouseoverHandle;
//鼠标离开
list[i].onmouseout = mouseoutHandle;
}
//进入
function mouseoverHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 100});//动画效果
}
animate(this, {"width": 800});
}
//离开
function mouseoutHandle() {
for (var j = 0; j < list.length; j++) {
animate(list[j], {"width": 240});//动画效果
}
}
</script>
</body>
</html>
//案例：开机动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<span id="closeButton"></span>
<div class="hd" id="headPart">
<img src="images/t.jpg" alt=""/>
</div>
<div class="bd" id="bottomPart">
<img src="images/b.jpg" alt=""/>
</div>
</div>
<script src="common.js"></script>
<script>
my$("closeButton").onclick=function () {
//设置最下面的div的高渐渐的变成0
animate(my$("bottomPart"),{"height":0},function () {
animate(my$("box"),{"width":0});
});
};
</script>
</body>
</html>
//旋转木马案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css"/>
<script src="common.js"></script>
<script>
//
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
}//4
];
//页面加载的事件
window.onload = function () {
var flag=true;//假设全部的动画执行完毕了---锁====================================================
var list = my$("slide").getElementsByTagName("li");
//1---图片散开
function assign() {
for (var i = 0; i < list.length; i++) {
//设置每一个li,都要把宽,层级,透明度,left,top到达指定的目标位置
animate(list[i], config[i],function () {
flag=true;//===============================================
});
}
}
assign();
//右边按钮
my$("arrRight").onclick = function () {
if(flag){//==========================================================
flag=false;
config.push(config.shift());
assign();//从新分配
}
};
//左边按钮
my$("arrLeft").onclick = function () {
if(flag){//==================================================
flag=false;
config.unshift(config.pop());
assign();
}
};
//鼠标进入,左右焦点的div显示
my$("slide").onmouseover = function () {
animate(my$("arrow"), {"opacity": 1});
};
//鼠标离开,左右焦点的div隐藏
my$("slide").onmouseout = function () {
animate(my$("arrow"), {"opacity": 0});
};
};
</script>
</head>
<body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
</body>
</html>
arr.push(arr.shift())//有转换顺序的做用，把数组内第一个元素移到数组末尾
arr.unshift(arr.pop())//把数组中最后一个元素提到第一个的位置
a标签的内容：
四、client系列属性
offsetParent
可视区域，标签中能够看获得的区域
.clientWidth //可视区域的宽，不包括边框
,clientHeight //可视区域的高，不包括边框
.clientLeft //左边框的宽度，与margin无关
.clientTop//上边框的宽度
//案例：图片跟着鼠标飞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
img {
position: absolute;
}
body{
height: 2000px;
}
</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
document.onmousemove = function (e) {
my$("im").style.left = e.pageX + "px";//相对于页面顶部的坐标，ie8不支持，要改用卷曲区域和可视区域相加的方式，略
my$("im").style.top = e.pageY + "px";
};
</script>
</body>
</html>
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
