快捷導(dǎo)航

鼠標(biāo)放在圖片上顯示大圖的JS代碼

更新時(shí)間：2013年03月26日 14:53:05 作者：

將圖片查詢出來之后，還需要加一個(gè)查看大圖的功能，于是就用js寫了一個(gè)方法，然后在image的onmouseover事件中調(diào)用此方法，這樣在鼠標(biāo)懸浮在小圖上面的時(shí)候，其大圖就會(huì)自動(dòng)的顯示出來。

顯示大圖和隱藏大圖的js代碼：

復(fù)制代碼代碼如下:

//顯示
        obj.style.display="";
        imgbig.src=imgid.src;


        //1、寬和高都超過了，看誰超過的多，誰超的多就將誰設(shè)置為最大值，其余策略按照2、3
        //2、如果寬超過了并且高沒有超，設(shè)置寬為最大值
        //3、如果寬沒超過并且高超過了，設(shè)置高為最大值

        if(img.width>maxwidth&&img.height>maxheight)
        {
            pare=(img.width-maxwidth)-(img.height-maxheight);
            if(pare>=0)
                img.width=maxwidth;
            else
                img.height=maxheight;
        }
        else if(img.width>maxwidth&&img.height<=maxheight)
        {
            img.width=maxwidth;
        }
        else if(img.width<=maxwidth&&img.height>maxheight)
        {
            img.height=maxheight;
        }
   }

   //隱藏圖片
   function out()
   {
document.getElementById('divImage').style.display="none";
   }
</script>

顯示小圖的image和顯示大圖的image：

復(fù)制代碼代碼如下:

<img id="img" src="http://m.fzitv.net/images/logo.gif" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />

    <%--顯示大圖標(biāo)的區(qū)域--%>
    <div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
        <img id="imgbig" src="http://m.fzitv.net/images/logo.gif" alt="預(yù)覽" />
    </div>

您可能感興趣的文章:

相關(guān)文章

給Flash加一個(gè)超鏈接(推薦使用透明層)兼容主流瀏覽器
給一個(gè)Flash加一個(gè)超鏈接,原想直接在object外直接套一個(gè)超鏈接即可，試了之后卻發(fā)現(xiàn)不是這么回事
2013-06-06
使用webpack搭建pixi.js開發(fā)環(huán)境
這篇文章主要介紹了使用webpack搭建pixi.js開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
Bootstrap滾動(dòng)監(jiān)聽組件scrollspy.js使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap滾動(dòng)監(jiān)聽組件scrollspy.js的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
Javascript實(shí)現(xiàn)快速排序（Quicksort）的算法詳解
排序算法（Sorting algorithm）是計(jì)算機(jī)科學(xué)最古老、最基本的課題之一，要想成為合格的程序員，就必須理解和掌握各種排序算法。
2015-09-09
微信小程序授權(quán)登錄的優(yōu)雅處理方式
這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的優(yōu)雅處理方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
基于Flowplayer打造一款免費(fèi)的WEB視頻播放器附源碼
Flowplayer是一款免費(fèi)的WEB視頻播放器。它支持播放flv、swf等流媒體和圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴(kuò)展。下面本篇文章給大家介紹基于Flowplayer打造一款免費(fèi)的WEB視頻播放器，需要的朋友可以參考下
2015-09-09
javascript得到XML某節(jié)點(diǎn)的子節(jié)點(diǎn)個(gè)數(shù)的腳本
得到XML某節(jié)點(diǎn)（pnode）的子節(jié)點(diǎn)個(gè)數(shù)（客戶端）
2008-10-10
JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果完整實(shí)例
這篇文章主要介紹了JS采用絕對(duì)定位實(shí)現(xiàn)回到頂部效果,以完整實(shí)例形式分析了JS定位到頁面頂部功能的實(shí)現(xiàn)方法,涉及javascript動(dòng)態(tài)操作頁面元素與屬性的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
js返回上一頁并刷新的多種實(shí)現(xiàn)方法
這篇文章主要介紹了js返回上一頁并刷新的幾種方法,需要的朋友可以參考下
2014-02-02
一文詳解Vue中插槽的具體使用
Vue的插槽（Slot）是一種可以讓父組件向子組件傳遞內(nèi)容的機(jī)制，這篇文章主要通過一些簡(jiǎn)單的示例為大家介紹了插槽的具體使用，感興趣的小伙伴可以了解一下
2023-06-06