源于漫音混合体的提问——
漫音混合体
2007-11-25 14:33:44
#10
请问一下那个照片会动的是怎样子做成的！
现将博客边栏加滚动图片代码公布。
鉴于还有几种样式，
可惜再试时存在尚未解决的问题，
所以现在才公布，且只公布现在可看到效果的代码了……
效果描述：
图片匀速滚动，鼠标指向时移动停止，弹出图片相关说明，鼠标单击时打开链接新窗口，显示相关日志，鼠标离开后图片滚动继续。
代码如下：
<p align="center"><a></a><marquee onmouseover="this.stop();" onmouseout="this.start();" scrollamount="3" vspace="1">
<table cellspacing="1" cellpadding="1" width="200" align="center" summary="" border="0">
<tbody>
<tr>
<td><font face="Arial"><a target="_blank" href="链接网址"><img height="72" width="96" alt="图片说明" src="图片地址" /></a></font></td>
<td><font face="Arial"><a target="_blank" href="链接网址"><img height="72" width="96" alt="图片说明" src="图片地址" /></a></font></td>
<td><font face="Arial"><a target="_blank" href="http://blog.5d.cn/user10/glxcb/200601/196862.html"><img height="72" width="96" alt="小九九近照" src="http://blog.5d.cn/user10/glxcb/upload/2006-01/8_752.jpg" /></a></font></td>
</tr>
</tbody>
</table>
</marquee></p>
－－－－－－－－－－－
说明：1、scrollamount="3" 的数字为移动速度，可以调整。
2、继续添加图片整段复制 <td>……</td>部分即可，修改相关参数。
3、调整图片大小。height="72" width="96"
4、一个实例，记得删除：P <td>……</td>
5、未经检验的知识，不妨了解。
基本格式：<marquee scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle>
把图片的连接地址写在这里
</marquee> |
1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。
<marquee direction=left>从右向左滚动</marquee>
<marquee direction=right>从左向右滚动</marquee>
2.behavior属性:指定文本的滚动方式，分为三种:
Scroll:从一端消失后，在另一端出现并继续滚动。
<marquee behavior=scroll>一圈一圈地滚动</marquee>
Slide:从一端滚动，接触到另一端后停止
<marquee behaviro=slide>只滚动一次就停止</marquee>
Alternate:从一端滚动到另一端后，反向滚动。
<marquee behavior=alternate>来回滚动</marquee>
direction=up（left、right、down） 这个属性可以更改，这样就可以实现上下左右了
－－－－－－－－－－－－
其他样式调整好也将在此公布，欢迎关注。
其他样式之一：解决图片连续的问题。本博客边栏正在用。
代码如下：
<p>
<table style="WIDTH: 551px; HEIGHT: 85px">
<tbody>
<tr align="center">
<td>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 540px; HEIGHT: 84px">
<table>
<tbody>
<tr>
<td id="demo1">
<table cellspacing="0">
<tbody>
<tr>
<td><font face="Arial"><a target="_blank" href="http://blog.5d.cn/user10/glxcb/200601/198986.html"><img height="72" alt="那我说你听啊" width="96" src="http://art.5d.cn/SArts/2007-11/464431311650.JPG" /></a></font></td>
<td><font face="Arial"><a target="_blank" href="http://blog.5d.cn/user10/glxcb/200702/333637.html"><img height="72" alt="九九日记" width="96" src="http://photo1.bababian.com/20070208/FC89530858A57949CBEA160B67AAB329_500.jpg" /></a></font></td>
<td><font face="Arial"><a target="_blank" href="http://blog.5d.cn/user10/glxcb/200601/196862.html"><img height="72" alt="小九九近照" width="96" src="http://blog.5d.cn/user10/glxcb/upload/2006-01/8_752.jpg" /></a></font></td>
</tr>
</tbody>
</table>
</td>
<td id="demo2"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<script>
var speed=10//速度数值越大速度越慢
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> </p>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上一篇：嫦娥一号传回的首幅月面图像 下一篇：隐藏日志20-9（本日志强制显示）
