鼠標滑上去后圖片放大浮出效果的js代碼
更新時間：2011年05月28日 00:14:46 作者：
用javascript做了一個鼠標滑上去后圖片放大浮出的效果，大家指正一下。
復制代碼 代碼如下:
<script>
function GetAbsPosition(obj)
{
var curleft = 0, curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
function ShowFloatingImage(image, width, height)
{
var id = "trailimageid";
var newdiv = document.getElementById(id);
if(newdiv == null)
{
newdiv = document.createElement('div');
newdiv.setAttribute('id',id);
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
document.body.appendChild(newdiv);
}
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
var absPos = GetAbsPosition(image);
newdiv.style.position = "absolute";
newdiv.style.posLeft = absPos[0] - width/2;
newdiv.style.posTop = absPos[1] - height/2;
newdiv.style.display="block";
}
function HideElement(id)
{
var elem = document.getElementById(id);
elem.style.display="none";
}
</script>
例子：
復制代碼 代碼如下:
<body>
<img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
</body>
經(jīng)測試事件處理的不是很好。導致鼠標移開不能回到原位。
相關文章
靜態(tài)圖片的十一種濾鏡效果--不支持Ie7及非IE瀏覽器。
靜態(tài)圖片的十一種濾鏡效果--不支持Ie7及非IE瀏覽器。...2007-03-03
推薦一個不錯的圖片瀏覽效果...2007-06-06
就是在客戶端判斷上傳圖片的大小，尺寸，并生成預覽圖，用JavaScript實現(xiàn)的啊2008-10-10![JavaScript圖片放大鏡效果代碼[代碼比較簡單]](http://img.jbzj.com/images/xgimg/bcimg3.png)
實用漂亮的放大鏡效果，基于JavaScript代碼實現(xiàn)，貌似代碼不太多，但效果確實不錯，因調(diào)用的圖片比較大，所以運行效果后請稍等一會，等待圖片加載。2011-02-02
自上一個版本的圖片切割效果出來后，雖然也經(jīng)常看到“框架開發(fā)這個如何如何容易”之類的評論，但也受到很多人的肯定，小弟在此感謝大家的支持。2008-12-12
圖片自動播放也可通過按鈕控制顯示...2007-02-02
在 IE6 中，可以很方便地利用 img 的 src 屬性，實現(xiàn)本地圖片預覽，然而在 IE7 中，這種辦法卻行不通。需要用 AlphaImageLoader2009-03-03![DOM Scripting中的圖片切換[兼容Firefox]](http://img.jbzj.com/images/xgimg/bcimg7.png)
DOM Scripting中的圖片切換[兼容Firefox]
dom scripting確實是一本對javascript dom編程很有指導意義的書，今天看了書中一個簡單的圖片切換實例，感覺很有意思。2010-06-06
一般用于用戶選擇頭像或選擇性別的需要2008-09-09
北京奧運官方網(wǎng)站幻燈切換效果flash版打包下載
2008-01-01