學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件
更新時間：2015年12月25日 09:05:17 作者：微宇宙
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件，為大家分享了一個簡單的鼠標(biāo)模擬案例，感興趣的小伙伴們可以參考一下
本文為大家分享了一個簡單的鼠標(biāo)模擬案例，供大家參考，具體實現(xiàn)內(nèi)容如下
如何實現(xiàn)捕抓鼠標(biāo)事件，當(dāng)鼠標(biāo)滑動時，獲取當(dāng)前鼠標(biāo)的坐標(biāo)，接著在一個透明區(qū)域里綁定捕抓的位移，這樣就能在模擬的透明區(qū)域里實現(xiàn)鼠標(biāo)滑動的模型。
效果圖：
HTML代碼：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link rel="stylesheet" href="css/new.css"> </head> <body> <div class="main"> <div class="content"> <div class="content-nav-top"> <span onclick = 'koringz.createclick1(0)'>默認(rèn)</span> <span onclick = 'koringz.createclick1(50)'>圓</span> </div> <div class="content-nav-left"> <span onclick = 'koringz.createclick2 (0.25) '>0.25</span> <span onclick = 'koringz.createclick2 (0.5) '>0.5</span> <span onclick = 'koringz.createclick2 (0.75)'>0.75</span> <span onclick = 'koringz.createclick2 (1) '>1</span> </div> <div class="box">鼠標(biāo)感應(yīng)器(the mouse sensor)</div> <div class="block"> <div class='block_case'></div> </div> </div> </div> <script type="text/javascript" src="js/demo.min/demo.min.js"></script> </body> </html>
CSS代碼：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
.main{
position: relative;
margin: 0 auto;
height: 100%;
background-color: rgb(48, 70, 82)
}
.main .content{
position:absolute;
display: inline-block;
top:50%;
left:50%;
margin-left: -300px;
margin-top: -150px;
width: 600px;
height: 300px;
line-height: 300px;
/*overflow: hidden;*/
background: radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
background: -webkit-radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
box-shadow: 2px 3px 8px rgba(67, 50, 124 ,.6),0px 0px 8px rgba(67, 50, 124 ,.6);
}
.main .content .content-nav-top{
display: none;
position: absolute;
margin-top: -50px;
height: 50px;
width: 300px;
}
.main .content .content-nav-top >span{
display: block;
float: left;
font-size: 16px;
font-weight: normal;
margin-right:1px;
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgba(251, 214, 146,.3);
box-shadow: 0px 4px 13px rgb(222,222,222,1);
cursor: pointer;
}
.main .content .content-nav-top >span:nth-child(1){
border-radius:0 ;
}
.main .content .content-nav-top >span:nth-child(2){
border-radius:50% ;
}
.main .content .content-nav-top >span:nth-child(3){
border-radius:0;
}
.main .content .content-nav-top >span:nth-child(4){
border-radius: 50% ;
}
.main .content .content-nav-left{
display: none;
position: absolute;
margin-left: -50px;
width: 50px;
height: 300px;
}
.main .content .content-nav-left >span{
display: block;
font-size: 16px;
font-weight: normal;
margin-bottom:1px;
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgb(85, 145, 140);
box-shadow: 0px 4px 13px rgb(222,222,222,1);
border-radius:50% 0 0 50% ;
cursor: pointer;
}
.box{
position: relative;
float: left;
width: 49.9%;
height: 100%;
border-right-style: solid;
border-right-width: 1px;
border-right-color: rgba(211,211,211,.5);
color:rgb(99, 84, 168);
text-shadow: 0px 1px 0px #888,1px 0px 0px #888,0px 0px 1px #888;
}
.block{
float: right;
width: 50%;
height: 100%;
}
JS代碼:
var koringz = (function(){
var x,
y,
getmain,
getcontent,
getbox,
getblock,
getblock_case,
getnav_top,
block_case_margin_top,
block_case_margin_left,
block_casetostring1,
block_casetostring2,
block_casesubstring1,
block_casesubstring2,
istouch;
getmain = document.querySelector('.main');
getcontent = getmain.querySelector('.content');
getbox = getcontent.querySelector('.box');
getblock = getcontent.querySelector('.block');
getblock_case = getblock.querySelector('.block_case');
getnav_top = getcontent.querySelector('.content-nav-top');
getnav_left = getcontent.querySelector('.content-nav-left');
function get_box() {
w_getbox_distance = getbox.offsetWidth;
h_getbox_distance = getbox.offsetHeight;
istouch = 'ontouchstart' in window;
getbox.addEventListener(istouch?'touchmove':'mousemove',mouseevent,false);
getbox.addEventListener(istouch?'touchmove':'mousemove',nav,false)
}
function nav () {
return new_nav();
}
var new_nav = function () {
getnav_top.style.display = 'block';
getnav_left.style.display = 'block';
}
function move_box() {
getblock_case.style.width = '0px';
getblock_case.style.height = '0px';
block_case_margin_left = getblock_case.style.marginLeft = getblock.offsetWidth/2 + 'px';//子節(jié)點
block_case_margin_top = getblock_case.style.marginTop = getblock.offsetHeight/2 + 'px';
block_casetostring1 = block_case_margin_left.toString();//值轉(zhuǎn)化為字符串
block_casetostring2 = block_case_margin_top.toString();
block_casesubstring1 = block_casetostring1.substring(0,3);
block_casesubstring2 = block_casetostring2.substring(0,3);
}
var mouseevent = function () {
mouseEvent(event);
}
function mouseEvent(e){
var zore = 0,
val = 1;
if(istouch){
x = e.touches[zore].pageX;
y = e.touches[zore].pageY;
e.preventDefault();
}
else if(!istouch){
x = w_getbox_distance/2 != undefined ? e.offsetX:e.layerX;
y = h_getbox_distance/2 != undefined ? e.offsetY:e.layerY;
}
if(val = true){
getblock_case.style.width = x + 'px';//獲得了mouse劃過的位置
getblock_case.style.height = y + 'px';
getblock_case.style.marginLeft = (block_casesubstring1-x/2) +'px';
getblock_case.style.marginTop = (block_casesubstring2-y/2) +'px';
getblock_case.style.backgroundColor = "rgba(147, 106, 77,1)";
}
}
(function (){
window.onload = function(){
move_box();
get_box()
}
})()
var click =function () {
this.borderradius = function(num) {
if(typeof num == 'number'){
if(num == 0){
getblock_case.style.borderRadius = num;
}
else if(num > 0){
getblock_case.style.borderRadius = num +'%';
}
else{
return false;
}
}
}
this.opacitas = function (num) {
if(typeof num == 'number'){
getblock_case.style.opacity = num;
}
else{
return false;
}
}
}
var Click = new click();
return {
createclick1 :Click.borderradius,
createclick2 :Click.opacitas
}
})()
這里的鼠標(biāo)箭頭也可換成自己喜歡的圖標(biāo)，模擬鼠標(biāo)區(qū)域的顏色也可自由變換，模擬區(qū)域的效果也可是點狀的，也可以是線狀的，動畫效果等等，這個自由發(fā)揮吧。
以上就是針對JavaScript鼠標(biāo)響應(yīng)事件進(jìn)行的詳細(xì)介紹，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript 擴(kuò)展運算符用法實例小結(jié)【基于ES6】
這篇文章主要介紹了JavaScript 擴(kuò)展運算符用法,結(jié)合實例形式總結(jié)分析了基于ES6的擴(kuò)展運算符基本概念與使用相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
微信小程序中的wxs文件,大家或多或少都有見過,下面這篇文章主要給大家介紹了關(guān)于微信小程序生命周期和WXS使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
本文主要介紹了JS中常用的四個基礎(chǔ)算法，主要介紹了冒泡排序，選擇排序，插入排序和快速排序這四種算法,需要的朋友可以參考下2023-05-05
js動態(tài)改變select選擇變更option的index值示例
今天刪除多個select值的時候出現(xiàn)了問題，搞了半天原來是索引引起的（即刪除的時候要從索引大的開始刪，然后再 刪除索引小的2014-07-07
原創(chuàng)javascript小游戲?qū)崿F(xiàn)代碼
javascript小游戲?qū)崿F(xiàn)代碼，喜歡用javascript實現(xiàn)游戲效果代碼的朋友可以參考下。2010-08-08
bootstrap學(xué)習(xí)筆記之初識bootstrap
Bootstrap是一款目前非常流行的前端框架，簡單的說，就是html,css,javascript的工具集。本文給大家介紹bootstrap學(xué)習(xí)筆記之初識bootstrap，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
javascript具有自動垃圾收集機(jī)制，執(zhí)行環(huán)境會負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。在編寫javascript程序時，開發(fā)人員不用再關(guān)心內(nèi)存使用問題，所需內(nèi)存的分配以及無用內(nèi)存的回收完全實現(xiàn)了自動管理。本文將詳細(xì)介紹javascript的垃圾收集機(jī)制2016-12-12
本篇文章給大家分享了關(guān)于javascript代碼優(yōu)化的8點總結(jié)，希望我們整理的內(nèi)容能夠幫助到大家。2018-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章介紹了比較新舊兩個數(shù)組值得增加和刪除的JS代碼，有需要的朋友可以參考一下2013-10-10