鼠标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>
鼠标JS的更多相关文章
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- js设置鼠标悬停改变背景色
看了网上那么多的js鼠标悬停时事件,大多数的,说了那么多话,也没解决什么问题,现在直接贴上代码,以供参考 html: <div id="sign">this is te ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
- 【前端】js代码模拟用户键盘鼠标输入
js代码模拟用户键盘鼠标输入 原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEve ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- 【JS】键盘鼠标事件
一,键盘 keydown 表示按下键盘 keypress 表示按下键盘 keyup 表示键盘弹起 这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面 先后顺序: ...
- js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
- js鼠标经过文字滚动，移开还原
不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...
随机推荐
- 转载--文章（感谢米粒儿博主分享） 关于 Json.net序列化时间问题
http://www.cnblogs.com/lxsweat/p/4372508.html 上代码 其中的使用方法和UserInfo实体对象就不贴代码了. /// <summary> // ...
- MAMP PRO 使用指南 （配置nginx 重写）
https://sawlove.com/mamp-pro-use-for-wp.html 1 location / { 2 if (!-e $request_filename) { 3 rewrite ...
- .NET Core基础：白话管道中间件
在Asp.Net Core中,管道往往伴随着请求一起出现.客户端发起Http请求,服务端去响应这个请求,之间的过程都在管道内进行. 举一个生活中比较常见的例子:旅游景区. 我们都知道,有些景区大门离景 ...
- Linux 第六节( 磁盘系统，挂载，分区，格式化)
/dev/st0 磁带机 /dev/lp 打印机 /dev/cdrom 光驱 /dev/sd scsi接口硬盘 sata接口硬盘 U盘(sda,sdb,sdc 分别对应 ...
- 模拟ATM系统 —— 用户注册、登录和用户操作页设计 、查询账号、退出账号功能
开发工具:idea 一.项目步骤: 1.系统准备.首页设计 2.用户开户功能 3.用户登录功能 4.用户操作页设计 .查询账号.退出账号功能 5.用户存款功能 6.用户取款功能 7.用户转账功能 8. ...
- VUE3+VITE 常见问题解决
reactive解构最深的一层,失去响应性问题 pinia创建的store,使用结构失去响应性 reactive包裹后的对象 重新赋值失去响应性 无法动态引入图片 在computed中传参数 vue3 ...
- 使用Android studio配置软件签名，并在车机安装
系统级APP,可在Androidmanifest.xml中配置属性,并使用系统级签名. 1. 签名方式 1.1 bulid.gradle(:app)中添加签名信息 1.2 使用Android stud ...
- 一些sql查询的case
1.单列去重,输出去重后条目数量 select count(distinct(`id`)) from student; 2.根据分数段统计数据条目:利用case when selectcount(ca ...
- Docker CLI docker buildx build 常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...
- Nlog连接密码隐藏