仿当当网商品搜索的一段鼠标效果

本文介绍了一种在网页上实现商品图片鼠标悬停放大预览效果的方法。通过JavaScript编写,该方法能够动态调整图片大小并在鼠标悬停时显示放大后的图片,提升了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

<script>
function hideLayer()
{
var layer = document.getElementById("popImageLayer");
layer.style.visibility
='hidden';
}

function dispear(){
var layer = document.getElementById("popImageLayer");
if ((layer.style.width>0)&& (layer.style.height>0)){
layer.style.width
-=1;
layer.style.height
-=1;
}

else {
layer.style.visibility
='hidden';
if (window.interval)
clearInterval(interval);
}

}

function popImage(obj,img,href) 

var layer = document.getElementById("popImageLayer");
var t=obj.offsetTop;
var l=obj.offsetLeft;
while(obj=obj.offsetParent){
t
+=obj.offsetTop;
l
+=obj.offsetLeft;
}

////////////////////////////////////////////////////////////
var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'> "+
"<A href="+href+" target=_blank><IMG src='"+img+"' onload='DrawImage(this,180,180);'  onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)' border=1></A></td></tr></table>"// onClick='hideLayer();'
//
///////////////////////////////////////////////////////////
layer.innerHTML=content;
layer.style.left 
=+ 35 -90;
layer.style.top 
= t+35-90;
layer.style.visibility
='visible';
}
 
function moveToMouseLoc(e) 

var layer = document.getElementById("popImageLayer");
var offsetX = -5
var offsetY = -5;
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop; 
layer.style.left 
= x + offsetX;
layer.style.top 
= y + offsetY;
return true
}
 


function DrawImage(img,width,height)
if(DrawImage.arguments.length <= 1
width
=height=70;
var image=new Image(); 
image.src
=img.src; 
if(image.width>0 && image.height>0)
{
  
if(image.width>width)
  
{
  rate
=image.height/image.width;
  newHeight
=rate*width;
  img.width
=width;
  img.height
=newHeight;
  }
 
}

if(img.height>height)
{
rate
=image.width/image.height;
newWidth
=rate*height;
img.height
=height;
img.width
=newWidth;
}

}

function DrawImage50(img)
DrawImage(img,
50,50);
}


function high(which2){
theobject
=which2;
highlighting
=setInterval("highlightit(theobject)",40);
}

function low(which2){
clearInterval(highlighting);
which2.filters.alpha.opacity
=40;
}

function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity
+=5
else if (window.highlighting)
clearInterval(highlighting)
}


function delightit(cur2){
if (cur2.filters.alpha.opacity>5)
cur2.filters.alpha.opacity
-=5;
else if (window.highlighting)
clearInterval(highlighting);
}

</script>
<div id="popImageLayer" align="center"  name="popImageLayer"  style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<img src="admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" target="_blank">http://admin.mall.dangdang.com/GoodsImage/S000000460/Small/200608090909231.png" onMouseOver="popImage(this,'admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png" target="_blank">http://admin.mall.dangdang.com/GoodsImage/S000000460/Middle/200608090909231.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0></a>
</center>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值