求救啊,用js实现图片左右滚动,鼠标经过图像会在滚动图像下方的固定位置显示放大图像,速度啊!!!!!

 我来答
百度网友0c90796
2010-09-14 · TA获得超过1611个赞
知道大有可为答主
回答量:2638
采纳率:0%
帮助的人:1089万
展开全部
<!--
在图片标签里添加onmouseover事件,并且将该图片地址作为参数传给show_big函数
-->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div align='center' id='demo' style='overflow:hidden;height:125px;width:740px;'><!--滚动区的高度和宽度-->
<table align='center' cellpadding='0' border='0'>
<tr>
<td id='demo1' valign='top'>
<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>
<tr valign='top'>
<td align='center'>
<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>
<TR>

<TD background="image/bg_03.gif"> </TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproduct&id=2" target=_blank title='免费上网卡'>
<img src="goods/201085233124824.jpg" alt="免费上网卡" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>
</TD>
<TD background="image/bg_03.gif"> </TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproduct&id=3" target=_blank title='最新款语音监听器'>
<img src="goods/2010322133233752.jpg" alt="最新款语音监听器" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>

</TD>
<TD background="image/bg_03.gif"> </TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproduct&id=4" target=_blank title='远拍王'>
<img src="goods/20104557186.jpg" alt="远拍王" width="105" height="80" border="0" onload="javascript:DrawImage(this);" onmouseover="show_big('t')"></a>
</TD>
<TD background="image/bg_03.gif"> </TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproduct&id=8" target=_blank title='手电筒摄像机'>

<img src="goods/20103845747868.jpg" alt="手电筒摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"></a>
</TD>
<TD background="image/bg_03.gif"> </TD>
<TD width="105" height="85" align="center" bgcolor="#E9E9E9">
<a href="?action=showproduct&id=9" target=_blank title='打火机摄像机'>
<img src="goods/2009115195532598.jpg" alt="打火机摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this);"></a>
</TD>

</TR>
</TABLE>
</td>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>

</table>
</div>
<div id="bimg"></div>
<script>
var Picspeed=15
demo2.innerHTML=demo1.innerHTML
function Marquee1(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,Picspeed)
demo.onmouseover=function() {clearInterval(MyMar1)

}
demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)
document.getElementById('bimg').innerHTML='';//当鼠标移出是清空图片
}
function show_big(src){
document.getElementById('bimg').innerHTML='<img src="'+src+'" width=300 height=400>';//在id为bimg的div中显示图片
}
</script>

<!--最新图文代码结束-->

参考资料: www.phptogether.com

xtaai
2010-09-13 · TA获得超过645个赞
知道小有建树答主
回答量:654
采纳率:0%
帮助的人:415万
展开全部
在图像旁边设置个浮动div,给这个div设置z-index,设置左、上的位置,就可以了。剩下用js,在图像上onmouseover触发js显示函数。onmouserout就触发不显示函数。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式