maquee 无缝轮播

页面的自动滚动效果，可由javascript来实现，

但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。

使用marquee标记不仅可以移动文字，也可以移动图片，表格等.

语法：<marquee>...</marquee>；说明：在标记之间添加要进行滚动的内容。

重要属性：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

　　语法：<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

　　语法：<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

　　语法：<marquee scrollamount="5">...</marquee>

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

　　语法：<marquee scrolldelay="100">...</marquee>

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

　　语法：<marquee loop="2">...</marquee>

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head>

<body><div><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">

指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...</marquee></div></body></html>

时间： 2024-10-25 14:11:55

maquee 无缝轮播的相关文章

jQuery制作无缝轮播效果

[一]HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery制作无缝轮播器</title> <script type="text/javascript" src="jquery-1.12.4.js"></script> &

本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个img标签:为了实现无缝轮播,注意第一张图片要与最后一张图片相同: <div class="out"> <div class="imgs"> <img src="img/beatuy.jpg"/> <img s

左右无缝轮播图的实现

无缝轮播图: <title>无缝轮播图</title> <style> *{margin: 0;padding:0; } ul{list-style: none;} .banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;} .img{position: absolute;top: 0;left: 0}

jq实现无缝轮播

2016-10-14 jq实现无缝轮播 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <me

jQuery插件版无缝轮播，重写了之前的代码，显得更高大上一点

轮播图之前也写了好几个,但是对于怎么实现无缝轮播还是有着不小的困惑,趁着周末了解了一下实现原理之后,重写了之前发布的案例(再看那个案例写的代码,真心心塞啊,不过只要努力学习,天天进步就好).好了,下面就来说下如何实现无缝轮播. 百度了很多,各种各样的说法,但说的都不太明白,最后还是看了视频解决的. 我实现的这种思路是这样的:1.假设你是用无序列表实现的哈,里面的每个li 包含着你的一个图片,首先呢,你得克隆一份第一张图片,并将其追加到你的ul 里面.2.通过改变ul 的left 值,你实现了一张

动态添加的无缝轮播

一般的前段都会写百叶窗的无缝轮播,但那种一般局限于静态页面,就是在html后面添加多一屏的图片.但这种遇到程序员后台添加的时候就产生问题,所以我们不能在html页面中直接添加第一屏的图了,那就在jq中获取html中第一屏的内容再添加到最后

jquery实现图片无缝轮播显示（个人随笔）

纯属个人随笔,不当之处,欢迎指正. 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片无缝轮播显示</title> <script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script&g

jquery无缝轮播事Dome

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <script type="text/javascript" src="js/jQuery1.11.1.js"></script> <style type=&qu

js动画无缝轮播进度条文字页面展示 div弹窗遮罩效果

1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser