jquery鼠標(biāo)移入,jquery鼠標(biāo)移入輪播圖焦點(diǎn)是停止自動輪播

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

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

創(chuàng)新互聯(lián)建站成立于2013年，先為武穴等服務(wù)建站，武穴等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為武穴企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

mouseenter和mouseleave只在父元素觸發(fā)，當(dāng)鼠標(biāo)穿過一個元素時，只會觸發(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里面的方法都會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值都會包括自己的margin和父元素border的值 */

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

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

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

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

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

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

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

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

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

? ? $(window).scrollLeft(100)

? ? /* 獲取滾動條的距離 */

? ? $(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ū)域時不會觸發(fā)

? ? ? ?mouseover 和mouseout 會觸發(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','')不會改變元素原來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

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

? ? /* 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();

? ? /* 自動播放 */

? ? show();

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

? ? ? ? /* 先清空定時器 阻止自動播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i--;

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

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

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

? ? ? ? }

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

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

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

? ? ? ? show();

? ? })

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

? ? ? ? /* 先清空定時器 阻止自動播放 */

? ? ? ? clearInterval(timer);

? ? ? ? i++;

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

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

? ? ? ? ? i=0

? ? ? ? }

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

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

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

? ? ? ? show()

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

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

? ? })

? ? 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ā)）

jquery中鼠標(biāo)移上和移開的動作是什么？

mouseover事件于用戶把鼠標(biāo)從一個元素移動到另外一個元素上時觸發(fā)，mouseout事件于用戶把鼠標(biāo)移出一個元素時觸發(fā)。\x0d\x0a下面為你詳細(xì)介紹下jquery中的鼠標(biāo)事件：\x0d\x0a(1):click事件：click事件于用戶在元素敲擊鼠標(biāo)左鍵，并在相同元素上松開左鍵時觸發(fā)；\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件：dbclick事件在用戶完成迅速連續(xù)的兩次點(diǎn)擊之后觸發(fā)，雙擊的速度取決于操作系統(tǒng)的設(shè)置。一般雙擊事件在頁面中不經(jīng)常使用；\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件：mousedown事件在用戶敲擊鼠標(biāo)鍵時觸發(fā)，跟keydown事件不一樣，該事件僅在按下鼠標(biāo)時觸發(fā)；\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件：mouseup事件在用戶松開鼠標(biāo)時觸發(fā)，如果在與按下鼠標(biāo)的元素相同元素上松開，那么click事件也會觸發(fā)；\x0d\x0a$('p').mouseup(function(){\x0d\x0aalert('mouseup function is running\x0d\x0a!');\x0d\x0a}).click(function(){\x0d\x0aalert('click\x0d\x0afunction is running too !');\x0d\x0a});\x0d\x0a(5):mouseover事件：mouseover事件于用戶把鼠標(biāo)從一個元素移動到另外一個元素上時觸發(fā)，如果需要知道來自那個元素可以使用，relatedTagrget屬性；\x0d\x0a(6):mouseout事件：mouseout事件于用戶把鼠標(biāo)移出一個元素時觸發(fā)，這包括從父元素移動到子元素上，或者使用鍵盤跳到元素上。

當(dāng)前標(biāo)題：jquery鼠標(biāo)移入,jquery鼠標(biāo)移入輪播圖焦點(diǎn)是停止自動輪播
文章分享：http://www.jiaotiyi.com/article/dsdpppj.html