阿杰的博客
技術,工作,學習,生活

隨筆 - 59 文章 - 70 trackbacks - 0

<

2009年3月

>

日

一

二

三

四

五

六

22

23

24

25

26

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

搜索

積分與排名

積分 - 173879
排名 - 340

閱讀排行榜

評論排行榜

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

????今天上級交個任務下來，說要能夠鼠標移動到小圖上顯示大圖，以前做過一次，好多人都是用完全的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 閱讀(1481) 評論(0) 編輯收藏所屬分類: html

新用戶注冊刷新評論列表


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




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