js如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片的切換

您好，這樣的：

目前成都創(chuàng)新互聯(lián)公司已為近1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、衡南網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

1、html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleJquery deal images/title

script src="./js/jquery.js" type="text/javascript"/script

script type="text/javascript"

!--

//這里是JS代碼 ，下面豆芽會(huì)寫上

//--

/script

/head

body

img src="./images/img02.png" /

/body

/html

2、

$(document).ready(function(){

var newImage = new Image(); //預(yù)載入圖片

var oldImage = $('img').attr('src');

newImage.src = './images/img03.jpg';

$('img').hover(function(){ //鼠標(biāo)滑過圖片切換

$('img').attr('src',newImage.src);

},

function(){

$('img').attr('src',oldImage);

});

});

這里大家迷惑的是為什么要預(yù)載入圖片呢？因?yàn)樵诰W(wǎng)站上不像我們本地調(diào)試，圖片下載這么快。如果是在互聯(lián)網(wǎng)上，當(dāng)鼠標(biāo)滑過將要切換的圖片時(shí)，替換的圖片還要臨時(shí)下載，加載圖片的過程是比較慢的。所以我們預(yù)載入圖片可以解決這個(gè)問題。

網(wǎng)頁制作javascript鼠標(biāo)經(jīng)過文字變色問題

style?type="text/css"

body,td,th?{

font-size:?18px;

color:?#999;

font-weight:?bold;

}

上面已經(jīng)設(shè)置了td,th文字顏色屬性，

td?width="62"div?align="center"a?href=page1.html?style="color='#999';cursor:hand"?onmouseover="javascript:this.style.color='red'"?

onmouseout="javascript:this.style.color='#999'"游戲介紹/a/div/td

這里又設(shè)置了顏色屬性，不過行內(nèi)樣式優(yōu)先，可以改成style="color=blue;............"，這時(shí)即：

style?type="text/css"

body,td,th?{

font-size:?18px;

color:?#999;

font-weight:?bold;

}

td?width="62"div?align="center"a?href=page1.html?style="color='blue';cursor:hand"?onmouseover="javascript:this.style.color='red'"?

onmouseout="javascript:this.style.color='#999'"游戲介紹/a/div/td

這時(shí)顏色body,td,thcolor屬性已經(jīng)不起作用了也可以下面這樣，去掉行內(nèi)style="color:#999",行內(nèi)的color屬性去掉 前邊color設(shè)置成你要的其實(shí)顏色。

style?type="text/css"

body,td,th?{

font-size:?18px;

color:?blue;

font-weight:?bold;

}

td?width="62"div?align="center"a?href=page1.html?style="cursor:hand"?onmouseover="javascript:this.style.color='red'"?

onmouseout="javascript:this.style.color='#999'"游戲介紹/a/div/td

有點(diǎn)亂，希望有幫助！

js自定義鼠標(biāo)經(jīng)過事件函數(shù)

window.onload?=?function(){

var?menu?=?document.getElementById('menu');

var?img?=?menu.getElementsByTagName('img');

menu.onmouseout?=?function(){

for(var?i=0;iimg.length;i++){

var?src?=?img[i].src;

if(src.indexOf('_over')!=-1)?{

var?index?=?src.lastIndexOf('.');

img[i].src?=?src.substr(0,index-5)+src.substr(index,src.length);

}

}

};

menu.onmouseover?=?function(){

for(var?i=0;iimg.length;i++){

var?src?=?img[i].src;

if(src.indexOf('_over')!=-1)?continue;

var?index?=?src.lastIndexOf('.');

img[i].src?=?src.substr(0,index)+'_over'+src.substr(index,src.length);

}

}

};

不謝，請(qǐng)叫我紅領(lǐng)巾

關(guān)于javascript的鼠標(biāo)經(jīng)過的問題 onmouseover

原生自帶的onmouseover是存在鼠標(biāo)從子級(jí)移到父級(jí)上時(shí)，也代表over。所以就會(huì)出現(xiàn)多次觸發(fā)onmouseover事件，但原生還提供了另外一種鼠標(biāo)移入事件。是onmouseenter。使用這個(gè)事件，就把onmouseover的問題完美的解決掉了。

下面是代碼，僅供參考：

body

div?style="width:100px;?height:100px;?background:#ccc;"

h2?style="width:50px;?height:100px;?background:red;"/h2

/div

/body

script

var?oDiv?=?document.getElementsByTagName('div')[0];

var?oH?=?document.getElementsByTagName('h2')[0];

oDiv.onmouseenter?=?function(){

alert(1);

};

/script

js如何直接觸發(fā)鼠標(biāo)經(jīng)過事件

這是什么意思？不能等于 事件只能一次響應(yīng)一種；你可以點(diǎn)擊之后，如果鼠標(biāo)又經(jīng)過了 執(zhí)行經(jīng)過后的程序 沒有等同這種說法

名稱欄目：javascript鼠標(biāo)經(jīng)過,javascript鼠標(biāo)經(jīng)過字體變色
本文鏈接：http://chinadenli.net/article7/dsgccoj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、服務(wù)器托管、電子商務(wù)、品牌網(wǎng)站建設(shè)、建站公司、小程序開發(fā)

廣告

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