學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件
更新時(shí)間：2015年12月25日 09:05:17 作者：微宇宙
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript鼠標(biāo)響應(yīng)事件，為大家分享了一個(gè)簡單的鼠標(biāo)模擬案例，感興趣的小伙伴們可以參考一下
本文為大家分享了一個(gè)簡單的鼠標(biāo)模擬案例，供大家參考，具體實(shí)現(xiàn)內(nèi)容如下
如何實(shí)現(xiàn)捕抓鼠標(biāo)事件，當(dāng)鼠標(biāo)滑動(dòng)時(shí)，獲取當(dāng)前鼠標(biāo)的坐標(biāo)，接著在一個(gè)透明區(qū)域里綁定捕抓的位移，這樣就能在模擬的透明區(qū)域里實(shí)現(xiàn)鼠標(biāo)滑動(dòng)的模型。
效果圖：
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é)點(diǎn)
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ū)域的效果也可是點(diǎn)狀的，也可以是線狀的，動(dòng)畫效果等等，這個(gè)自由發(fā)揮吧。
以上就是針對JavaScript鼠標(biāo)響應(yīng)事件進(jìn)行的詳細(xì)介紹，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:
- js 鼠標(biāo)點(diǎn)擊事件及其它捕獲
- js中鼠標(biāo)滾輪事件詳解(firefox多瀏覽器)
- JS鼠標(biāo)事件大全 推薦收藏
- 使用JS或jQuery模擬鼠標(biāo)點(diǎn)擊a標(biāo)簽事件代碼
- js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
- javascript監(jiān)聽鼠標(biāo)滾輪事件淺析
- 滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼
- js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁面
- JS實(shí)現(xiàn)超精簡響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)日歷效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
組件銷毀有很多種情況比如頁面關(guān)閉,路由跳轉(zhuǎn)(沒有使用keep-alive時(shí)的路由切換）,這篇文章主要介紹了前端vue完全銷毀一個(gè)組件的簡單步驟,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2025-04-04
JavaScript實(shí)現(xiàn)簡單的輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
移動(dòng)端a標(biāo)簽下載文件重命名(download)不生效解決辦法
在移動(dòng)端使用a標(biāo)簽下載文件時(shí),文件重命名可能不生效,尤其是在APP內(nèi)嵌頁面中,這通常是因?yàn)榭缬騿栴}導(dǎo)致的,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
JavaScript 字符串處理函數(shù)使用小結(jié)
JavaScript 字符串處理函數(shù)使用小結(jié)，學(xué)習(xí)js的朋友可以參考下。2010-12-12
下面小編就為大家?guī)硪黄肑S生成UUID的方法實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)
在線編輯器的實(shí)現(xiàn)原理(兼容IE和FireFox)...2007-03-03
使用有限狀態(tài)機(jī)實(shí)現(xiàn)簡版的html解析器
FSM(Finite State Machines) 有限狀態(tài)機(jī),也叫有限狀態(tài)自動(dòng)機(jī),是為研究有限內(nèi)存的計(jì)算過程和某些語言類而抽象出的一種計(jì)算模型,本文將使用有限狀態(tài)機(jī)實(shí)現(xiàn)一個(gè)簡版的html解析器,有需要的小伙伴可以參考下2023-11-11
使用JS代碼實(shí)現(xiàn)頁面添加水印的方法詳解
這篇文章主要介紹了使用80 行 JS 代碼實(shí)現(xiàn)頁面添加水?。何淖炙 ⒍嘈形淖炙?、圖片水印、文字&圖片水印,文中通過代碼示例給大家介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-05-05
基于BootStrap實(shí)現(xiàn)局部刷新分頁實(shí)例代碼
這篇文章主要介紹了基于BootStrap實(shí)現(xiàn)局部刷新的分頁的相關(guān)資料,非常不錯(cuò)，代碼簡單易懂，具有參考價(jià)值，需要的朋友可以參考下2016-08-08