jquery鼠標(biāo)移入移出

mouseenter(進(jìn)入)、mouseleave、mouseover(覆蓋)和mouseout是常用來判斷鼠標(biāo)移出和移入的事件句柄，雖然功能上差不多，但是細(xì)節(jié)卻有不同的地方。

站在用戶的角度思考問題，與客戶深入溝通，找到平南網(wǎng)站設(shè)計(jì)與平南網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋平南地區(qū)。

mouseover和mouseout在父元素和其子元素都可以觸發(fā)，當(dāng)鼠標(biāo)穿過一個(gè)元素時(shí)，觸發(fā)次數(shù)得依子元素?cái)?shù)量而言。

mouseenter和mouseleave只在父元素觸發(fā)，當(dāng)鼠標(biāo)穿過一個(gè)元素時(shí)，只會(huì)觸發(fā)一次。

mouseover和mouseout比mouseenter和mouseleave先觸發(fā)

因此一般mouseover和mouseout一起使用，mouseenter和mouseleave一起使用

jQuery鏈?zhǔn)秸{(diào)用、鼠標(biāo)移入移出、輪播、鍵盤事件

style

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

script src="./jquery-1.12.4.js"/script

script

? ? /* jQuery的鏈?zhǔn)秸{(diào)用 */

? ? /* $('div').$('div').text('我是學(xué)生').css('color','red').attr({name:'zhangsan',age:30}) */

? ? /* 鏈?zhǔn)秸{(diào)用的原理jq里面的方法都會(huì)return this 把當(dāng)前調(diào)用者return出去實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用 */

? /* $('ul li').first().css('background','yellow').end().eq(1).css('background','red') */

? ? /* 獲取的只是content里面的距離,不包括padding margin border里面的距離 */

? ? /* 返回以像素為單位的top和left的坐標(biāo),僅對可見元素有效 */

? ? /* top和left值都會(huì)包括自己的margin和父元素border的值 */

? ? console.log($('div2').offset().top);

? ? console.log($('ul').width());

? ? console.log($('ul').height());

? ? /* offsetParent 返回最近的自己定位的祖先元素 */

? ? console.log($('div2').offsetParent());

? ? /* position() 返回第一個(gè)匹配元素相對于父元素的位置 */

? ? console.log($('div').position());

? /* scrollLeft([position]) 參數(shù)可選,設(shè)置返回匹配元素相對滾動(dòng)條左側(cè)的偏移*/

? ? /* 設(shè)置滾動(dòng)條的距離 */

? ? $(window).scrollLeft(100)

? ? /* 獲取滾動(dòng)條的距離 */

? ? $(window).scroll(function(){

? ? ? ? console.log($(document).scrollLeft());

? ? })

/script

style

? ? .div1{

? ? ? ? width: 300px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid red;

? ? }

? ? .div2{

? ? ? ? width: 200px;

? ? ? ? height: 200px;

? ? ? ? background-color: red;;

? ? }

/style

/head

body

div class="div1"

? ? div class="div2"

? /div

/div

script src="./jquery-1.12.4.js"/script

script

? ? /* mouseenter mouseleave 在進(jìn)入子元素區(qū)域時(shí)不會(huì)觸發(fā)

? ? ? ?mouseover 和mouseout 會(huì)觸發(fā) */

? ? /* $('.div1').mouseenter(function(){

? ? ? ? $(this).css('background','green')

? ? })

? ? $('.div1').mouseleave(function(){

? ? ? ? $(this).css('background','yellow')

? ? }) */

? ? /* 由mouseenter 和mouseleave組成 */

? ? $('.div1').hover(function(){

? ? ? ? $(this).css('background','yellow')

? ? ? ? console.log(1);

? ? })

/script

style

? ? *{

? ? ? ? margin: 0%;

? ? ? ? padding: 0%;

? ? }

? ? .box{

? ? ? ? width: 340px;

? ? ? ? border: 1px solid blue;

? ? ? ? margin: 10px auto;

? ? }

? ? .box h1{

? ? ? ? height: 40px;

? ? ? ? color: #fff;

? ? ? ? padding-left: 15px;

? ? ? ? background-color: blue;

? ? ? ? font-size: 25px;

? ? }

? ? ul li{

? ? ? ? padding-left: 15px;

? ? ? ? list-style-type: none;

? ? ? ? line-height: 45px;

? ? ? ? border-bottom: 1px dashed #ccc;

? ? }

? ? ul li:last-child{

? ? ? ? border-bottom: none;

? ? }

/style

/head

body

div class="box"

? ? h1

? ? ? ? 祝福冬奧

? ? /h1

? ? ul

? ? ? li貝克漢姆/li

? ? ? li 姚明/li

? ? ? li張宏/li

? ? ? li肖恩懷特/li

? /ul

? /div

? script src="./jquery-1.12.4.js"/script

? script

? ? /* $('li:eq(0)').mouseenter(function(){

? ? ? ? $(this).css('background','red')

? ? })

? ? $('li:eq(0)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? }) */

? ? $('li').hover(function(){

? ? ? ? /* css('background','')不會(huì)改變元素原來bgc樣式 */

? ? ? ? $('li').first().css('background','red').siblings().css('background','')

? ? })

? ? $('li:eq(1)').mouseenter(function(){

? ? ? ? $(this).css('background','yellow')

? ? })

? ? $('li:eq(1)').mouseout(function(){

? ? ? ? $(this).css('background','')

? ? })

? /script

style

? ? .box{

? ? ? ? margin: 30px auto;

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? border: 1px solid cyan;

? ? ? ? position: relative;

? ? }

? ? .img-list img{

? ? ? ? width: 500px;

? ? ? ? height: 300px;

? ? ? ? display: block;

? ? ? ? position: absolute;

? ? ? ? left: 0;

? ? ? ? top: 0;

? ? }

/style

/head

body

div class="box"

? ? div class="img-list"

? ? ? ? img src="./imgs/1.jpg" alt=""

? ? ? ? img src="./imgs/2.jpg" alt=""

? ? ? ? img src="./imgs/3.jpg" alt=""

? ? ? ? img src="./img/4.jpg" alt=""

? ? /div

/div

button style="margin-left: 450px;" class="left"后退/button

button class="right"前進(jìn)/button

script src="./jquery-1.12.4.js"/script

script

? ? /* 定時(shí)器 過2s 顯示一張圖 顯示最后一張圖的時(shí)候再跳回第一張 */

? ? /* let i = 0

? ? $('img').eq(0).show().siblings().hide();

? ? setInterval(function(){

? ? ? i++;

? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? } */

? ? ? /* 淡入淡出 */

? ? ? /* $('img').eq(i).fadeIn('slow').siblings().fadeOut('slow')

? ? },2000) */

? let i = 0;

? ? let timer = null

? ? $('img').eq(i).show().siblings().hide();

? ? /* 自動(dòng)播放 */

? ? show();

? ? $('.left').click(function(){

? ? ? ? /* 先清空定時(shí)器 阻止自動(dòng)播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i--;

? ? ? ? /* 防止減到-1找不到對應(yīng)的圖片 */

? ? ? ? if(i == -1){

? ? ? ? ? i=$('img').length - 1

? ? ? ? }

? ? ? ? /* 展示當(dāng)前對應(yīng)的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續(xù)開始自動(dòng)播放 */

? ? ? ? show();

? ? })

? ? $('.right').click(function(){

? ? ? ? /* 先清空定時(shí)器 阻止自動(dòng)播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i++;

? ? ? ? /* 防止減到-1 找不到對應(yīng)的圖片 */

? ? ? ? if(i==$('img').length){

? ? ? ? ? i=0

? ? ? ? }

? ? ? ? /* 展示當(dāng)前對應(yīng)的圖片其他圖片淡出 */

? ? ? ? $('img').eq(i).show().siblings().hide();

? ? ? ? /* 繼續(xù)開始自動(dòng)播放 */

? ? ? ? show()

? ? ? ? /* 定時(shí)器 過兩秒 顯示一張圖 顯示最后一張圖的時(shí)候

? ? ? ? 再跳到第一張 */

? ? })

? ? function show(){

? ? ? ? timer = setInterval(function (){

? ? ? ? ? ? i++;

? ? ? ? ? ? if(i == $('img').length){

? ? ? ? ? ? ? ?i = 0

? ? ? ? ? ? }

? ? ? ? ? ? /* fadeIn 淡入 fadeOut淡出 */

? ? ? ? ? ? $('img').eq(i).fadeIn().siblings().fadeOut();

? ? ? ? },2000)

? ? }

/script

body

用戶名:input type="text"br

密碼: input type="password"

script src="./jquery-1.12.4.js"/script

script

? ? /* 按下鍵盤 */

? ? /* $('input[type=text]').keydown(function(){

? ? ? ? alert('我按下了')

? ? }) */

? /* 抬起鍵盤 */

? ? /* $('input[type=password]').keyup(function(){

? ? ? ? alert('我抬起了')

? ? }) */

? /* keypress 連續(xù)敲擊鍵盤 */

? ? /* $('input[type=text]').keypress(function(){

? ? ? ? alert('連續(xù)打字')

? ? }) */

? ? $(window).keyup(function(e){

? ? ? ? if(e.keyCode==13){

? ? ? ? ? ? alert('已提交')

? ? ? ? }

? ? })

/script

/body

前端 jQuery鼠標(biāo)移入移出

mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）

mouseout() 鼠標(biāo)離開（離開子元素也觸發(fā)）

mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)）

mouseleave() 鼠標(biāo)離開（離開子元素不觸發(fā)）

網(wǎng)頁題目：jquery移入移出,js 移入移出
本文鏈接：http://jinyejixie.com/article8/dsdggop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、標(biāo)簽優(yōu)化、Google、品牌網(wǎng)站建設(shè)、域名注冊、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)