1. 程式人生 > >JavaScript基礎—滑鼠移入移出

JavaScript基礎—滑鼠移入移出

這裡寫圖片描述


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #000000;
                float: left;
                margin
: 10px 20px
; }
div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height: 50px; }
</style> <script> var a = 0;//宣告 var
b = 0; var c = 0; var d = 0; var e = 0; //滑鼠移動事件 function myMove(){ a++; // a = a + 1; var font = document.getElementById("a");//獲取font標籤物件 font.innerHTML = a; } //滑鼠移入事件over function
myOver(){
b++; var font = document.getElementById("b");//獲取font標籤物件 font.innerHTML = b; } //滑鼠移出事件out function myOut(){ c++; var font = document.getElementById("c");//獲取font標籤物件 font.innerHTML = c; } //滑鼠移入事件enter function myEnter(){ d++; var font = document.getElementById("d");//獲取font標籤物件 font.innerHTML = d; } //滑鼠移出事件leave function myLeave(){ e++; var font = document.getElementById("e");//獲取font標籤物件 font.innerHTML = e; }
</script> </head> <body> <div onmousemove="myMove()"> <font id="a">0</font> <p>滑鼠移動事件onmousemove</p> </div> <!--事件冒泡--> <div onmouseover="myOver()"> <font id="b" style="border: 1px solid #000000;">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>

相關推薦

JavaScript基礎滑鼠

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

楊老師課堂之JavaScript懸浮事件(滑鼠事件)

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

JavaScript滑鼠時顏色變化程式碼

判斷滑鼠在網頁的某個區域移動 轉自http://jingyan.baidu.com/article/ac6a9a5e5c040b2b653eac25.html,這裡面還有些其他有用的操作 <html xmlns="http://www.w3.org/1999/xhtm

JavaScript 入門練習2:鼠標改變 div 大小

courier script element 鼠標移出 定位 html 標簽 into 相對 lac 有一個位於屏幕正中央的紅色 div 正方形盒子,寬高為200×200像素,鼠標移入(懸停),正方形會變成400×400像素,鼠標移出,正方形恢復200×200像素。 使用

根據滑鼠方向,實現hover效果

首先,我們要判斷滑鼠移入物件的方向:先獲取該物件的左邊距,然後通過判斷滑鼠距離上面、左面、右面、下面的值的最小值,來獲取滑鼠移入物件的方向。 JS程式碼: ;(function($){ $.fn.extend({ dirMove:function(){ var $outer=this

設定選單欄選單樣式(滑鼠狀態,背景顏色,字型顏色大小,間距,邊框)

setStyleSheet(“QMenuBar{” “background:rgb(255,255,255);” “color:rgb(0,0,0);” “font-size:14px;” “padding:2px;” “border:1px solid rgb(165,171,184);”

WPF ScrollViewer 滾動條滑鼠滑鼠按下拖動時的外觀樣式

在WPF 中自定義ScrollViewer的樣式實現的效果如下圖所示:主要是滑鼠移入顯示滾動條,移出滑鼠滾動條消失,按住拖拽改變滾動條外觀顏色等; 關鍵點幾個點是:1:在ScrollViewer 的自定義模板中 定義好如下幾個事件觸發器: <EventTrigger

JS學習筆記 - fgm練習 - 滑鼠/div樣式改變

  思路: div的預設樣式正常設定。 滑鼠移入時,發生改變的樣式有3個,即 邊框顏色,div背景色,字型顏色。 把這三個css改變設定在一個類名下,再通過js給div動態 新增/去除這個類名,實現div樣式改變。   <style> body{color:#

CSS筆記 - fgm練習 - 滑鼠div顯示隱藏 CSS樣式部分

問題總結: 1. checkbox和下面隱藏的div對齊,是在清除了預設樣式的前提下,而不需要額外設定float: left; 2. 隱藏的div這裡不需要專門設定寬高、居中,是靠內容和padding撐起來的尺寸。外層div居中,內層跟著居中。 <style> *{margin

JS實現滑鼠控制圖片的切換效果

在看專業英語的時候,學習JS的Timer Event.正好有一個例子,實現的是,圖片自動切換,當滑鼠點選圖片的時候,停止切換。於是想要動手實踐一下,並且新增上自己的想法。於是就有了下面的圖片和程式碼。 首先,看一下效果圖: 頁面載入的時候,圖片是每隔

初學JS值之用JS實現滑鼠事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初學JS</title> <style> #webo

jq滑鼠元素呈現淡淡出效果總結

如果是通過滑鼠點選事件來觸發動畫效果 可以使用 $("#button").click(function(){ $("#div").stop().fadeToggle("slow"); }); $.stop()可以防止點選過快時,元素會呈現與點選

滑鼠,樣式修改,顯示隱藏提示訊息

重要的有三點: 1.a標籤中的ishow是自己定義的屬性,自己輸入值 2.a:hover表示滑鼠移上去時, 3.a:hover:after{content:attr(ishow)}表示滑鼠移上去後

jquery 判斷滑鼠位置

我寫的方法是網上的前輩做出來,我在這說說我自己遇到的問題。html和css程式碼就不貼了,就是4個div做測試用的。下面是完整程式碼,基本相容各大流行瀏覽器。function mouse(obj,str,e){ var x = e.offsetX, y = -e.of

js實現滑鼠元素出來縮排的動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

滑鼠div時,觸發事件(此處為圖片的可見和不可見)

<div onmouseover='showDel(this)' onmouseout='hideDel(this)' class='selector"+ quesNum+ " selector-style'><input type='radio'  na

js滑鼠事件樣例

<html> <head> <title>javaScript例項</title> <style> li{background-color:#eee;height:25px;margin-top:2

JS添加、設置屬性以及鼠標事件

tel 小明 效果 blog enter classname tex ext http 源代碼: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

鼠標方向判斷

style -i cti fin city left jquer right wid <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <

JS實現跟隨鼠標移動的div,和一串跟隨鼠標的div,鼠標實現圖片的顏色淡淡出

nload nts timer inf ntb doc tel ctype target 1.一直跟著鼠標移動的div:原理是div的left和top值有oEvent.clientX+scrollLeft鼠標指針向對於瀏覽器頁面(或客戶區)的水平坐標+元素中滾動條的水平偏移