鼠标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 = ...
随机推荐
- linux端口探测
一.常用命令 1.测试端口是否能通(已有服务) 命令:nc -vz -w 2 10.0.1.161 9999 说明:-v可视化,-z扫描时不发送数据,-w超时几秒,后面跟数字 2.测试端口是否能通(没 ...
- pure-ftpd(源码编译)中文编码问题
1.由于版本问题,该软件有些版本不能编译--with-rfc2640选项.解决办法为换成相应低一点的版本 tar -xf pure-ftpd-1.0.42.tar.gz cd pure-ftpd-1. ...
- 微服务笔记之Euraka(2)
Eureka Server启动过程 入口:SpringCloud充分利用了SpringBoot的自动装配的特点 Eureka-server的jar包,发现在MERA-INF下面有配置文件spring. ...
- ubuntu亲测安装opencv和成功解决Makefile:160: recipe for target 'all' failed make: *** [all] Error 2
1.因为项目需要,我安装的是opencv3.0.0,从github上面下载的opencv包 git clone https://github.com/Itseez/opencv.git git clo ...
- Python学习的第二次总结
有限循环 for i in range()# i自动加一 # for语句中若有break被执行,则跟着for后面的else语句就不会被正常执行:反之亦然 for i in range(3) ...
- WPF-窗体移动，最小化，最大化，关闭
1,按钮操作 public MainView() { InitializeComponent(); this.MaxHeight = SystemParameters.PrimaryScreenHei ...
- 【Word】如何批量导出ppt中的备注
[Word]如何批量导出ppt中的备注 文件 | 导出 | 创建讲义 | 备注在幻灯片旁 在word中删除左边两列,复制剩下的表格 | 粘贴-只保留文本
- django 安装cerlery error in anyjson setup command: use_2to3 is invalid.
直接报错 error in anyjson setup command: use_2to3 is invalid. setuptools pip install "setuptools< ...
- Kubernetes DevOps CD工具对比选型
目录 Kubernetes DevOps CD工具对比选型 一.Flux 二.ArgoCD 三.Jenkins X 四.方案比较 Kubernetes DevOps CD工具对比选型 一.Flux 1 ...
- Elasticsearch 实战
需求 假设现在有这么一个需求,系统接了很多的报文,需要提供全文检索,为了简化,报文目前只有类型,流水号,内容这三个字段. 索引设计 建立msg索引,映射规则如下 PUT /msg { "ma ...