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