本文介绍了一种交互式商品预览技术，通过JavaScript实现鼠标悬停时的商品图片放大显示，并且能够精准定位到指定位置。具体包括使用CSS定位与样式调整，以及事件监听与响应机制。此外，还探讨了代码中的一些优化点和潜在问题，如事件遍历和方法调用的改进方向。
这里要注意下：
1. 对象.style.left，值带像素，比如div1.style.left="10px";
2. 放大图的层没有在鼠标附近是由于position属性的问题，设置为绝对后就可以应用X,Y轴的坐标
3. 根据name遍历后直接调用事件+方法还存在点问题，等双休再看看
效果图：
效果图：
=========================================================
源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ex6</title>
<style type="text/css">
td{
border:1px black solid;
text-align:center;
}
img{
width:100;
height:80;
}
#imgBig{
width:400;
height:300;
z-index:10;
}
.hide{
display:none;
}
.show{
display:block;
}
</style>
<script type="text/javascript">
function move(event,imgB){
var x = event.clientX+"px";
var y = event.clientY+"px";
var divB = document.getElementByIdx_x("bigImg");
document.getElementByIdx_x("imgBig").setAttribute("src",imgB)
divB.className="show";
divB.style.position="absolute";
divB.style.left = x;
divB.style.top = y;
}
function out(){
var divB = document.getElementByIdx_x("bigImg");
divB.className="hide";
}
function divOver(){
var divB = document.getElementByIdx_x("bigImg");
divB.className="show";
}
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="800">
<tr>
<td>商品图片</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
<tr>
<td><img src="ex6_1.jpg" name="products" onmousemove="move(event,'ex6_1_b.jpg')" onmouseout="out()"/></td>
<td>HIS 6870 H687QNT1G2M</td>
<td>¥1699.00</td>
</tr>
<tr>
<td><img src="ex6_2.jpg" name="products" onmousemove="move(event,'ex6_2_b.jpg')" onmouseout="out()" /></td>
<td>夏普 LCD-32LX330A 32英寸LED液晶电视</td>
<td>¥3599.00</td>
</tr>
<tr>
<td><img src="ex6_3.jpg" name="products" onmousemove="move(event,'ex6_3_b.jpg')" onmouseout="out()" /></td>
<td>Canon 佳能 EOS 5D Mark II</td>
<td>¥19999.00</td>
</tr>
<tr>
<td><img src="ex6_4.jpg" name="products" onmousemove="move(event,'ex6_4_b.jpg')" onmouseout="out()" /></td>
<td>>飞利浦 劲锋系列 PT720 剃须刀</td>
<td>¥749.00</td>
</tr>
</table>
<div id="bigImg" class="hide">
<img src="" id="imgBig" onmouseover="divOver()" onmouseout="out()" />
</div>
//以下2段待修正
<!-- <script type="text/javascript">
var prodcuts = document.getElementsByName("products");
for(var i=0;i<products.length;i++){
products[i].onmouseover=function(event){
var x = event.clientX;
var y = event.clientY;
alert(x+":"+y);
}
}
</script> -->
<!-- <script type="text/javascript">
var products = document.getElementsByName("products");
for(var i=0;i<products.length;i++){
products[i].onmouseover="move(this.event)";
}
function move(event){
var x = event.clientX;
var y = event.clientY;
alert(x+":"+y);
} -->
</script>
</body>
</html>
扫一扫
1212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
