1.鼠标按住拖动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="rec" style="position:absolute;left: 100px;top: 100px; 50px;height: 50px;background: red;"></div>
</body>
<script type="text/javascript">
//??div??
var rec = document.getElementById("rec")
var down = false;
var dx = 0;
var dy = 0;
var sx = 0;
var sy = 0;
document.onmousemove = function(e){
if (down) {
var ev = e || event;
console.log(ev.clientY)
rec.style.top = ev.clientY - (dy - sy) + 'px';
rec.style.left = ev.clientX - (dx - sx) + 'px';
}
}
rec.onmousedown = function(){
dx = event.clientX;
dy = event.clientY;
sx = parseInt(rec.style.left);
sy = parseInt(rec.style.top);
if (!down) {
down = true;
}
}
document.onmouseup = function(){
if (down) {
down = false;
}
}
</script>
</html>
2。跟随鼠标移动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Move</title> 6 <script type="text/javascript"> 7 function move(keynum) { 8 //?????? 9 var w=screen.availWidth; 10 //?????? 11 var h=screen.availHeight 12 var d = document.getElementById("dv"); 13 //?????,?????????? 14 var speed=Math.floor(Math.random()*100); 15 16 switch (keynum) { 17 case 65://a--???? 18 if(d.offsetLeft<5){ 19 d.style.left=w/2+"px"; 20 }else{ 21 d.style.left = d.offsetLeft - speed + "px"; 22 } 23 break; 24 case 68://d---??? 25 if(d.offsetLeft>screen.w-speed){ 26 d.style.left=w/2+"px"; 27 }else{ 28 d.style.left = d.offsetLeft + speed + "px"; 29 } 30 break; 31 case 87://w---???? 32 if(d.offsetTop<speed){ 33 d.style.top=h/2+"px"; 34 }else{ 35 d.style.top = d.offsetTop - speed + "px"; 36 } 37 break; 38 case 83://s---???? 39 if(d.offsetTop>h-speed){ 40 d.style.top=h/2+"px"; 41 }else{ 42 d.style.top = d.offsetTop + speed + "px"; 43 } 44 break; 45 } 46 } 47 function keyChange(e){ 48 var keynum; 49 if (window.event) // IE 50 { 51 keynum = e.keyCode 52 } else if (e.which) // Netscape/Firefox/Opera 53 { 54 keynum = e.which 55 } 56 move(keynum); 57 } 58 //??????? 59 document.onmousemove=function showxy(e) { 60 if(!e){ 61 e = window.event; 62 } 63 var d = document.getElementById("dv"); 64 d.style.left=e.clientX+"px"; 65 d.style.top=e.clientY+"px"; 66 //alert(e.clientX+","+e.clientY); 67 } 68 //?????? 69 /* document.?nm?used?wn=function showxy(e) { 70 var d = document.getElementById("dv"); 71 d.style.left=e.clientX+"px"; 72 d.style.top=e.clientY+"px"; 73 }*/ 74 </script> 75 </head> 76 <body onkeydown="keyChange(event)"> 77 <div style="position: absolute; left: 100px; top: 100px;" id="dv"> 78 <img src="ball.png" width="50px" height="50px" /> 79 </div> 80 </body> 81 </html>
3.缩放，旋转，移动
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>Page Title</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <style> 8 .wrap{ 9 margin: 0 auto; 10 1000px; 11 height:1000px; 12 border:1px solid gray; 13 } 14 .wrap>div{ 15 float:left; 16 } 17 .wrap>#p{ 18 80%; 19 height:1000px; 20 position:relative; 21 overflow:auto; 22 border:1px solid gray; 23 } 24 div.d{ 25 19%; 26 height:1000px; 27 28 } 29 #dd{ 30 100px; 31 height:100px; 32 left:300px; 33 top:300px; 34 position:absolute; 35 background-color:#c81623; 36 } 37 </style> 38 <script> 39 onload=function(){ 40 var div=document.getElementById("dd"); 41 var sf=document.getElementById("sf"); 42 var ydx=document.getElementById("ydx"); 43 var ydy=document.getElementById("ydy"); 44 var p=document.getElementById("p"); 45 sf.value=parseFloat(getStyle(div,"width"))*100/500; 46 ydx.value=parseFloat(getStyle(div,"left"))*100/parseFloat(getStyle(p,"width")); 47 ydy.value=parseFloat(getStyle(div,"top"))*100/parseFloat(getStyle(p,"height")); 48 } 49 var rotate=function(obj){ 50 var div=document.getElementById("dd"); 51 div.style['transform'] = div.style['-webkit-transform'] = 'rotate(' + obj.value*360*0.01 + 'deg)'; 52 } 53 var scale=function(obj,w){ 54 var div=document.getElementById("dd"); 55 var h=parseFloat(getStyle(div,"height")); 56 var ww=parseFloat(getStyle(div,"width")); 57 div.style.height=div.style.width=w*0.01*obj.value +"px"; 58 var lef=parseFloat(getStyle(div,"left")); 59 var tp = parseFloat(getStyle(div,"top")); 60 div.style.left=lef-(parseFloat(div.style.width)-ww)/2+"px"; 61 div.style.top=tp-(parseFloat(div.style.height)-h)/2+"px"; 62 } 63 64 var movex=function(obj,w){ 65 var div=document.getElementById("dd"); 66 var p=document.getElementById("p"); 67 div.style.left=obj.value*0.01*(parseFloat(getStyle(p,"width"))-parseFloat(getStyle(div,"width")))+"px"; 68 } 69 70 var movey=function(obj,w){ 71 debugger 72 var div=document.getElementById("dd"); 73 var p=document.getElementById("p"); 74 div.style.top=obj.value*0.01*(parseFloat(getStyle(p,"height"))-parseFloat(getStyle(div,"height")))+"px"; 75 } 76 77 var getStyle=function(obj,attr){ 78 if(obj.currentStyle){ 79 return obj.currentStyle[attr]; 80 }else if(window.getComputedStyle){ 81 var styleVal = window.getComputedStyle(obj, null)[attr] 82 ? window.getComputedStyle(obj, null)[attr] : 83 window.getComputedStyle(obj, null).getPropertyValue(attr); 84 return styleVal; 85 } 86 } 87 </script> 88 </head> 89 90 <body> 91 <div class="wrap"> 92 <div id="p"> 93 <div id="dd"></div> 94 </div> 95 <div class="d"> 96 rotating: 97 <input type="range" id="xz" max=100 min=0 value=0 oninput="rotate(this)" /> 98 zoom: 99 <input type="range" id="sf" max=100 min=0 value=0 oninput="scale(this,500)" /> 100 moveX: 101 <input type="range" id="ydx" max=100 min=0 value=0 oninput="movex(this)" /> 102 moveY: 103 <input type="range" id="ydy" max=100 min=0 value=0 oninput="movey(this)"/> 104 </div> 105 </div> 106 </body> 107 108 </html>
4.流星雨
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="zh-CN"> 3 4 <head> 5 <title>???</title> 6 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 7 <meta http-equiv="content-language" content="zh-CN"> 8 <style type="text/css"> 9 body { 10 margin: 0; 11 padding: 0; 12 background-color: #000000; 13 font-size: 0; 14 overflow: hidden 15 } 16 17 div { 18 margin: 0; 19 padding: 0; 20 position: absolute; 21 font-size: 0; 22 overflow: hidden 23 } 24 25 canvas { 26 background-color: #000000; 27 overflow: hidden 28 } 29 </style> 30 </head> 31 <script type="text/javascript"> 32 function $i(id) { return document.getElementById(id); } 33 function $r(parent, child) { (document.getElementById(parent)).removeChild(document.getElementById(child)); } 34 function $t(name) { return document.getElementsByTagName(name); } 35 function $c(code) { return String.fromCharCode(code); } 36 function $h(value) { return ('0' + Math.max(0, Math.min(255, Math.round(value))).toString(16)).slice(-2); } 37 function _i(id, value) { $t('div')[id].innerHTML += value; } 38 function _h(value) { return !hires ? value : Math.round(value / 2); } 39 function get_screen_size() { var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; return Array(w, h); } 40 var url = document.location.href; var flag = true; var test = true; 41 var n = parseInt((url.indexOf('n=') != -1) ? url.substring(url.indexOf('n=') + 2, ((url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('n=') + 2 + (url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') : url.length) : 512); 42 var w = 0; var h = 0; var x = 0; var y = 0; var z = 0; var star_color_ratio = 0; var star_x_save, star_y_save; var star_ratio = 256; var star_speed = 4; var star_speed_save = 0; var star = new Array(n); var color; var opacity = 0.1; 43 var cursor_x = 0; var cursor_y = 0; var mouse_x = 0; var mouse_y = 0; var canvas_x = 0; var canvas_y = 0; var canvas_w = 0; var canvas_h = 0; var context; var key; var ctrl; var timeout; var fps = 0; function init() { var a = 0; for (var i = 0; i < n; i++) { star[i] = new Array(5); star[i][0] = Math.random() * w * 2 - x * 2; star[i][1] = Math.random() * h * 2 - y * 2; star[i][2] = Math.round(Math.random() * z); star[i][3] = 0; star[i][4] = 0; } 44 var starfield = $i('starfield'); starfield.style.position = 'absolute'; starfield.width = w; starfield.height = h; context = starfield.getContext('2d'); context.fillStyle = 'rgb(0,0,0)'; context.strokeStyle = 'rgb(255,255,255)'; 45 var adsense = $i('adsense'); adsense.style.left = Math.round((w - 728) / 2) + 'px'; adsense.style.top = (h - 15) + 'px'; adsense.style.width = 728 + 'px'; adsense.style.height = 15 + 'px'; adsense.style.display = 'block'; } function anim() { mouse_x = cursor_x - x; mouse_y = cursor_y - y; context.fillRect(0, 0, w, h); for (var i = 0; i < n; i++) { test = true; star_x_save = star[i][3]; star_y_save = star[i][4]; star[i][0] += mouse_x >> 4; if (star[i][0] > x << 1) { star[i][0] -= w << 1; test = false; } if (star[i][0] < -x << 1) { star[i][0] += w << 1; test = false; } star[i][1] += mouse_y >> 4; if (star[i][1] > y << 1) { star[i][1] -= h << 1; test = false; } if (star[i][1] < -y << 1) { star[i][1] += h << 1; test = false; } star[i][2] -= star_speed; if (star[i][2] > z) { star[i][2] -= z; test = false; } if (star[i][2] < 0) { star[i][2] += z; test = false; } star[i][3] = x + (star[i][0] / star[i][2]) * star_ratio; star[i][4] = y + (star[i][1] / star[i][2]) * star_ratio; if (star_x_save > 0 && star_x_save < w && star_y_save > 0 && star_y_save < h && test) { context.lineWidth = (1 - star_color_ratio * star[i][2]) * 2; context.beginPath(); context.moveTo(star_x_save, star_y_save); context.lineTo(star[i][3], star[i][4]); context.stroke(); context.closePath(); } } timeout = setTimeout('anim()', fps); } function move(evt) { evt = evt || event; cursor_x = evt.pageX - canvas_x; cursor_y = evt.pageY - canvas_y; } function key_manager(evt) { evt = evt || event; key = evt.which || evt.keyCode; switch (key) { case 27: flag = flag ? false : true; if (flag) { timeout = setTimeout('anim()', fps); } else { clearTimeout(timeout); } break; case 32: star_speed_save = (star_speed != 0) ? star_speed : star_speed_save; star_speed = (star_speed != 0) ? 0 : star_speed_save; break; case 13: context.fillStyle = 'rgba(0,0,0,' + opacity + ')'; break; } top.status = 'key=' + ((key < 100) ? '0' : '') + ((key < 10) ? '0' : '') + key; } function release() { switch (key) { case 13: context.fillStyle = 'rgb(0,0,0)'; break; } } function mouse_wheel(evt) { evt = evt || event; var delta = 0; if (evt.wheelDelta) { delta = evt.wheelDelta / 120; } else if (evt.detail) { delta = -evt.detail / 3; } star_speed += (delta >= 0) ? -0.2 : 0.2; if (evt.preventDefault) evt.preventDefault(); } function start() { resize(); anim(); } function resize() { w = parseInt((url.indexOf('w=') != -1) ? url.substring(url.indexOf('w=') + 2, ((url.substring(url.indexOf('w=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('w=') + 2 + (url.substring(url.indexOf('w=') + 2, url.length)).indexOf('&') : url.length) : get_screen_size()[0]); h = parseInt((url.indexOf('h=') != -1) ? url.substring(url.indexOf('h=') + 2, ((url.substring(url.indexOf('h=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('h=') + 2 + (url.substring(url.indexOf('h=') + 2, url.length)).indexOf('&') : url.length) : get_screen_size()[1]); x = Math.round(w / 2); y = Math.round(h / 2); z = (w + h) / 2; star_color_ratio = 1 / z; cursor_x = x; cursor_y = y; init(); } document.onmousemove = move; document.onkeypress = key_manager; document.onkeyup = release; document.onmousewheel = mouse_wheel; if (window.addEventListener) window.addEventListener('DOMMouseScroll', mouse_wheel, false); 46 </script> 47 48 <body onload="start()" onresize="resize()" onorientationchange="resize()" 49 onmousedown="context.fillStyle='rgba(0,0,0,'+opacity+')'" onmouseup="context.fillStyle='rgb(0,0,0)'"> 50 <canvas id="starfield" style="background-color:#000000"></canvas> 51 <div id="adsense" style="position:absolute;background-color:transparent;display:none"> </div> 52 </body> 53 54 </html>