源于漫音混合体的提问——
2007-11-25 14:33:44
现将博客边栏加滚动图片代码公布。
鉴于还有几种样式,
可惜再试时存在尚未解决的问题,
效果描述:
图片匀速滚动,鼠标指向时移动停止,弹出图片相关说明,鼠标单击时打开链接新窗口,显示相关日志,鼠标离开后图片滚动继续。
代码如下:
<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(本日志强制显示)
回复Comments
作者:
{commentrecontent}