论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

javascript教程_如何制作滚动图片

文章类别:Javascript | 发表日期:2011-4-22 9:28:56

javascript教程_如何制作滚动图片

(21视频教程网整理)一个很长的图片,滚动显示上面的内容,配图请看最下面那个图片。 
代码如下:
<MARQUEE scrollAmount=5 direction=right><IMG height=250 src="图片地址" width=1000></MARQUEE>

代码说明:
1)、direction=right 是移动的方向,可以更改为如下方向。
               上:up    
               下:down   
               左:right  
               右:left
     scrollamount=5 是向下(上、左、右)移动速度,可以调整,一般设置在1-5的范围内比较好.
2)、大家也可以把代码合起来用,设置成上和下对应,或者左右对应的形式。

3)、代码中的图片可以设置成多张,形成连续的滚动效果。

代码如下:
<MARQUEE scrollAmount=5 direction=right><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0></A></MARQUEE>

 
4)、滚动图片制作成功后,可以用定位代码使之定位在博客页面的任意位置,也可同时加入随屏滚动代码,在拉动滚动条的同时,随滚动条的移动而移动,在页面的相对位置不变。
 
&mdash;—定位在页面固定位置
代码如下:
<DIV style="RIGHT: 300px; POSITION: absolute; TOP: 100px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><MARQUEE scrollAmount=5 direction=right><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0></A></MARQUEE>
定位坐标RIGHT: 300px和TOP: 100px分别表示距离屏幕右边缘和上边缘的的距离,其具体数值可根据实际需求而定。
 
——随屏滚动
代码如下:
<DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression_r(eval_r(document.body.scrollLeft)+eval_r(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression_r(eval_r(document.body.scrollTop)+eval_r(document.body.clientHeight)-200); TEXT-ALIGN: center">
<MARQUEE scrollAmount=5 direction=right><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0><IMG height=270 src="图片地址" width=160 border=0></A></MARQUEE>
关于定位坐标-980和-200的说明:
1、clientWidth后面负数的绝对值越大越靠近左侧。
2、clientHeight后面负数的绝对值越大越靠近上部。
 
代码添加方法:
1,控制面板----自定义设置----首页内容维护----定义空白模板----新建,创建模块标题,显示源代码粘贴代码--保存并返回;
2,控制面板----定制我的首页----点添加模块----点选创建好的模块标题---勾上点击最下面的选取,(页面刷新后,鼠标点住一侧模块标题上,可上下移动新建面板位置)--最后点击保存设置。做第二步的目的是将建立好的模块在博客个人首页里呈现出来。

转载文章的博友请注明来源:  謾軻的BLOG
谢谢!
 
附加:图片左右重复滚动代码
 
 
代码:
<MARQUEE scrollAmount=4 direction=right behavior=alternate><A href="图片地址"><IMG style="WIDTH: 250px; HEIGHT: 350px" height=350 src="图片地址" width=250 border=0></A></MARQUEE>

视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058