鼠标JS
2024-10-21 11:30:02
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>
最新文章
- nexus的使用
- SVN 集中式版本控制软件
- 把验证码和生成时间负值给$_SESSION[vCode]生成图像给浏览器
- C++设计模式-Builder建造者模式
- PHP随笔
- 对象属性操作－包含kvc---ios
- MVC基础知识-持续更新....
- [Angular 2] ng-control & ng-control-group
- 实验七：Linux内核如何装载和启动一个可执行程序
- canvas 基础知识
- abap alv multiple header using write
- 循序渐进之Spring AOP(2) - 基本概念
- nginx proxy_pass 与 rewrite 简记
- 手机APP应用外网访问本地WEB应用
- Spring Boot 系列（七）Swagger2-生成RESTful接口文档
- 论文阅读（XiangBai——【AAAI2017】TextBoxes_A Fast Text Detector with a Single Deep Neural Network）
- Elasticsearch -- Head插件安装
- 谈谈maven多模块
- PHP和JavaScript将字符串转换为数字string2int
- makefile中的wildcard和notdir和patsubst