滚动图片代码

      杂记 2007-11-26 18:29:00

源于漫音混合体的提问——


漫音混合体

2007-11-25 14:33:44

#10
请问一下那个照片会动的是怎样子做成的!

现将博客边栏加滚动图片代码公布。

鉴于还有几种样式,

可惜再试时存在尚未解决的问题,

所以现在才公布,且只公布现在可看到效果的代码了……

效果描述:

图片匀速滚动,鼠标指向时移动停止,弹出图片相关说明,鼠标单击时打开链接新窗口,显示相关日志,鼠标离开后图片滚动继续。

那我说你听啊 九九日记 小九九近照 书法是这样炼成的 九九一岁生日 三更灯火五更鸡,正是男儿读书时 同志们好!! 海滩上 儿歌集 哥俩好+sp 成长快乐-两岁生日 科技造就懒人 《逃家小兔》 上学秀 大罐子 山中有老虎,谁堪称大王 重组中国行政区 “打江山”集训营 快乐饺子 我歌也疯狂 春天来了 过年啦~ 九九上园了 第一次发课本 顶级车模及意外 摄影初步

代码如下:

<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(本日志强制显示)

标签集:TAGS:滚动 图片 代码
回复Comments() 点击Count()
喜欢就顶一下

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}