<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片无缝移动+点击图片放大显示</title>
<script src="js/FancyZoom.js" language="JavaScript" type="text/javascript"></script>
<script src="js/FancyZoomHTML.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/cabel-v1.css">
</head>
<body onLoad="setupZoom();">
<!-- 此段js用于设置加载出来的图片的宽度与高度-->
<SCRIPT language=JavaScript>
<!--
var flag=false;
function DrawImage(ImgD){ //此处图片的 宽高 定为 100
var image=new Image();
//临时图片变量
image.src=ImgD.src;
//将加载的图片对象设置给 临时图片变量
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 100/100){
//如果图片的宽度比高度要大，那么就判断宽度
if(image.width>100){
//宽度大于100
ImgD.width=100;
//将100赋值给 加载出来的图片宽度
ImgD.height=(image.height*100)/image.width;
//将图片的 （ 高度*100 / 宽度） 赋值给加载出来的图片
}else{
//图片的宽度与高度保持不变
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看详细信息...";
}else{
//如果图片的宽度比高度要小，那么就判断高度
if(image.height>100){
ImgD.height=100;
ImgD.width=(image.width*100)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看详细信息...";
}
}
}
//-->
</SCRIPT>
<!-- #include file="Head1.asp" -->
<!-- 下面的几个 width，值都必须保持一致，否则，显示的图片滚动一轮之后将停止 -->
<div id="demo" style="overflow:hidden; width:720px;border:1px solid red"> <!-- demo 为一个 div,里面包含一个name='demo_table'的 table -->
<table border="1" name="demo_table"cellpadding="0" cellspacing="0" style="border:1px solid #c0de98">
<tr>
<td id="demo1" td style="color:#0000CC " align="center">
<!-- demo1 为table demo_table 的一个td,它里面包含一个 table -->
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<%
set rs_Product=server.createobject("adodb.recordset")
sqltext="select top 9 * from Product where Passed=True and Elite=true
order by UpdateTime desc"
rs_Product.open sqltext,conn,1,1
%>
<tr align="center">
<%
If rs_Product.eof and rs_Product.bof then
response.write "<td><p align='center'><font color='#ff0000'>还没任何产品</font></p></td>"
else
Do While Not rs_Product.EOF%>
<td>
<img src=<%=rs_Product("DefaultPicUrl")%> onload=javascript:DrawImage(this);></td>
</td>
<% if row_count mod 9 =0 then%>
</tr>
<tr>
<%end if%>
<%
rs_Product.MoveNext
Loop
end if
rs_Product.close
%>
</tr>
</table>
1111111111111111111<table width="720" >
<tr>
<td style="color:#0000CC " align="center">
</td>
</tr>
</table>1111111111111111111
</td>
<td id="demo2">ddddddddddddd</td>
</tr>
</table></div>
<!-- 此段js用于滚动内容-->
<script>
var speed=5;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {
clearInterval(MyMar)
}
demo.onmouseout=function() {
MyMar=setInterval(Marquee,speed)
}
</script>
</body>
</html>
程序代码：