JavaScript 指定内容在某区域里面滚动

1 js: 父元素.scrollLeft ++;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;}

        #con{
            margin: 0 auto;
            width: 700px;  /* 140X5 ==700 */
            height: 90px;
            outline: 6px solid red;
            overflow: hidden; /* overflow: scroll;*/
        }
        #con div{
            background: grey;
            width: 1440px; outline: 1px green solid; }
        #con img {
            width: 120px;
            margin-right:20px;}

    </style>
</head>
<body>

<div id="con">

    <div id="divImg">

     <!--   inline-block 会解析空格即标签间空格会认为有间距-->
        <img src="images/linkTo1.jpg" alt=""/><img
            src="images/linkTo2.jpg" alt=""/><img
            src="images/linkTo3.jpg" alt=""/><img
            src="images/linkTo4.jpg" alt=""/><img
            src="images/linkTo5.jpg" alt=""/><img
            src="images/linkTo1.jpg" alt=""/><img
            src="images/linkTo2.jpg" alt=""/><img
            src="images/linkTo3.jpg" alt=""/><img
            src="images/linkTo4.jpg" alt=""/><img
            src="images/linkTo5.jpg" alt=""/>

    </div>
</div>


<!--<span id="span1"> </span>-->
</body>
<script>
    function scrollImg(){
        con.scrollLeft ++;
        if( con.scrollLeft  >=con.scrollWidth/2  -20 )
        {
            con.scrollLeft = 0;
        }
       //  span1.innerHTML= con.scrollLeft;
    }
    window.setInterval(scrollImg,10);
</script>
</html>

2 marquee标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
     
        div{
            margin: 50px;
            width: 50px;
            height: 50px;background: lightseagreen;}
    </style>
</head>
<body>

<marquee behavior="scroll" direction="up">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</marquee>
</body>
</html>

<!--  转载： http://www.cnblogs.com/zzuIvy/p/marqueeTest_1.html

语法：<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-->