1. 程式人生 > >HTML之滑鼠移動事件

HTML之滑鼠移動事件

滑鼠事件:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid #000000;
float: left;
margin: 10px 10px;
}
div p{
background-color: gray;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
<script>
//宣告
var a=0;
var b=0;
var c=0;
var d=0;
var e=0;
function myMove(){
a++;
var font = document.getElementById("a");//獲取font標籤物件
font.innerHTML=a;
}
function myOver(){
b++;
var font = document.getElementById("b");//獲取font標籤物件
font.innerHTML=b;
}
function myOut(){
c++;
var font = document.getElementById("c");//獲取font標籤物件
font.innerHTML=c;
}
function myEnter(){
d++;
var font = document.getElementById("d");//獲取font標籤物件
font.innerHTML=d;
}
function myLeave(){
e++;
var font = document.getElementById("e");//獲取font標籤物件
font.innerHTML=e;
}
</script>
</head>
<body>
<!--<script>
document.write("<h1>這是一個標題!</h1>");
document.write('"<h1>這也是一個標題!</h1>"');
document.write("<br />");
document.write("''");
</script>-->
<!--<button type="button" onclick="alert('歡迎')">點我</button>-->
<!--<h1>我的JAVA教程</h1>
<p id="demo">
王源
</p>
<script>
function myFunction(){
x=document.getElementById("demo");
x.innerHTML="TFBOYS";
}
</script>
<button type="button" onclick="myFunction()">點我</button>-->
<!--<script>
function changeImage(){
element=document.getElementById('myimage')
if(element.src.match("bulbon"))
{
element.src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif";
}
else{
element.src="img/814acbafe5263706f0af6e1ce1b77ae4_pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="img/2841967bcdcac1bf9e2351b2c8f842f1_pic_bulboff.gif" width="50px" />-->
<div onmousemove="myMove()">
<font id="a">0</font>
<p>滑鼠移動事件onmousemove</p>
</div>
<div onmouseover="myOver()">
<font id="b">0</font>
<p>滑鼠移入事件onmouseover</p>
</div>
<div onmouseout="myOut()">
<font id="c">0</font>
<p>滑鼠移出事件onmouseout</p>
</div>
<div onmouseenter="myEnter()">
<font id="d">0</font>
<p>滑鼠移入事件onmouseenter</p>
</div>
<div onmouseleave="myLeave()">
<font id="e">0</font>
<p>滑鼠移出事件onmouseleave</p>
</div>
</body>
</html>

相關推薦

HTML滑鼠移動事件

滑鼠事件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title

Javascript和jquery事件--滑鼠移動事件mousemove

mousemove,一個監聽元素上滑鼠移動的事件,如果滑鼠在元素上移動,大概每16毫秒觸發一次。我覺得挺有趣的一個元素,不過有替代還是不太推薦,從這個事件的觸發頻率就可以看出它會拖慢響應速度,消耗資源。 在js中可以使用onmousemove和addEventListener(‘mousemove’,fn)

JS動態生成的元素,其對應的方法不響應(比如單擊事件滑鼠移動事件等)

主要原因:在頁面給元素註冊點選事件的時候【 $(function () {  XXX }); 】,JS動態生成的元素還尚未生成,所以click事件就沒有生效 解決方法: 方案一:js動態生成元素後再給其註冊事件 【註冊事件放在動態生成的js下面(js是從上往下執行的,當註冊事件的時候元素已經生成了

HTML】- 滑鼠移動時內容進行切換

1.效果 2.程式碼 2.0 關鍵功能 onmouseover="change('girl')" 函式的功能是滑鼠放上時觸發執行,change()方法中的引數‘girl’和 後面的id=‘gril

Unity 3D 如何獲取滑鼠移動事件

這個問題還可以是:如何讓某個物體跟隨滑鼠移動?如何讓遊戲裡的物體與滑鼠移動繫結起來?如何用滑鼠控制遊戲裡的物體?如何獲取滑鼠在螢幕上的移動和位置?如何獲取滑鼠的移動方向?如何獲取真實滑鼠的移動,不管游標有沒有被螢幕限制住?如何獲取滑鼠的移動方向和距離,而不是對應螢幕上的座標?

JavaScript滑鼠滾動事件

本文地址:http://blog.163.com/jinlu_hz/blog/static/113830152201122911356714/ 原文地址:http://adomas.org/javascript-mouse-wheel/ 原文作者:unknown 最近正在做

qt QMainWindow視窗滑鼠移動事件觸發方式

建構函式中寫上:setMouseTracking(true);                           ui->centralWidget->setMouseTracking(t

OpenCV滑鼠響應事件

用滑鼠畫框框。。 #include <opencv2/opencv.hpp> #include <opencv2/opencv_modules.hpp> #include <opencv2/highgui/highgui.hpp&

Html滑鼠移動上去變色&移動上去變小手

"hover"意味著移動上去的變化,可以運用到選單欄,甚至一些圖片特效上。 .menu_text {                                         PS:這裡是一個CSS  height: 90px;                  

關於JavaScript的滑鼠移動事件

前言: Event 物件代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。 事件通常與函式結合使用,函式不會在事件發生前被執行!事件控制代碼:滑鼠/鍵盤的屬性 程

楊老師課堂JavaScript懸浮事件滑鼠移入移出事件

 今天給大家分享一個簡單的JavaScript事件案例: 該事件屬於懸浮事件 改程式碼邏輯非常簡單,主要是 當滑鼠移動到按鈕上顯示一個盒子,移開之後盒子隱藏 JavaScript事件中     onmouseover 代表的是滑鼠指標移動到指定的物件

unity3d滑鼠控制人物移動

參考http://blog.csdn.net/a2587539515/article/details/9390795博文 實現其實很簡單,用到navigation  第一步獲取滑鼠點選的世界座標 第二步,移動到改座標點 程式碼如下: Vector3 poin

html js div隨滑鼠移動

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onmousemove</title> <style type="text/css">

【2018.05.09】python3.6 + selenium 定位 滑鼠事件操作+鍵盤事件操作

一、簡單操作     1.點選(滑鼠左鍵)頁面按鈕:click()     2.請空輸入框:clear()     3.輸入字串:send_keys()     4.submit()一

C#窗體應用程式滑鼠事件

                                   和重繪一樣,窗體本身有paint,還有mousemove等事件 private void Form1_MouseMove(o

(轉)python selenium-webdriver 元素操作滑鼠和鍵盤事件

參考資料:https://blog.csdn.net/zh175578809/article/details/76767748 參考資料2:https://blog.csdn.net/qq_41817302/article/details/79618654   selenium 提供了比較完整的鍵盤操作,

C# winform 無邊框窗體滑鼠點選移動事件

這裡所謂的無邊框窗體是指去除系統自帶的標題欄和最大最小化等那周圍一圈的窗體 即把窗體的FormBorderStyle設定為none後的窗體(效果如下) 這是有邊框的: 去除邊框的: 右邊框窗體想要移動位置,用滑鼠點選標題欄移動即可,那麼沒邊框的該如何移動這個問題,

Unity3D滑鼠控制角色移動與奔跑示例

最新補充。          一般在做滑鼠選擇時是從攝像機向目標點發送一條射線,然後取得射線與物件相交的點來計算3D目標點。後來在開發中發現了一個問題(射線被別的物件擋住了),就是如果主角的前面有別的遊戲物件擋著。此時如果使用射線的原理,滑鼠選擇被檔的物件,這樣主角就

小程式解決移動端點選和長按事件冒泡問題

      如果我們希望一個物件被長按的時候不會觸發點選事件,如果你同時繫結上bindtap事件和bindlongtap事件的話這裡會有一個問題就是不管你有沒有點選,長按的時候就會觸發點選事件,我們有

Html5 Canvas開發滑鼠繪圖和方塊移動

1.滑鼠繪圖 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &