JSAP106
一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标
二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度
三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标
四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标
五、x、y和screenX、screenY一样
window.pageXOffset
整数只读属性，表示X轴滚动条向右滚动过的像素数（表示文档向右滚动过的像素数）。IE不支持该属性，使用body元素的scrollLeft属性替代。
window.pageYoffset
整数只读属性，表示Y轴滚动条向下滚动过的像素数（表示文档向下滚动过的像素数）。IE不支持该属性，使用body元素的scrollTop属性替代。
1、目标：
jQuery中的顶级对象$–jQuery
2、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;
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;
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 {
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 {
83px;
height: 42px;
text-align: center;
line-height: 42px;
float: left;
cursor: pointer;
}
.nav span {
position: absolute;
top: 0;
left: 0;
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);
}
3、获取元素计算后的样式属性值
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;
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;
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;
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 {
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 {
1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div li {
240px;
height: 400px;
float: left;
}
div ul {
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 {
322px;
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
span {
position: absolute;
top: 0;
right: 0;
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 = [
{
400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
},//0
{
600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
},//1
{
800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
},//2
{
600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
},//3
{
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标签的内容：
4、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>