HuairongChen
鼠标JS

1.鼠标按住拖动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="rec" style="position:absolute;left: 100px;top: 100px; width: 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                 width:1000px;
 11                 height:1000px;
 12                 border:1px solid gray;
 13             }
 14             .wrap>div{
 15                 float:left;
 16                 }
 17                 .wrap>#p{
 18                     width:80%;
 19                     height:1000px; 
 20                     position:relative;
 21                     overflow:auto;
 22                     border:1px solid gray;
 23                 }
 24                 div.d{
 25                     width:19%;
 26                     height:1000px;
 27                      
 28                 }
 29     #dd{
 30     width: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>

 

posted on 2021-08-10 10:18  HuairongChen  阅读(27)  评论(0)  编辑  收藏  举报

Copyright © 2024 HuairongChen
Powered by .NET 9.0 on Kubernetes Powered By博客园