JS鼠標(biāo)滑過(guò)圖片時(shí)切換圖片實(shí)現(xiàn)思路
更新時(shí)間：2013年09月12日 16:24:45 作者：
在瀏覽網(wǎng)頁(yè)時(shí)會(huì)看到這樣的效果：當(dāng)鼠標(biāo)滑過(guò)一張圖片后，這張圖片切換為了另外的一張圖片，下面為大家介紹下具體是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
在很多網(wǎng)站上我們會(huì)發(fā)現(xiàn)當(dāng)鼠標(biāo)滑過(guò)一張圖片后，這張圖片切換為了另外的一張圖片。這里小編說(shuō)說(shuō)這是怎么實(shí)現(xiàn)的。
在寫(xiě)Javascript代碼前我們必須要有實(shí)驗(yàn)的HTML代碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery deal images</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//這里是JS代碼 ，下面豆芽會(huì)寫(xiě)上
//-->
</script>
</head>
<body>
<img src="./images/img02.png" />
</body>
</html>
下面來(lái)重點(diǎn)分析JS代碼
$(document).ready(function(){
var newImage = new Image(); //預(yù)載入圖片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠標(biāo)滑過(guò)圖片切換
$('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)滑過(guò)將要切換的圖片時(shí)，替換的圖片還要臨時(shí)下載，加載圖片的過(guò)程是比較慢的。所以我們預(yù)載入圖片可以解決這個(gè)問(wèn)題。
在寫(xiě)Javascript代碼前我們必須要有實(shí)驗(yàn)的HTML代碼
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery deal images</title>
<script src="./js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
//這里是JS代碼 ，下面豆芽會(huì)寫(xiě)上
//-->
</script>
</head>
<body>
<img src="./images/img02.png" />
</body>
</html>
下面來(lái)重點(diǎn)分析JS代碼
復(fù)制代碼 代碼如下:
$(document).ready(function(){
var newImage = new Image(); //預(yù)載入圖片
var oldImage = $('img').attr('src');
newImage.src = './images/img03.jpg';
$('img').hover(function(){ //鼠標(biāo)滑過(guò)圖片切換
$('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)滑過(guò)將要切換的圖片時(shí)，替換的圖片還要臨時(shí)下載，加載圖片的過(guò)程是比較慢的。所以我們預(yù)載入圖片可以解決這個(gè)問(wèn)題。
您可能感興趣的文章:
- js鼠標(biāo)點(diǎn)擊按鈕切換圖片-圖片自動(dòng)切換-點(diǎn)擊左右按鈕切換特效代碼
- js動(dòng)態(tài)切換圖片的方法
- JavaScript實(shí)現(xiàn)自動(dòng)切換圖片代碼
- 使用JavaScript實(shí)現(xiàn)點(diǎn)擊循環(huán)切換圖片效果
- 原生JS實(shí)現(xiàn)隱藏顯示圖片 JS實(shí)現(xiàn)點(diǎn)擊切換圖片效果
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- JavaScript簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)移動(dòng)切換圖片的方法
- 圖片旋轉(zhuǎn)、鼠標(biāo)滾輪縮放、鏡像、切換圖片js代碼
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片
- JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片
相關(guān)文章
異步在JS中是常用的,下面這篇文章主要給大家介紹了關(guān)于JS四種異步解決方案的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-06-06
最近面試有道題是至少寫(xiě)出 15 個(gè)數(shù)組方法，數(shù)組方法平時(shí)經(jīng)常用到的也就6-7個(gè)，突然要一下子寫(xiě)出15個(gè)，還是有點(diǎn)卡殼了，今天整理一波，需要的可以參考一下2022-05-05
JavaScript Event學(xué)習(xí)第四章 傳統(tǒng)的事件注冊(cè)模型
在這一章我會(huì)講解給元素注冊(cè)事件的最好的一種辦法，那就是：確保一個(gè)特定的事件在特定的HTML元素上發(fā)生并且能運(yùn)行特定的腳本。2010-02-02
uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)滑動(dòng)評(píng)分效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
ES6頂層對(duì)象、global對(duì)象實(shí)例分析
這篇文章主要介紹了ES6頂層對(duì)象、global對(duì)象,結(jié)合實(shí)例形式分析了ES6頂層對(duì)象與global對(duì)象的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
setTimeout的參數(shù)傳遞問(wèn)題想必大家有所糾結(jié)，window.settimeout()方法要調(diào)用帶參數(shù)的函數(shù)有兩種方法，下面為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法詳解
這篇文章主要介紹了JavaScript中Map和Set數(shù)據(jù)結(jié)構(gòu)使用方法的相關(guān)資料,Map是一種鍵值對(duì)集合,支持任意類(lèi)型的鍵和值,保留插入順序,并提供多種遍歷和操作方法,Set是一種唯一值集合,通過(guò)哈希算法保證唯一性,提供添加、刪除、檢查元素的方法,需要的朋友可以參考下2025-03-03
javascript一個(gè)判斷瀏覽器類(lèi)型的函數(shù)（類(lèi)）
javascript一個(gè)判斷瀏覽器類(lèi)型的函數(shù)（類(lèi)）...2007-08-08
從我寫(xiě)的as tween改寫(xiě)的，基本功能跟as里面寫(xiě)的一樣，只是沒(méi)有擴(kuò)展特定功能的接口（比如alpha2，move2，size2，color2等接口,這些在as tween里面都有實(shí)現(xiàn)）。2008-12-12
Chrome不支持showModalDialog模態(tài)對(duì)話框和無(wú)法返回returnValue問(wèn)題的解決方法
上個(gè)禮拜修改測(cè)試一個(gè)后臺(tái)管理項(xiàng)目，在測(cè)試與各個(gè)瀏覽器兼容性的時(shí)候，發(fā)現(xiàn)在chrome瀏覽器下showModalDialog方法顯示的并不是模態(tài)對(duì)話框，就像新打開(kāi)一個(gè)頁(yè)面一樣，父窗口仍然可以隨意獲取焦點(diǎn)，并可以打開(kāi)多個(gè)窗體，而且返回值returnValue也無(wú)法返回，一直是undefined2016-10-10