<!DOCTYPE html PUBLIC >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.col_kx { OVERFLOW: hidden; WIDTH: 700px }
</style>
</head>
<body>
<div id="header_demo" class="col_kx">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header_demo1" nowrap>
<!--滚动头条-->
<img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg><img src=4.jpg>
<td id="header_demo2" nowrap></td>
</tr>
</table>
</div>
<script>
//滚动头条
//滚动效果
var header_demo = document.getElementById("header_demo");
var header_demo1 = document.getElementById("header_demo1");
var header_demo2 = document.getElementById("header_demo2");
var speed=10; //数值越大滚动速度越慢
header_demo2.innerHTML = header_demo1.innerHTML;
//header_demo2.offsetWidth 总宽度
//alert(header_demo2.offsetWidth +"-"+header_demo.scrollLeft);
function Marquee(){
if(header_demo2.offsetWidth-header_demo.scrollLeft<=0)
header_demo.scrollLeft-=header_demo1.offsetWidth
else{
header_demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee,speed);
header_demo.onmouseover = function(){clearInterval(MyMar)}
header_demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
</script>
</body>
</html>
分享到：
相关推荐
<marquee onMouseOut="this.start()" onMouseOver="this.stop()">鼠标交互示例</marquee> ``` #### 六、综合示例 下面是一个包含多个属性的 `<marquee>` 示例： ```html <marquee id="affiche" align="left" ...
<img src="image.jpg" alt="示例图片" width="200" height="150" border="1"> ``` #### 7. 表格标记：`<table>` 表格标记用于在网页中创建表格。 - **align**：定义表格在页面中的对齐方式。 - **background**：...
`<marquee behavior="scroll" direction="left" scrollamount="3">滚动的文字或图像</marquee>` - `behavior`: 控制滚动行为，可选值为`scroll`（默认，连续滚动）、`slide`（只滚动一次）和`alternate`（来回滚动...
1. **滚动方向**：如果两个`<marquee>`标签有不同的滚动方向（一个水平，另一个垂直），嵌套的`<marquee>`可能会按照它们各自的方向滚动，但由于嵌套关系，可能会出现相互干扰的情况，导致视觉上的混乱。 2. **滚动...
在网页设计中，`<marquee>` 标签是一种非常实用的元素，用于创建滚动文本或图像。尽管它不是HTML5的一部分，并且在现代Web开发中较少使用，但在某些特定场景下，它仍然可以发挥独特的作用。下面我们将详细探讨`...
其中一种常见的动态效果就是利用`<marquee>`标签来实现文字或图片的自动滚动。不过，在提供的代码片段中，并没有直接使用HTML标准中的`<marquee>`标签，而是通过JavaScript结合CSS来模拟了类似的效果。接下来，我们...
该课件是关于marquee的讲解： 方向：<direction=#> #=left, right,up,down <marquee direction=left>从右向左移！</marquee> 方式：<bihavior=#> #=scroll, slide, ...<marquee behavior=alternate>来回走</marquee>
`<marquee>`标签包含在一对尖括号`<marquee>...</marquee>`之间，你可以设置它的速度（scrollamount属性），滚动方向（direction属性）以及是否循环播放（loop属性）。例如： ```html <marquee scrollamount="3" ...
<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>.....
### 文字滚动代码详解：`<marquee>` 标签及其属性 在网页设计与开发过程中，有时我们需要实现一些简单的动态效果，例如滚动的文字或图片等。这些效果可以通过使用 HTML 的 `<marquee>` 标签来轻松实现。下面将详细...
<marquee>公告内容</marquee> ``` 默认情况下，内容会从左向右滚动。为了使内容从右向左滚动，我们可以添加`direction`属性并设置其值为`right`： ```html <marquee direction="right">公告内容</marquee> ``` ...
* 向中看齐：<CENTER></CENTER>，文字与图片都可以 * 闪耀：<BLINK></BLINK>，有史以来最被嘲弄的标签 * 字体大小：<FONT SIZE=?></FONT>，从1到7 * 改变字体大小：<FONT SIZE=+|-?></FONT> * 基本字体大小：...
1. 普通卷动：`<marquee behavior=scroll>...</marquee>` 2. 滑动：`<marquee behavior=slide>...</marquee>` 3. 预设卷动：`<marquee behavior=alternate>...</marquee>`（来回滚动） 4. 向下滚动：`<marquee ...
<marquee hspace="20" vspace="20" width="150" bgcolor="ffaaaa" align="middle">设置边距</marquee> ``` 以上就是关于HTML `<marquee>`标签的基本知识点介绍。需要注意的是，由于`<marquee>`标签已经被HTML5...
* 设定图片边框：<img src="图片地址" border="1"> * 背景音乐：<bgsound src="MID 音乐文件地址"> 表格语法 * 表格位置：<table align="left">...</table> * 表格背景图片：<table background="图片路径">...</...
- `<marquee direction="down"></marquee>`、`<marquee direction="up"></marquee>`、`<marquee direction="right"></marquee>`、`<marquee direction="left"></marquee>`分别用于设置滚动方向。 - `<marquee loop...
- **图片滚动**：这意味着`<marquee>`标签或插件可以应用于图片元素，让图片也能实现滚动效果。 - **无缝滚动**：这是一个设计上的概念，强调滚动过程的平滑和连续，没有明显的中断。 - **marquee**：这是HTML中的一...
* 向中看齐： `<CENTER></CENTER>`，文字与图片都可以 * 闪耀： `<BLINK></BLINK>`，有史以来最被嘲弄的标签 * 字体大小： `<FONT SIZE=?></FONT>`，从1到7 * 改变字体大小： `<FONT SIZE=+|-?></FONT>` * 基本字体...
1. `<marquee>`标签在现代网页设计中并不推荐使用，因为它已经被认为是非标准的标签。 2. 在某些浏览器中，`<marquee>`标签可能无法正常显示或者行为有所差异。 3. 对于更复杂的效果，建议使用JavaScript或者CSS3...