JavaScript基礎—滑鼠移入移出

阿新 • • 發佈：2019-01-20

這裡寫圖片描述


<!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鼠標指針向對於瀏覽器頁面（或客戶區）的水平坐標+元素中滾動條的水平偏移

JavaScript基礎—滑鼠移入移出

相關推薦