图片滚动代码word精品文档11页.docx

varspeed=30;

marquee_product2.innerHTML=marquee_product1.innerHTML;

functionMarquee（）{

if（marquee_demo.scrollLeft>=marquee_product1.scrollWidth）{

marquee_demo.scrollLeft=0;

else{

marquee_demo.scrollLeft++;

varMyMar=setInterval（Marquee,speed）;

marquee_demo.onmouseover=function（）{clearInterval（MyMar）;}

marquee_demo.onmouseout=function（）{MyMar=setInterval（Marquee,speed）;}

如何用Dreamweaver制作滚动字幕和滚动图片

滚动字幕和滚动图片相信很多地方都会看见的，其实制作也非常简单，我也是自己学习的，今天就教给大家，希望有所帮助。

制作滚动字幕大多数都会选择用Dreamweaver来做比较简单，也可以用PS制作，今天我就教大家用Dreamweaver来制作，没有这个软件的可以到网上下载就可以了，我是用的Dreamweaver8，开始做多试下，相信您也可以打造个属于自己风格的店铺！

  其实Dreamweaver很多学习都是比较有用的，如果有时间可以多了解哈，还有图片和字幕的链接都是可以在里面设置的，很方便。

今天在这里罗嗦了，请多多谅解哦！

下面是制作的详细步骤，希望对您有帮助！

Dreamweaver制作滚动字幕是使用“标签选择器”插入“marquee”标签，如下图所示！

1、首先把光标插入点放在需要插入滚动字幕的地方，也可直接在代码那插入一样。

2、点击插入面板的“标签选择器”页元素。

3、选择“marquee”标签，点“插入”按钮。

4、转换到代码栏，把光标插入点放到“marquee”标签内，然后输入您需要滚动的文字内容，如下图所示！

5、选择窗口，标签的属性栏设置文字的各种用法。

（1）、点behavior设置右边的下拉箭头，选择滚动文字的运动方式

        altemate是文字在相反的方向滚来滚去.

         Scroll是文字向同一个方向滚动.

         Slicle是文字或图片接触到文字边框停止滚动.

（2）、direction设置右边的下拉箭头，选择文字内容的滚动方向。

       down向下滚动   left向左滚动

        right向右滚动   up向上滚动

（3）、width滚动内容的宽度。

6、标签检查器属性旁边的“行为”也是可以设置的，设置滚动文字的动作，常为停止滚动或设置鼠标离开滚动字幕的动作。

   事件onMonseover动作[this.stop（）；]

   事件onMouseout  动作[this.start（）；]

     好啦，该睡觉了哦，希望对自己学习装修店铺的朋友有所帮助，其实滚动字幕和滚动图片是一样的设置，自己多试试就很快会了，打造一个属于自己的店铺是有必要的哦，因为是第一次写这种文章，在这里献丑了，希望高手朋友多多指教，写得不好，请谅解！

如有不明白的地方可以留言跟贴或来小店联系，我一定尽最大努力解决！

希望可以共同交流，彼此学习！

祝大家“端午”节快乐！

还有很多免费的装修素材，如有需要可以和我联系，希望能有所帮助！

送给大家一套向上滚动的字幕代码，直接将代码放到您需要滚动的地方。

12px;"onMouseOver="this.stop（）;"onMouseOut="this.start（）;">

缘衣轩韩版服饰店欢迎您！

这里内容换成您自己的文字

Dreamweaver图片滚动代码

图片滚动代码（从右向左滚动）

//要滚动的图片地址1">

//要滚动的图片地址2">

图片滚动代码（从下往上滚动）

//要滚动的图片地址1">

//要滚动的图片地址2">

文字来回滚动代码：

我来解说一下上面的代码的意思吧!

   marqueebehavior="alternate"这是来回滚动的代码scrollamount="3"这里面的3字表示文字滚动的速度数字越大滚动的速度也越快width="100"表示你的图片的宽度

height="100"表示你的图片的高度

360度的全景照片

网页上欣赏到360度的全景照片是一件很有趣的事，不要担心制作过程会很复杂，我们在这里介绍一种最简单的方法，同样可以达到效果，学起来很容易，只要会一点点html和css的基本语法就足够了。

注意：

这个效果只有用IE浏览器才能看到。

下面我们来看看整个的制作过程：

第一步：

准备一张全景图片。

您可以自己拍也可以从网上下载。

当然如果您摄影技术足够高的话我还是建议你自己拍一张（题材如家庭居室的全景等），这样显得更加生动一些；如果你和我一样是个摄影菜鸟，那么还是在网上找一幅吧，如果也不是那么好找，我这里提供给你两幅照片：

前者是一个棒球场的全景，后者是一个办公室的全景，图片名称分别是yl-020315-3d.jpg和yl-020315-3d2.jpg。

第二步：

做一个表格存放图片

用Dreamweaver等网页制作软件做一个1行2列的表格，以便在左边的单元格内放置滚动的文字说明，右边的单元格放置全景图片。

在表格属性中作如下设置：

border="0"cellspacing="0"cellpadding="0"height="150"width="220"，注意高度和所选的全景图片一致；左侧单元格宽度为20，右侧为200；为表格做个边框，我们可以利用css定义：

style="border:

#3333663double"，即边框颜色采用#333366，宽度为3，线形为双线。

然后我们再给两个单元格中间设置分界线，即对左侧单元格使用样式：

style="border-right:

#3333663double"，颜色线型和表格外框一致；接着将左侧单元格的背景色设置为#333366，把右侧单元格的背景设置为yl-020315-3d.jpg，即作成如下模样：

第三步：

使全景图片移动

要使图片移动的方法很多，如用Dreamweaver的层和时间线，用javascript，甚至可以用javaapplet,不过我们这里用简单的：

marquee。

我们先了解一下marquee的主要参数：

bgcolor背景颜色，可输入颜色的英文名称或者16进制代码等；

direction=left|right|up|down滚动方向（左|右|上|下）

behavior=scroll|slide|alternatescroll表示由一端滚动到另一端；

slide表示由一端快速滑动到另一端，不再重复；

alternate表示在两端之间来回滚动；

height＝数值滚动区域的高度；

width=数值滚动区域的宽度；

scrollamount=数值决定滚动的速度，数值越大滚动越快；

Scrolldelay=数值延迟时间，数值越大跳跃越明显；

loop＝数值循环次数，不设置该值即表示无限循环。

注意，marquee不仅可以使文字滚动，也可以使图片滚动，只要在和间插入就可以了。

下面我们就把全景图片插入到右侧的单元格中，代码如下：

然后我们对它添加一些行为：

onClick="this.start（）"当鼠标点击时开始播放；

onMouseOver="this.stop（）"当鼠标移入时停止播放；

onMouseOut="this.start（）"当鼠标移出时继续播放。

另外，我们还可以加上标题：

style="title:

标题内容"；改变鼠标式样：

style="cursor:

hand"等，全部代码如下：

hand"behavior=scrolldirection=leftwidth=200height=150scrollamount=2scrolldelay=0onClick='this.start（）'onMouseOver='this.stop（）'onMouseOut='this.start（）'>

如果你细心的话会发现图片滚动时头尾对接不上，解决的办法是在插入图片的地方重复多插几次图片，或者使用一点javascript语句让图片循环滚动。

　for（t=1;t<=1000;t++）

　document.write（""

第四步：

制作滚动的文字说明

制作滚动文字对大家来说是家常便饭，至于怎样把文字竖排也不难，只要加上如下样式：

style="writing-mode:

tb-rl"即可，其中tb表示top-bottom，rl表示right-left。

代码如下：

#3333663double">

hand"behavior=scrolldirection=rightwidth=20height=150scrollamount=1scrolldelay=0onmouseover='this.stop（）'onmouseout='this.start（）'>

20;writing-mode:

tb-rl;font-size:

9pt"