参考内容:妙味课堂
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {
/*
onmousedown : 选择元素
onmousemove : 移动元素
onmouseup : 释放元素
*/
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
<body>
<div id="div1"></div>
<div style="width:100px;height:100px;background:green;position:absolute;left:400px;top:200px;"></div>
</body>
//拖拽的原理(2)
<script>
window.onload = function() {
/*
1.拖拽的时候,如果有文字被选中,会产生问题
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
解决:
标准:阻止默认行为
非标准ie:全局捕获
*/
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
//IE浏览器下的函数
if ( oDiv.setCapture ) {
oDiv.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( oDiv.releaseCapture ) {
oDiv.releaseCapture();
}
}
return false;
}
}
</script>
<body>
jafldsfjdsjfkl
<div id="div1"></div>
</body>
//全局捕获
<script>
window.onload = function() {
var aInput = document.getElementsByTagName('input');
aInput[0].setCapture();
/*设置全局捕获 ,当我们给一个元素设置全局捕获以后,那么这个元素就会监听后续发生的所有事件,
当有事件发生的时候,就会被当前设置了全局捕获的元素所触发*/
/*
ie : 有,并且有效果
ff : 有,但是没效果
chrome : 没有
*/
aInput[0].onclick = function() {
alert(1);
}
aInput[1].onclick = function() {
alert(2);
}
}
</script>
<body>
<input type="button" value="按钮一" />
<input type="button" value="按钮二" />
</body>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
#img1 { position: absolute;}
</style>
<script>
window.onload = function() {
/*
1.拖拽的时候,如果有文字被选中,会产生问题
原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文字的效果
解决:
标准:阻止默认行为
非标准ie:全局捕获
拖拽图片会有问题,原因,解决的办法同上
*/
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
oImg.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( oImg.setCapture ) {
oImg.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
oImg.style.left = ev.clientX - disX + 'px';
oImg.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( oImg.releaseCapture ) {
oImg.releaseCapture();
}
}
return false;
}
}
</script>
<body>
jafldsfjdsjfkl
<div id="div1"></div>
<img src="2.jpg" id="img1" />
</body>
//--------------------------------------------------------------
//拖拽的封装
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oImg);
drag(oDiv);
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
}
</script>
//-------------------------------------------------------------
//限制范围的拖拽
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oImg);
drag(oDiv);
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
if ( L < 0 ) {
L = 0;
} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if ( T < 0 ) {
T = 0;
} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
}
</script>
//--------------------------------------------------------------
//磁性吸附
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oImg);
drag(oDiv);
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
if ( L < 100 ) {
L = 0;
} else if ( L > document.documentElement.clientWidth - obj.offsetWidth ) {
L = document.documentElement.clientWidth - obj.offsetWidth;
}
if ( T < 0 ) {
T = 0;
} else if ( T > document.documentElement.clientHeight - obj.offsetHeight ) {
T = document.documentElement.clientHeight - obj.offsetHeight;
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
}
</script>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oDiv);
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
var L1 = L;
var R1 = L + obj.offsetWidth;
var T1 = T;
var B1 = T + obj.offsetHeight;
var L2 = oImg.offsetLeft;
var R2 = L2 + oImg.offsetWidth;
var T2 = oImg.offsetTop;
var B2 = T2 + oImg.offsetHeight;
if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
oImg.src = '1.jpg';
} else {
oImg.src = '2.jpg';
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
}
</script>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev) {
var ev = ev || event;
var disW = this.offsetWidth;
var disX = ev.clientX;
var disL = this.offsetLeft;
var b = '';
if ( disX > disL + disW - 10 ) {
//alert( 'right' );
b = 'right';
}
if ( disX < disL + 10 ) {
//alert( 'left' );
b = 'left';
}
document.onmousemove = function(ev) {
var ev = ev || event;
//左右拉动改变div的宽度
switch( b ) {
case 'left':
oDiv.style.width = disW - ( ev.clientX - disX ) + 'px';
oDiv.style.left = disL + ( ev.clientX - disX ) + 'px';
break;
case 'right':
oDiv.style.width = disW + ( ev.clientX - disX ) + 'px';
break;
}
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
//模拟滚动条
//基本结构
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
oDiv2.onmousedown = function(ev) {
var ev = ev || event;
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
oDiv2.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
//---------------------------------------------------------------
//限定滚动范围
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
oDiv2.onmousedown = function(ev) {
var ev = ev || event;
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
var T = ev.clientY - disY;
if ( T < 0 ) {
T = 0;
} else if ( T > iMaxTop ) {
T = iMaxTop;
}
oDiv2.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
//----------------------------------------------------------------
//模拟滚动条控制其它元素的变化
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 500px; height: 0; background: green; position: absolute; left: 50px; top: 10px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
oDiv2.onmousedown = function(ev) {
var ev = ev || event;
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
var T = ev.clientY - disY;
if ( T < 0 ) {
T = 0;
} else if ( T > iMaxTop ) {
T = iMaxTop;
}
oDiv2.style.top = T + 'px';
var iScale = T / iMaxTop;
document.title = iScale;
oDiv3.style.height = 500 * iScale + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
//--------------------------------------------------------------
模拟滚动条控制内容滚动
<style>
#div1 {width: 30px; height: 500px; background: black; position: absolute; left: 10px; top: 10px;}
#div2 {width: 30px; height: 30px; background: red; position: absolute; left: 0; top: 0;}
#div3 {width: 498px; height: 498px; border: 1px solid green; position: absolute; left: 50px; top: 10px;}
#div4 { position: absolute; left: 0; top: 0;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oDiv4 = document.getElementById('div4');
var iMaxTop = oDiv1.offsetHeight - oDiv2.offsetHeight;
oDiv2.onmousedown = function(ev) {
var ev = ev || event;
var disY = ev.clientY - this.offsetTop;
document.onmousemove = function(ev) {
var ev = ev || event;
var T = ev.clientY - disY;
if ( T < 0 ) {
T = 0;
} else if ( T > iMaxTop ) {
T = iMaxTop;
}
oDiv2.style.top = T + 'px';
var iScale = T / iMaxTop;
document.title = iScale;
oDiv4.style.top = (oDiv3.clientHeight - oDiv4.offsetHeight) * iScale + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
}
return false;
}
}
</script>
<style>
#div1 {width: 100px; height: 100px; background: red;}
</style>
<script>
/*
鼠标滚轮事件
*/
window.onload = function() {
var oDiv = document.getElementById('div1');
/*
ie/chrome : onmousewheel
event.wheelDelta
上:120
下:-120
firefox : DOMMouseScroll 必须用addEventListener
event.detail
上:-3
下:3
return false阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();
*/
oDiv.onmousewheel = fn;
if (oDiv.addEventListener) {
oDiv.addEventListener('DOMMouseScroll', fn, false);
}
function fn(ev) {
var ev = ev || event;
//alert( ev.wheelDelta );
//alert(ev.detail)
var b = true;
if (ev.wheelDelta) {
b = ev.wheelDelta > 0 ? true : false;
} else {
b = ev.detail < 0 ? true : false;
}
//alert(b);
if ( b ) {
this.style.height = this.offsetHeight - 10 + 'px';
} else {
this.style.height = this.offsetHeight + 10 + 'px';
}
if (ev.preventDefault) {
ev.preventDefault();
}
return false;
}
/*右键菜单
* document.oncontextmenu = function() {
return false;
}*/
/*document.attachEvent('oncontextmenu', function() {
return false;
});*/
/*document.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
//return false;
});*/
}
</script>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
//cookie
<script>
/*
cookie : 存储数据,当用户访问了某个网站(网页)的时候,我们就可以通过cookie来像访问者电脑上存储数据
1.不同的浏览器存放的cookie位置不一样,也是不能通用的
2.cookie的存储是以域名形式进行区分的
3.cookie的数据可以设置名字的
4.一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
5.每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样
我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
cookie默认是临时存储的,当浏览器关闭进程的时候自动销毁
*/
//document.cookie = '名字=值';
/*document.cookie = 'username=leo';
document.cookie = 'age=32';*/
//document.cookie = '名称=值;expires=' + 字符串格式的时间;
var oDate = new Date();
oDate.setDate( oDate.getDate() + 5 );
//alert(typeof oDate)
//alert(typeof oDate.toGMTString());
//内容最好编码存放,encodeURI
//alert( encodeURI('你好') );
//alert( decodeURI('%E4%BD%A0%E5%A5%BD') )
/*document.cookie = 'username='+ encodeURI('leo\n你好') +';expires=' + oDate.toGMTString();
document.cookie = 'age=32';*/
//document.cookie
//alert(decodeURI(document.cookie)); //username=leo; age=32
/*document.cookie = 'username=leo;expires=' + oDate.toGMTString();
document.cookie = 'age=32';
*/
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split('=');
if ( arr2[0] == key ) {
return decodeURI(arr2[1]);
}
}
}
function removeCookie(key) {
setCookie(key, '', -1);
}
setCookie('sex','男', 10);
alert( getCookie('sex') );
/*removeCookie('username');
removeCookie('age');
removeCookie('sex');*/
alert(document.cookie)
</script>
<script>
window.onload = function() {
var oUsername = document.getElementById('username');
var oLogin = document.getElementById('login');
var oDel = document.getElementById('del');
if ( getCookie('username') ) {
oUsername.value = getCookie('username');
}
oLogin.onclick = function() {
alert('登陆成功');
setCookie('username', oUsername.value, 5);
}
oDel.onclick = function() {
removeCookie('username');
oUsername.value = '';
}
}
function setCookie(key, value, t) {
var oDate = new Date();
oDate.setDate( oDate.getDate() + t );
document.cookie = key + '=' + value + ';expires=' + oDate.toGMTString();
}
function getCookie(key) {
var arr1 = document.cookie.split('; ');
for (var i=0; i<arr1.length; i++) {
var arr2 = arr1[i].split('=');
if ( arr2[0] == key ) {
return decodeURI(arr2[1]);
}
}
}
function removeCookie(key) {
setCookie(key, '', -1);
}
</script>
<body>
<input type="text" id="username" />
<input type="button" value="登陆" id="login" />
<input type="button" value="删除" id="del" />
</body>