发布于 2017-04-13 11:57:11 | 174 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程,程序狗速度看过来!
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
要实现的拖动效果:鼠标左键在窗口上方的标题栏上按下,同时移动鼠标,窗口跟着移动。
窗口:
<div id="win">
<div id="win_header"></div>
</div>
#win {
position:absolute;
width:480px;
height:320px;
background-color:#d4d4d4;
border: 1px solid #4d4d4d;
}
#win_header {
width:480px;
height:48px;
background-color:#4d4d4d;
cursor:move;
}
function $id(id) {
return document.getElementById(id);
}
var win = $id("win");
var header = $id("win_header");
var pos =function(x, y) {
this.x = x;
this.y = y;
};
var originalpos = new pos(20, 20);
var oldmouse =new pos(0, 0);
win.style.left = originalpos.x + "px";
win.style.top = originalpos.y + "px";
function bind(ev, func) {
if(isIE) {
header.attachEvent("on" + ev, func);
} else {
header.addEventListener(ev, func, false);
}
}
function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
return true;
else
return false;
} else {
if(btn == 0)
return true;
else
return false;
}
}
function over(e){
header.style.backgroundColor = "#5d5d5d";
}
function out(e) {
header.style.backgroundColor = "#4d4d4d";
// 有时候鼠标会在未松开的情况下离开窗口,
// 此时通过触发鼠标的松开事件来使窗口脱离鼠标的控制
up(e);
}
function down(e) {
e = e || event;
if(!isLeftButton(e.button))
return;
mousedown = true;
oldmouse.x = e.clientX;
oldmouse.y = e.clientY;
oldpos.x = parseInt(win.style.left.replace("px", ""));
oldpos.y = parseInt(win.style.top.replace("px", ""));
}
function up(e) {
if(!isLeftButton(e.button))
return;
mousedown = false;
}
function move(e) {
if(!isLeftButton(e.button))
return;
if(mousedown) {
e =e || event;
newpos.x = e.clientX - oldmouse.x;
newpos.y = e.clientY - oldmouse.y
win.style.left = (oldpos.x + newpos.x) + "px";
win.style.top = (oldpos.y + newpos.y) + "px";
}
}
bind("mouseover", over);
bind("mouseenter", over);
bind("mouseout", out);
bind("mouseleave", out);
bind("blur", out);
bind("mousedown", down);
bind("mouseup", up);
bind("mousemove", move);