marquee标签的使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>演示marquee</title>

    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        
        marquee{
            border: 1px solid purple;
        }

        img{
            width: 360px;
            height: auto;
        }
    </style>
</head>
<body>

    <!-- 
        direction 表示滚动的方向,值可以是left,right,up,down,默认为left;
        behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动);
        loop 表示循环的次数,值是正整数,默认为无限循环;
        scrollamount 表示运动速度,值是正整数,默认为6;
        scrolldelay 表示停顿时间,值是正整数,默认为0,单位是秒;
        valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle;
        align 表示元素的水平对齐方式,值可以是absbottom:绝对底部对齐(与g、p等字母的最下端对齐),absmiddle:绝对中央对齐,baseline:底线对齐,bottom:底部对齐(默认),left:左对齐,middle:中间对齐,right:右对齐,texttop:顶线对齐,top:顶部对齐;
        bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色;
        height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度;
        hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素; 
    -->

    <marquee direction="left" behavior="alternate" valign="middle" align="absmiddle" scrollamount="10" width="366px">
        <img src="./back1.jpg">
        <img src="./back2.jpg">
        <img src="./back3.jpg">
        <img src="./back4.jpg">
        <img src="./back5.jpg">
        <img src="./back6.jpg">
        <img src="./back7.jpg">
    </marquee>
</body>
</html>

 结果如下:显示一个向左滑动的相册[来回滚动]

 

posted @ 2018-08-12 17:42 wooyoohoo 阅读(...) 评论(...) 编辑 收藏