鼠标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 = ...
随机推荐
- PS设计非常漂亮酷炫的金色字体效果
方法/步骤 1.在PS里面新建一个黑色背景 2.在图层上 写上比较粗一点的字. 3.鼠标右击图层,选择混合模式,进行调整. 选择颜色叠加,注意颜色是深黄色. 4.转移到混合模式里面的渐变叠加,渐变的颜 ...
- 01爬取豆瓣网电影数据进行numpy的练习
level 2:10.案例:编写爬虫爬取豆瓣电影排行榜(电影名称,评分),保存为csv文件 a.用numpy加载csv数据 b.把评分列转换成float64类型 c.计算电影的平均评分 d.求评分最高 ...
- QT 使用QDomDocument::setContent()读XML文件总是返回false
代码: if(!doc.setContent(&file)){读取失败操作}发现总是返回false: 使用如下代码调试: if(!doc.setContent(&file,&s ...
- 【傻瓜式教学】apache2 管理员用户运行（php无权限问题
apache2 管理员用户运行(php无权限问题 代码亲身试过,绝无问题 apache版本: Server version: Apache/2.4.38 (Debian) Server built: ...
- docker kafka 一键搞定
1. docker network create app-tier 2. docker run -d --name zookeeper-server \ --network app-tier \ -e ...
- SDN第三次实验
实验3:OpenFlow协议分析实践 实验目的 能够运用 wireshark 对 OpenFlow 协议数据交互过程进行抓包: 能够借助包解析工具,分析与解释 OpenFlow协议的数据包交互过程与机 ...
- Linux shell 获取路径、文件名、文件后缀
以 make 文件为例: file=/usr/bin/make [root@CentOs7]# echo ${file%*/} /usr/bin/make [root@CentOs7]# echo $ ...
- [转]C#中的自定义事件和EventHandler的使用
自定义事件: 这里主要模拟刷银行卡,手机提示刷卡信息的过程. 声明一个委托类型 public delegate void DelMethod(string bankName,decimal d ...
- WebSocket 使用记录
WebSocket 主要解决的问题是 后端数据更新主动像前端推送数据所需依赖<dependency> <groupId>org.springframework.boot< ...
- oracle 索引创建
--查询表里的索引 select t.*,i.index_type from user_ind_columns t,user_indexes i where t.index_name = i.inde ...