网站首页 -   -  建站入门 -  建站步骤 -  视频教程 -   -   -  常用软件 -  优化网页 -  网络知识 -   -   关于模板 -   关于域名 -  FTP管理 -  ICP备案 -  邮箱管理 -  网络推广 -  销售心得 -  成功案例 -  dreamweaver知识 -  photoshop知识 -  域名绑定 -  深圳网监局备案 -
图片由下向上滚动

发布时间 2007-06-30

第一步:将图片大小为290*150像素的九张图片,分别命名为:1.jpg;2.jpg;3.jpg;4.jpg… 9.jpg 
第二步:
在桌面在创建一个文件夹,命名为"up",将这9张图放在up文件夹里
第三步:用FLASHFXP软件将up文件夹上传到data目录下。

 第四步:将以下代码在编辑器的代码视图里插入到合适的位置:

<style type="text/css">
img{ border:0px; }
</style> 
<!-- 指向链接图片url -->  
<div id=demo style=overflow:hidden;height:600;width:290;background:#000000;color:#ffffff> 
<div id=demo1> 
<!-- 定义图片 --> 
<a href="http://www.51rich.net" target="_blank"><img src="data/up/1.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/2.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/3.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/4.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/5.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/6.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/7.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/8.jpg"></a>
<a href="http://www.51rich.net" target="_blank"><img src="data/up/9.jpg"></a>

</div> 
<div id=demo2></div> 
</div> 

<script> 
var speed=10 
demo2.innerHTML=demo1.innerHTML 
function Marquee()

if(demo2.offsetTop-demo.scrollTop<=0) 
demo.scrollTop-=demo1.offsetHeight 
else{ 
demo.scrollTop++ 


var MyMar=setInterval(Marquee,speed) 
demo.onmouseover=function() 
{
clearInterval(MyMar)

demo.onmouseout=function() 
{
MyMar=setInterval(Marquee,speed)

</script>  

代码解释:

1、其中9行蓝色代码是分别是9张图的代码(即第1行是1.jpg这张图的代码,如此类推),如果您的图片不是9张,可以相应地增加或者减少几行代码!每行代码的区别就是图片文件名不同!第1行是1.jpg 第2行是2.jpg
2、蓝色这行代码中,绿色标记的网址,是指点击这张图片后要链接的新网页的网址,可以修改成自己的网址。
3、
background:#000000代表背景色是黑色,修改此颜色代码,即可改背景色。
4、height:600;width:290代表滚动窗口的高度和宽度,如果您的图片不是290宽的,可以将290这个高度改成相应的值
5、var speed=10  这是控制滚动速度的,修改10 这个数值即可。数值越大,速度越慢。
6、如果图片要加上边框,就把最前面的以下这几行代码删除即可 
<style type="text/css">
img{ border:0px; }
</style> 

 
     效果图如下:

       

 

相关内容
  • 滚动的网站公告制作 2007-07-10
  • 图片从右向左滚动 2008-11-28
  • 图片由下向上滚动 2007-06-30
  • 如何让文字向上滚动 2007-07-04
  • 鼠标旁的滚动链接注释 2008-01-24
  •  
    公司地址:深圳市福田区福民路12号知本大厦706   邮编:518000        
    客服热线:0755-61192828 传真:0755-82915763 
    客服的服务质量投诉::service@51rich.net(如果您觉得哪位客服的服务不好或者服务得超级好,都可以发EM通知我们,并写上原因,谢谢您的监督)
    网站管理