1. 程式人生 > >【JavaScript】js可以直接使用的滑鼠經過切換圖片

【JavaScript】js可以直接使用的滑鼠經過切換圖片

js實現簡單的滑鼠經過切換圖片,滑鼠移出圖片還原。

程式碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function() {
    var oImg=document.getElementsByClassName("imgs")[0];
    oImg.onmouseover=function
(){
//滑鼠經過 oImg.src="這裡寫要替換的圖片路徑"; }; oImg.onmouseleave=function(){ //滑鼠移出 oImg.src="這裡寫圖片路徑"; } }
</script> <img src="這裡寫圖片路徑" class="imgs"/> <--如果此處的class更改,對應的js獲取元素的class也要更改--> </body> </html>

感謝閱讀。

相關推薦

JavaScriptjs可以直接使用的滑鼠經過切換圖片

js實現簡單的滑鼠經過切換圖片,滑鼠移出圖片還原。 程式碼如下 <!DOCTYPE html> <html lang="en"> <head> <m

JavascriptJS遍歷陣列的三種方法:map、forEach、filter

前言   近一段時間,因為專案原因,會經常在前端對陣列進行遍歷、處理,JS自帶的遍歷方法有很多種,往往不加留意,就可能導致知識混亂的現象,並且其中還存在一些坑。前端時間在ediary中總結了js原生自帶的常用的對陣列遍歷處理的方法,分別為:map、forEach、filter,在講解知識點的同時,會類比相識

JavaScriptJS紅寶書筆記

1,離線檢測 1,開發離線應用的第一步是要知道裝置是線上還是離線,HTML5為此定義了一個 navigator.onLine屬性,這個屬性值為 true 表示裝置能上網,值為 false 表示裝置離線。 2,除 navigator.onLine 屬性之外,為了更好地確

JavaScriptJS開啟新視窗防止被瀏覽器阻止的方法

本文例項講述了JS開啟新視窗防止被瀏覽器阻止的方法。分享給大家供大家參考。具體分析如下: 用傳統的window.open()方式開啟新視窗,會被瀏覽器阻止,那麼,我們如何才能讓JS開啟新視窗不被瀏覽器阻止呢?其實辦法還是有的,這裡我們就來分析一下如何解決這個問題 我最近也

JavaScriptJS獲取子節點、父節點和兄弟節點的幾種方式,附CSS組合選擇器

【一】、JS獲取子節點的方式     1,通過獲取dom方式直接獲取子節點        1) document.getElementById("ID");        2) document.getElementsByTagName("tagName")        

JavaScript(8)——例項:圖片切換效果

背景:不知道怎麼回事,最近做的專案都是在和UI打交道,各種圖片,各種表格,各種按鈕的組合、拼接;寫各種JS方法讓他們無縫組合,自由切換;對CSS+HTML中的多種屬性都熟悉了一下,盒子模型,背景圖片

JAVAScriptjs為日期框設定預設時間

使用js為日期控制元件設定,預設的時間。這裡演示的是,為日期控制元件設定當前系統前七天。 <script type="text/javascript"> Date.prototy

JavaScript JS中獲取HTML元素值的三種方法

JavaScript中獲取HTML元素值的三種方法 JS獲取DOM元素的方法(8種): 通過ID獲取(getElementById) 通過name屬性(getElementsByName) 通過標籤名(getElementsByTagName) 通過類

JavaScripta標簽onclick傳遞參數不對,A標簽調用js函數寫法總結

狀態欄 ring pos val tracking 使用 直接 修改 track 錯誤示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 瀏覽器

JavaScript計數器+classList使用-純js案例:全選反選

nta ava count 改變 markdown 精簡 javascrip 案例 標簽 這兩天做了一個全選反選的案例,用了幾種方法,剛開始寫的磕磕絆絆,聽老師講解後理清思路,再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能,然後分步實現,不要攪在一起。下面幾

JavaScript前端用 js form上傳物件陣列

Jquery get 陣列 1. 起因:為了匯出檔案,使用 form 格式 使用 form 上傳引數,下載檔案,就會出現 obj 物件在引數裡顯示為 [object object] 或者 object

JavaScript11.JS實現簡單的時分秒倒計時

程式碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js簡單時分秒倒計時</title

JavaScriptajax請求的資料返回時間戳使用js處理方案

author:咔咔 wechat:fangkangfk   方法: function formatDate(now) {   var year = now.getFullYear(),   month = now.getMonth() + 1,   

JavaScriptjquery右鍵點選事件和js禁用右鍵事件程式碼

jQuery滑鼠點選事件函式//jQuery滑鼠左擊、右擊和中擊事件 $('div').mousedown(function(e){ if(e.which == 3){ alert(

JavaScript相容IE6的JS模板化

所謂的JS模板化並不是什麼遙遠的東西,在Ajax運用越來越多的今天,這基本都快成為了一種基本訴求了。這東西離前端工程師們並不遙遠,舉個例子。 如下的一個簡單不能再簡單的效果,這個a=2,其中這個2的資料來自於Ajax返回。至於不知道什麼是Ajax的同學,可以參考《【Serv

JavaScript怎樣在 js 中生成指定值、個數的陣列,包含相同元素的陣列

在刷演算法題的過程中,往往會需要設定 n 個 0 元素的陣列,例如 var a = [0,0,0,0, ... ,0]; 少一點,固定個數,可能就自己填了,但是多了,就不那麼容易處理了。查閱相

JavaScript使用定時器實現Js的延期執行或重複執行setTimeout,setInterval

1.window.setTimeout方法該方法可以延時執行一個函式,例如: <script language="JavaScript" type="text/javascript"> <!-- function hello(){ alert("hello"); } window.setTi

javascript非同步事件怎麼理解js是單執行緒的,但又可以實現非同步程式設計

js的非同步事件通常包括以下幾類: 網路請求:ajax請求,服務端響應(隨時發生) 計時器:setTimeOut,setTimeInterval(定時發生) 使用者事件:滑鼠,鍵盤,控制元件(隨時發生) 瀏覽器事件:頁面載入完畢,頁面載入失敗(隨時發生)

Javascript二、IE/FF的JS相容寫法

做BS開發就難免會用到javascript,而每個瀏覽器對javascript的支援有不同。這就需要我們程式設計師去相容他們下面是相容IE和FF的js指令碼做法和分解,希望對大家有幫助。  /*以下以 IE 代替 Internet Explorer,以 MF/FF 代替 M