鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
更新時(shí)間:2011年05月28日 00:14:46 作者:
用javascript做了一個(gè)鼠標(biāo)滑上去后圖片放大浮出的效果,大家指正一下。
復(fù)制代碼 代碼如下:
<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>
例子:
復(fù)制代碼 代碼如下:
<body>
<img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
</body>
經(jīng)測(cè)試事件處理的不是很好。導(dǎo)致鼠標(biāo)移開(kāi)不能回到原位。
您可能感興趣的文章:
相關(guān)文章
兼容ie、firefox的圖片自動(dòng)縮放的css跟js代碼分享
這個(gè)功能主要是解決內(nèi)容頁(yè)中的圖片過(guò)大撐出,導(dǎo)致頁(yè)面比較難看,就需要這樣的代碼,需要的朋友可以參考下2012-01-01SuperSlide2實(shí)現(xiàn)圖片滾動(dòng)特效
SuperSlide2,實(shí)現(xiàn)圖片滾動(dòng),感覺(jué)很強(qiáng)大,這里只是簡(jiǎn)單的演示其中一種類(lèi)型,想看更多類(lèi)型的話,可以去http://www.superslide2.com 查看,2014-06-06JS實(shí)現(xiàn)全景圖效果360度旋轉(zhuǎn)
JS實(shí)現(xiàn)全景圖效果360度旋轉(zhuǎn)...2007-01-01ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼 img.src
ie8.0下顯示本地圖片的js實(shí)現(xiàn)代碼,IE8.0 顯示本地圖片 img.src=本地圖片路徑 是無(wú)效,只能通過(guò)div來(lái)完成2012-03-03JavaScript判斷圖片是否能夠加載,失敗則替換默認(rèn)圖片
JavaScript智能判斷圖片是否能夠正確加載,若加載失敗則用默認(rèn)圖片替換,這是個(gè)比較實(shí)用的功能,不少網(wǎng)站都可見(jiàn)到這種功能.2010-10-10