2. 程式人生 > >JS onmouseover滑鼠事件：滑鼠移到小圖顯示大圖

JS onmouseover滑鼠事件：滑鼠移到小圖顯示大圖

阿新 • • 發佈：2019-01-26 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #goods>div>img{
                border:1px solid #ccc;
            }
            #goods>div ul li{list-style: none;float
 
: left;}
        </style>

        <script type="text/javascript">
            window.onload=function(){
                var div=document.getElementById("goods_img");
                var arr_img=div.getElementsByTagName("img");
                for(var i=0;i<arr_img.length;i++){
                    arr_img[i].onmouseover=function
 
(){
                        var bigimg=document.getElementById("bigimg");
                        var p=this.src;
                        bigimg.src=p.replace(".jpg","_big.jpg");
                    }
                }
            }
        </script>
    </head>
    <body>
        <div
 
 id="goods">
            <div>
                <img src="image/show1_big.jpg" id="bigimg"/>
            </div>
            <div id="goods_img">
                <ul>
                    <li><img src="image/show1.jpg"/></li>
                    <li><img src="image/show2.jpg"/></li>
                    <li><img src="image/show3.jpg"/></li>
                    <li><img src="image/show4.jpg"/></li>
                    <li><img src="image/show5.jpg"/></li>
                </ul>
            </div>
        </div>
    </body>
</html>

驗證截圖

相關推薦

JS onmouseover滑鼠事件：滑鼠移到小圖顯示大圖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

JS中的事件：滑鼠、鍵盤、HTML事件

<body> <div> <img class="a" src="../../img/new_01" alt=""> <img class="a" src="../../img/new_02"

JAVA作業 視窗響應滑鼠事件：滑鼠在畫布上畫圓

題目：生成一個視窗響應滑鼠事件，可以拖住滑鼠在畫布上畫出藍色的圓。滑鼠按下和彈起的位置為圓的直徑。 思想： 1、編寫框架類與畫布類即可實現畫板系列問題； 2、編寫Circle類，用於描述圓物件，因

C# .net 簡單的點選小圖顯示大圖。

GridView 中綁定了伺服器上存放圖片的路徑。 <asp:TemplateField HeaderStyle-Width="90%" HeaderText="圖片資訊">                                          

WPF，強制捕獲滑鼠事件，滑鼠移出控制元件外依然可以執行強制捕獲的滑鼠事件

原文: WPF，強制捕獲滑鼠事件，滑鼠移出控制元件外依然可以執行強制捕獲的滑鼠事件 在WPF中，只有滑鼠位置在某個控制元件上的時候才會觸發該控制元件的滑鼠事件。例如，有兩個控制元件都註冊了MouseDown和MouseUp事件，在控制元件1上按下滑鼠，不要放開，移動到控制元件2上再放開。在這個過程中，控制元

瀏覽器滑塊、滑鼠事件、滑鼠滑輪、鍵盤事件詳細說明

滑鼠滑輪 必須是在 mousewheel 事件中 註冊事件   window.addEventListener(“mousewheel ”,function(){}); event.deltaY   獲取滑輪沒一格滑動的畫素，正負表示變化趨勢，正增加 event.whee

CSS實現縮圖滑鼠移上去顯示大圖

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js實現點選小圖看大圖

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #o

jQuery滑鼠經過顯示大圖

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5

html點小圖看大圖最快捷的方法

idt 方法 col round blank .sh -c span src 方法: <td> <a href="{$vo.show_img}" target="_blank"><img style="width: 40px;height: 4

jQuery PC端圖片預覽，鼠標移上去查看大圖

utf-8 charset order inline logs 鼠標 w3c auto end <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

html點選小圖檢視大圖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

WPF圖片瀏覽器（顯示大圖、小圖等）

1.概述                最近利用WPF做了一個圖片瀏覽器，能夠將資料夾中的所有圖片以小圖的形式顯示，並將選中的圖片以512*512大小顯示。顯示大圖當然用的是WPF自帶的Image控制元件，而顯示小圖則需要將所有的圖片放入ListBox控制元件中，ListB

web前端實驗一：利用Js捕獲滑鼠事件實現圖片切換

    很多時候在做web時，頭疼的不是功能的實現，而是前臺的介面，下面是介紹關於利用javascript捕獲滑鼠事件的實驗 實驗目的：滑鼠指向某一圖片時，把該圖片切換為指定圖片，離開時回覆原來圖片。 實驗用途：製作web導航、強調某一功能時非常常用。 直接附上原始碼，非

JS事件：onmouseover onmouseout &&onmouseenter onmouseleave &&onmousemove的區別

mil 正常 strong body scrip mar borde 導航欄 一個 一：onmouseover、onmouseout： 鼠標經過時自身觸發事件，經過其子元素時也觸發該事件；（父親有的東西，兒子也有） 二：onmouseenter、onmouse

楊老師課堂之JavaScript懸浮事件（滑鼠移入移出事件）

 今天給大家分享一個簡單的JavaScript事件案例： 該事件屬於懸浮事件 改程式碼邏輯非常簡單，主要是 當滑鼠移動到按鈕上顯示一個盒子，移開之後盒子隱藏 JavaScript事件中     onmouseover 代表的是滑鼠指標移動到指定的物件

前端（十五）—— JavaScript事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件

JS事件：繫結事件方式、事件的冒泡和預設事件、滑鼠事件、鍵盤事件、表單 事件、文件事件、圖片事件、頁面事件 一、事件的兩種繫結方式 ******* 1、on事件繫結方式 document.onclick = function() { console.log("文件點選"); } // on事件只

python+selenium三：滑鼠事件與鍵盤事件 python+selenium三：滑鼠事件與鍵盤事件

python+selenium三：滑鼠事件與鍵盤事件   # 1、滑鼠事件：# 每個模擬事件後需加.perform() 才會執行# context_click() 右擊# double_click() 雙擊# drag_and_drop(source, target) 拖動#

學習筆記21：QMouseEvent滑鼠事件簡介

一、QMouseEvent的詳細描述 首先請注意，Qt中的QMouseEvent一般只涉及滑鼠左鍵或右鍵的單擊、釋放等操作，而對滑鼠滾輪的響應則通過QWheeEvent來處理。 QMouseEvent類包含了用於描述滑鼠事件的引數。 當在一個窗口裡按住滑鼠按鍵、或移動、或釋放就會產生滑鼠事件QMouse

JS基礎(二)事件監聽練習之table滑鼠懸停行變色

JS監聽事件簡單學習: 　　[object].addEvent("事件型別","處理函式","冒泡事件或捕獲事件");　   [object].removeEvent("事件型別","處理函式","冒泡事件或捕獲事件"); 場景: 　　表格標題行背景色是黃色，奇數行是白色，偶數行是灰色。