想实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果
我想实现的效果如上，类似http://www.lao88.cn/index.php这个网站下中间那块的效果，附上一张图
然后我自己试着找了个，但是只是用css完成的，而且效果也不太好，就是下面两张图的效果
代码如下：
<style type="text/css"> /*Tooltips*/ .tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ display:block; position:absolute; top:0px; left:0px; width:220px; height:335px; border:1px solid #999999; background-color:#FFFFFF; padding: 3px; color:black; </style>
<a class="tooltips" href="#tooltips"> <img src="images/1.jpg" width="100" height="100" style="border: 0" alt="念实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果" /> <span> <table> <tr> <td> <img src="1.jpg" style="border: 0" width="212" height="212" alt="念实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果" /> </td> </tr> <tr> <td> name </td> </tr> </table> </span> </a>
总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？
然后我自己试着找了个，但是只是用css完成的，而且效果也不太好，就是下面两张图的效果
代码如下：
<style type="text/css"> /*Tooltips*/ .tooltips{ display:block;position:relative; /*这个是关键*/ z-index:2; } .tooltips:hover{ z-index:3; background:none; /*没有这个在IE中不可用*/ } .tooltips span{ display: none; } .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ display:block; position:absolute; top:0px; left:0px; width:220px; height:335px; border:1px solid #999999; background-color:#FFFFFF; padding: 3px; color:black; </style>
<a class="tooltips" href="#tooltips"> <img src="images/1.jpg" width="100" height="100" style="border: 0" alt="念实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果" /> <span> <table> <tr> <td> <img src="1.jpg" style="border: 0" width="212" height="212" alt="念实现一个鼠标滑到图片上在规定区域内弹出层显示详细信息的效果" /> </td> </tr> <tr> <td> name </td> </tr> </table> </span> </a>
总共有三行数据，但是第二行、第三行和靠边的，弹出的层就超出了这个范围，谁有类似的js，或者是在这个基础上怎么改，能改成和那个网站一样的效果？
给你个思路 1.首先把样式写出来。 2.绑定图片的时候 给每个图片绑定一个onmouseover事件
和一个onmouseout事件，onmouseover这个事件里面带有一个参数id 也就是每一个图片所关联的比如这个产品的id,然后利用ajax查询出这个产品的所有参数，在显示层中显示，onmouseout事件就是控制让显示层隐藏。3.利用我给你的想法,就可以自己动手 丰衣足食