原生HTML+JS实现横向滚动广告位

提示：以下代码拷贝到本地，填入新建的 .html 文件，使用浏览器打开即可预览效果。
html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>

    <script  src="https://code.jquery.com/jquery-2.2.4.min.js"  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="  crossorigin="anonymous"></script>
    <script type="text/javascript">

        $().ready(function(){
            openMove("moving",10,"http://www.baidu.com");

        });
        /*$().ready(function(){
            alert($("#moving").css("width"));
        });*/
        /*openMove("moveing",100,"http://www.baidu.com")*/
        /*author：huhu；Function：make a div to moving in a row */

        /*定义变量：
         * n：用于给变div定位值
         * bodyWidth：用于动态获取当前浏览器窗口宽度，设置div移动的范围——即响应式布局。
         * divWidth：用于动态设置div宽度——因为如果不动态设置，当div左侧在窗口内，右侧在窗口外时，会使可视窗口的宽度被动增加
         * */
        positioning = -100;
        divWidth = 100;
        primitiveWidth = 100;
        divHeight = 100;
        speed = 0;
        toUrl = "";
        divId = "";

        time="";
        /*参数初始化方法*/
        function openMove(newDivId, newSpeed, url) {
            divId=newDivId;
            divWidth = parseInt($("#" + divId).css("width"));
            positioning= parseInt("-"+ divWidth);
            primitiveWidth = divWidth;
            divHeight = $("#" + divId).css("height");
            speed = newSpeed;
            toUrl = url;
        };
        /*定时器开启函数*/
        function beginMove() {
            /*给定时器一个变量，用于清除定时
             * （"第一个参数为定时器每次循环执行的代码——注意加引号！！！",第二个参数为定时器间隔时间）
             * */
            time = setInterval("remaveDiv()", speed);
        }

        /*书写div移动方式代码*/
        function remaveDiv() {
            // 获取当前浏览器窗口宽度
            bodyWidth = document.documentElement.clientWidth;

            positioning+=1;
            // 获取id为remove的元素
            // 设置div的css样式left属性值
            $("#" + divId).css("left",positioning+"px");

            // 判断定位偏移值与窗口宽度是否相同，相同，则说明div已经完全移动到窗口外，则将偏移值重置
            if(positioning == bodyWidth) {
                    positioning = parseInt("-"+ primitiveWidth);
            }
            // 判断窗口大小减去偏移值是否小于div宽度，如果小于，说明div右侧已经移动到窗口外，所以减小div宽度
            if(bodyWidth - positioning < primitiveWidth) {
                    divWidth--;
            } else { // 如果不小于div宽度，说明div还未移出窗口，所以div宽度仍为初始值（用于div宽度缩小到0后，下一次移动恢复宽度）
                    divWidth = primitiveWidth;
            }
            // 动态设置div宽度
            $("#" + divId).css("width", divWidth+"px");

        }
        /*点击事件：跳转到新页面*/
        function toDress() {
            window.open(toUrl);
        }
    </script>

    <style type="text/css">
        #father {
            height: 100px;
            width: 100%
            position: relative;
        }
        #moving {
            /*设置定位原则：绝对定位，若没有父级的相对定位，则会默认为html元素*/
            position: absolute;
            /*设置div背景图片*/
            /*background-image: url(img/logo.png);*/
            /*设置鼠标在此div上时，显示为小手*/
            cursor: pointer;
        }
    </style>

</head>

<body style="width: 100%;">
    <div>
        <div id="father">
            <!--onmouseover：鼠标移入事件；onmouseout：鼠标移出事件；onclick点击事件-->
            <div style="width: 300px; height: 100px; background-color: skyblue;" id="moving" 
                    onmouseover="clearInterval(time)" onmouseout="beginMove()" onclick="toDress()">
                    你好，我是滚动广告
                    <!--<input type="text" id="number" />-->
            </div>
        </div>
        <div>
            <input type="button" onclick="beginMove()" value="begin" />
            <input type="button" onclick="clearInterval(time)" value="stop" />
        </div>
    </div>
</body>

</html>