亚洲最大的成网4438,久久亚洲国产精品五月天婷,国产精品亚洲а∨无码播放不卡

鼠標移動到小圖顯示大圖實例

????今天上級交個任務下來，說要能夠鼠標移動到小圖上顯示大圖，以前做過一次，好多人都是用完全的CSS來實現，我技術水平不夠，只能用JS控制了，以前也寫過一次，忘了，這次重新寫過。
???? 由于自己寫的那個網頁內容太多了，把精要的內容貼出來。
????????

<style>

#demo{overflow:hidden;text-align:center;padding:10px;}

#enlarge_images{position:absolute;display:none;z-index:2;border:5px?solid?#f4f4f4}

</style>

<div?id="demo"?style="overflow:hidden;width:120px;text-align:center;padding:10px">

?<img?src="1.jpg"?onload="displayImage(this,75,100)"?style="display:none?border:1px?solid?#eeeeee">

</div>

<div?id="enlarge_images"></div>

var?demo?=?document.getElementById("demo");

var?gg?=?demo.getElementsByTagName("img");

var?ei?=?document.getElementById("enlarge_images");

for(i=0;?i<gg.length;?i++){

?var?ts?=?gg[i];

?ts.onmousemove?=?function(event){

??event?=?event?||?window.event;

??ei.style.display?=?"block";

??ei.innerHTML?=?'<img?src="'?+?this.src?+?'"?onload="displayImage(this,225,300)"?/>';

??ei.style.top??=?document.body.scrollTop?+?event.clientY?+?50?+?"px";

??ei.style.left?=?document.body.scrollLeft?+?event.clientX?+?50?+?"px";

?ts.onmouseout?=?function(){

??ei.innerHTML?=?"";

??ei.style.display?=?"none";

?ts.onclick?=?function(){

??window.open(?this.src?);

}

function?displayImage(imgSrc,?imgW,?imgH)

{

????

????imgSrc.style.display="block";

????imgOldW?=?imgSrc.width;

????imgOldH?=?imgSrc.height;

????

????if((imgOldW?!=?0)?&&?(imgOldH?!=0))

????{

????????

????????if(imgOldW?<=?imgW?&&?imgOldH?<=?imgH)

????????{

????????????imgNewW?=?imgOldW;

????????????imgNewH?=?imgOldH;

????????}

????????else

????????{

????????????imgWH?=?imgW/imgH;??????

????????????imgOldWH?=?imgOldW/imgOldH;

????????????

????????????if(imgWH?<=?imgOldWH)

????????????{

???????????????imgNewW?=?imgW;

???????????????imgNewH?=?imgNewW*(imgOldH/imgOldW);

????????????}

????????????else

????????????{

???????????????imgNewH?=?imgH;

???????????????imgNewW?=?imgNewH*(imgOldW/imgOldH);

????????????}

??????

????????}

????????imgSrc.width??=?imgNewW;

????????imgSrc.height?=?imgNewH;

????????return?imgSrc;

????}

????else

????{

????????imgSrc.width?=?imgW;

????????imgSrc.height=?imgH;

????????return?imgSrc;

????}

}

</script>

posted on 2009-03-05 17:04 JasonChou 閱讀(1485) 評論(0) 編輯收藏所屬分類: html

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JS對聯廣告代碼 td里面連續的英文換行問題 setTimeout和setInterval的使用 iframe自適應高度問題鼠標移動到小圖顯示大圖實例 div下拉框被falsh覆蓋的解決方法 javascript學習筆記(三) javascript學習筆記(二) javascript學習筆記(一) 獲取服務器的時間