案例：图片跟着鼠标移动，非所有浏览器兼容的。
document.onmousemove=function (e) {
function getScroll() {
return {
left:window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0,
top:window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0
}
}
//可视区域横坐+向左卷曲出去的横坐标
my$("im").style.left=window.event.clientX+getScroll().left+"px";
//可视区域纵坐标+向上卷曲出去的纵坐标
my$("im").style.top=window.event.clientY+getScroll().top+"px";
};案例：图片跟着鼠标飞，最终版
//图片跟着鼠标飞,可以在任何的浏览器中实现
//window.event和事件参数对象e的兼容
//clientX和clientY单独的使用的兼容代码
//scrollLeft和scrollTop的兼容代码
//pageX,pageY和clientX+scrollLeft 和clientY+scrollTop
var evt={
//window.event和事件参数对象e的兼容
getEvent:function (evt) {
return window.event||evt;
},
//可视区域的横坐标的兼容代码
getClientX:function (evt) {
return this.getEvent(evt).clientX;
},
//可视区域的纵坐标的兼容代码
getClientY:function (evt) {
return this.getEvent(evt).clientY;
},
//页面向左卷曲出去的横坐标
getScrollLeft:function () {
return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
},
//页面向上卷曲出去的纵坐标
getScrollTop:function () {
return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
},
//相对于页面的横坐标(pageX或者是clientX+scrollLeft)
getPageX:function (evt) {
return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
},
//相对于页面的纵坐标(pageY或者是clientY+scrollTop)
getPageY:function (evt) {
return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
}
};
//最终的代码
document.onmousemove=function (e) {
my$("im").style.left=evt.getPageX(e)+"px";
my$("im").style.top=evt.getPageY(e)+"px";
};案例：点击弹出登录框、可关闭、可拖拽(样式太多，先忽略)
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div><!--登录框-->
<div id="bg" class="login-bg"></div><!--遮挡层-->
<script src="common.js"></script>
<script>
//获取超链接,注册点击事件,显示登录框和遮挡层
my$("link").onclick = function () {
my$("login").style.display = "block";
my$("bg").style.display = "block";
};
//获取关闭,注册点击事件,隐藏登录框和遮挡层
my$("closeBtn").onclick = function () {
my$("login").style.display = "none";
my$("bg").style.display = "none";
};
//按下鼠标,移动鼠标,移动登录框
my$("title").onmousedown = function (e) {
//获取此时的可视区域的横坐标-此时登录框距离左侧页面的横坐标
var spaceX = e.clientX - my$("login").offsetLeft;
var spaceY = e.clientY - my$("login").offsetTop;
//移动的事件
document.onmousemove = function (e) {
//新的可视区域的横坐标-spaceX====>新的值--->登录框的left属性
var x = e.clientX - spaceX+250;
var y = e.clientY - spaceY-140;
my$("login").style.left = x + "px";
my$("login").style.top = y + "px";
}
};
document.onmouseup=function () {
document.onmousemove=null;//当鼠标抬起的时候,把鼠标移动事件干掉
};案例：阻止超链接跳转
<a href="http://www.baidu.com" id="ak">百度</a>
<script src="common.js"></script>
<script>
my$("ak").onclick=function (e) {
alert("被点了");
return false;
//window.event.preventDefault();//阻止浏览器的默认的事件
};
</script>案例：手动实现滚动条
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 400px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
}
.content{
padding: 5px 18px 5px 5px;
}
.scroll{
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar{
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius:10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
床前明月光，疑似地上霜。举头望明月，低头思故乡。
...n行...
</div>
<div id="scroll" class="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
var box=my$('box');
var content=my$('content');
var scroll=my$('scroll');
var bar=my$('bar');
按比例来显示滚动条
var height=scroll.offsetHeight*box.offsetHeight/content.offsetHeight;
bar.style.height=height+'px';
bar.onmousedown=function (e) {
准确获取鼠标的点击的位置放置发生跳位
var spaceY=e.clientY-bar.offsetTop;
document.onmousemove=function (e) {
var y=e.clientY-spaceY;
y=y<0?0:y;
y=y>scroll.offsetHeight-bar.offsetHeight?scroll.offsetHeight-bar.offsetHeight:y;
bar.style.top=y+'px';
文字不被选中的三目运算符
window.getSelection?window.getSelection().removeAllRanges():document.getSelection().empty();
文字div的移动距离=滚动条的移动距离*文字div的最大移动距离/滚动条最大的移动距离
var moveY=y*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
content.style.marginTop=-moveY+'px';
}
}
document.onmouseup=function(){
document.onmousemove=null;
}
</script>案例：控制元素的显示和隐藏
<style>
div{
width: 200px;
height: 200px;
border: 1px solid green;
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>哈哈
<script>
function my$(id) {
return document.getElementById(id);
}
my$('btn').onclick=function () {
my$('dv').style.display='none'; 不占位
my$('dv').style.visibility='hidden';占位
my$('dv').style.opacity=0;占位
my$('dv').style.height='0px'; 这行与下一行共同实现隐藏，不占位
my$('dv').style.border='0px solid red';
}
</script>案例：各行变色
<script>
function my$(id) {
return document.getElementById(id);
}
var trs=my$('j_tb').getElementsByTagName('tr');
for(var i=0;i<trs.length;i++){
trs[i].style.backgroundColor=(i%2==0?'red':'yellow');
trs[i].onmouseover=mouseoverHandler;
trs[i].onmouseout=mouseoutHandler;
}
var lastColor='';
function mouseoverHandler() {
lastColor=this.style.backgroundColor;
this.style.backgroundColor='green';
}
function mouseoutHandler() {
this.style.backgroundColor=lastColor;
}
</script>案例：tab切换
#list li{
list-style-type: none;
width: 80px;
height: 30px;
line-height: 30px;
background-color: beige;
text-align: center;
float: left;
margin-left: 5px;
}
#list li.current{
background-color: burlywood;
}
#list li a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul id="list">
<li class="current"><a href="http://www.baidu.com">首页</a></li>
...很多li...
</ul>
</div>
<script src="common.js"></script>
<script>
function my$(id) {
return document.getElementById(id);
}
var list=my$('list').getElementsByTagName('li');
for(var i=0;i<list.length;i++){
var aObj=getFirstElement(list[i]);
aObj.onclick=function () {
for(var j=0;j<list.length;j++){
list[j].removeAttribute('class');
}
this.parentNode.className='current';
return false;
}
}
</script>案例：字符串的合并
<input type="button" value="合并字符串" id="btn">
<input type="text" value="">
<script src="common.js"></script>
<script>
function my$(id) {
return document.getElementById(id);
}
my$('btn').onclick=function () {
var arr=[];
var inputArr=document.getElementsByTagName('input');
for(var i=0;i<inputArr.length;i++){
if(inputArr[i].type!='button'){
arr.push(inputArr[i].value);
}
}
console.log(arr.join('|'));
}
</script>案例：放大镜
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask{
width: 175px;
height: 175px;
background:rgba(255,255,0,0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small{
position: relative;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="images/small.png" width="350">
<div class="mask"></div>
</div>
<div class="big">
<img src="images/big.jpg" width="800">
</div>
</div>
<script src="common.js"></script>
<script>
function my$(id) {
return document.getElementById(id);
}
var box=my$('box');
var small=box.children[0];
var big=box.children[1];
var mask=small.children[1];
var bigImg=big.children[0];
box.onmouseover=function () {
mask.style.display='block';
big.style.display='block';
}
box.onmouseout=function () {
mask.style.display='none';
big.style.display='none';
}
small.onmousemove=function (e) {
var x=e.clientX-mask.offsetWidth/2;
var y=e.clientY-mask.offsetHeight/2;
主要是margin的100px的问题
x=x-100;
y=y-100;
设置边界值
x=x<0?0:x;
y=y<0?0:y;
x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
mask.style.left=x+'px';
mask.style.top=y+'px';
通过比例来显示大图的显示
var maxX=bigImg.offsetWidth-big.offsetWidth;
var bigImgMoveX=x*maxX/(small.offsetWidth-mask.offsetWidth);
var bigImgMoveY=y*maxX/(small.offsetWidth-mask.offsetWidth);
bigImg.style.marginLeft=-bigImgMoveX+'px';
bigImg.style.marginTop=-bigImgMoveY+'px';
}
</script>