导航:首页 > 万维百科 > 网页设计跑马灯样式是什么

网页设计跑马灯样式是什么

发布时间:2020-11-02 22:01:42

1、网页设计中怎样设置跑马灯方向从下到上

你学习来一下marquee,网络自查一下就知道了。
它在网页中这样使用

<marquee direction="up" behavior="scroll" scrollamount="10" scrolldelay="200"> 要滚动的内容</marquee>

2、网页制作里面的跑马灯效果怎样制作鼠标放上就停止的效果?

编写代码啊。<marquee onmouseover="this.stop()" onmouseout="this.start()"> </marquee>

3、网页制作中。不熟悉代码,如何制作图片跑马灯效果。或者如何设置样式

我记得90设计上面有这种免费代码服务 可以生成跑马灯效果 你可以去看看

4、dreamweaver网页制作中,怎样实现图片的走马灯效果

打开 Dreamweaver
新建 HTML 文档;
修改标题为"跑马灯"
保存为 index.html 文件。

首先,编写跑马灯部分的静态 HTML 代码,把图片排列起来
在 <body> 和 </body> 标签中添加以下代码:
<div>
 <ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
<li><img src="img/6.jpg" /></li>
<li><img src="img/7.jpg" /></li>
 </ul>
</div>

给上一步的 HTML 代码中的 div 标签增加 class 属性,如下:
 <div class="con">
编写跑马灯部分的 CSS 样式代码,代码放在 <head> 和 </head> 标签中,如下:
<style type="text/css">
 ul{list-style:none; padding:0; margin:0;}
 .con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}
 .con ul li{ float:left; margin:0 5px 10px 0;}
 .con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}
</style>

引入 JQuery 库
 <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
引入 Marquee 插件
 <script type="text/javascript" src="marquee2.js"></script>
代码放在 </body> 标签前,如图:

给 div 增加 marquee 类
 <div class="con marquee">
保存文件,在浏览器中打开,就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”
如果要修改图片滚动的方向,可以给 div 指定 direction 属性,属性值可以取:
 up 上
 down 下
 left 左
 right 右

5、跑马灯的设计在网页中有什么效果?

根据我多次使用跑马灯,跑马灯的效果在实际的网页设计中还是有一定的应用的,但是没有使用js和焦点图那么直接和效果好。

6、网页制作中怎么样控制文字跑动的速度

marquee标签
功能:
使文字或者图片等产生移动效果
语法:

displaydata


是成对标记

truespeed 未知意义

loop
设定跑马灯的次数

behavior
设定走动方式
① scroll 跑到尽头后再重新开始(默认)
② slide 跑完一次就不跑了
③ alternate 以左右来回移动的方式跑

direction
设定跑马灯移动方向
① left 从右向左(默认方式)
② right 从左向右

scrolldelay
设定移动速度,用来设定延迟时间
数值越大,速度越慢(默认为90)
单位以毫秒来计算

scrollamount
设定移动速度,跑马灯移动距离
数值越大,速度越慢(默认为6)
以移动的pixel为单位

width
调整跑马灯的宽度

height
调整跑马灯的高度

bgcolor
设定跑马灯的背景颜色

只适用于 IE ,叫做"跑马灯" 如 Status Bar 的那种,意指走动或卷动的文字,其参数设定比较多。

Hello

behavior="SCROLL"
决定文字的卷动方式,可选值为:
SCROLL 一般卷动,是内定值。
SLIDE 如幻灯片,一格格的,文字一接触左边便全消失。
ALTERNATE 文字向左右两边撞来撞去。

direction="LEFT"
设定文字设定文字的卷动方向,LEFT 表示向左,是内定值,RIGHT 表示向右。

bgcolor="#0000FF"
设定文字卷动范围的背景颜色,颜色值可参考【调色原理】。

height="30" width="150"
>设定文字卷动范围,可采用相对或绝对,如 30% 或 30 等,单位为像素。

hspace="0" vspace="0"
设定文字的水平及垂直空白位置。

loop="INFINITE"
设定文字卷动次数,其值可以是正整数或 INFINITE,INFINITE 是默认值,表示无限次。

scrollamount="30"
每「格」文字间的间隔,单位是像素。

scrolldelay="500"
文字卷动的停顿时间,单位是毫秒。

7、javascript脚本网页如何制作状态栏的跑马灯

<html> <head> <title> 文字的跑马灯效果 </title> <script Language="JavaScript"> var msg="这是使用JavaScript实现的文字跑马灯效果"; var interval = 100;//定义函数的时间参数,这里是0.1秒。 var maxlen = 120;//定义跑马灯msg处于最右时的位置值。 var space=" "; var seq=maxlen;//定义stext中被选取段的开始位置。 var stext="";//实际显示它的一部分。 var len; for (i=1; i<=maxlen; i++) stext += space; stext += msg;//初始化它,实质是一段空格加上msg。 len=stext.length; function Scroll() { window.status=stext.substring(seq, len);//在状态栏上显示stext从seq开始,长度为len的一部分。 seq++;//seq每次加1,表示每次少显示一个前置空格,视觉效果就是文字提前一格。 if(seq >= len)//如果seq比len大,意味着什么都不显示,或者说到达了左边界,则重新开始。 { seq = 0; } window.setTimeout("Scroll();", interval);//递归调用,过interval毫秒后再次调用Scroll函数。 } Scroll();//调用Scroll函数,进入递归。 </script> </head> <body> <center> <font size=5 color="ff0094"> 递归实现的跑马灯效果 </font> </center> </body> </html>

8、网页中跑马灯效果制作

<div
id=demo>
<div
id=demo1>
这里放你想写的文字或图片!实现无空白循环滚动
</div>
<div
id=demo2></div>
</div>
<script>
var
speed=30
demo2.innerHTML=demo1.innerHTML
//克隆demo1为demo2
function
Marquee(){
//当滚动至demo1与demo2交界时版
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
//demo跳到最顶端
else{
demo.scrollTop++
}
}
var
MyMar=setInterval(Marquee,speed)//设置定时器
//鼠标权移上时清除定时器达到滚动停止的目的
demo.onmouseover=function()
{clearInterval(MyMar)}
//鼠标移开时重设定时器
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>

与网页设计跑马灯样式是什么相关的知识