Clarence-pan/css3_raw_js.marquee.html

## css3_raw_js.marquee.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Marquee Test</title>
    <style>
        .marquee{
            width: 800px;
            height: 44px;
            line-height: 44px;
            background: #e9eaea;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            position: relative;
        }
        .marquee .content{
            display: inline-block;
            position: relative;
            padding-right: 0px;
            transition-delay: 0;
            transition-timing-function: linear;
            transition-property: transform;
        }
    </style>
</head>
<body>

<div class="marquee">
  <span class="content">
    raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。跑马灯测试。。。
  </span>
</div>
<script>
    //滚动
    (function () {
        var speed = 100; // 速度 -- px每秒

        var $marquee = document.querySelector('.marquee');
        var $marqueeContent = $marquee.querySelector('.content');

        // 内容复制3份好有连续性
        $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML

        var contentWidth = $marqueeContent.getBoundingClientRect().width;
        if (contentWidth <= 0) { // 没有内容搞什么动画
            return;
        }

        // 内容复制了3份，宽度也要除以3
        contentWidth = contentWidth / 3

        var onceTime = contentWidth / speed * 1000; //ms

        $marqueeContent.addEventListener('transitionend', render)

        render();

        function render() {
            // 回到起点，循环播放
            $marqueeContent.style.transitionDuration = '0s'
            $marqueeContent.style.transform = 'translateX(0px)'

            // 强制重绘
            $marqueeContent.getBoundingClientRect()

            // 继续播放下一个循环
            $marqueeContent.style.transitionDuration = onceTime + 'ms'
            $marqueeContent.style.transform = 'translateX(' + (-contentWidth) + 'px)'
        }
    })()
</script>

</body>
</html>

## jquery_animation.marquee.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Marquee Test</title>
    <style>
        .marquee{
            width: 800px;
            height: 44px;
            line-height: 44px;
            background: #e9eaea;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            position: absolute;
        }
        .marquee .content{
            display: inline-block;
            position: relative;
            padding-right: 0px;
            transition-timing-function: linear;
            transition-property: left;
        }
    </style>
</head>
<body>
<div class="marquee">
  <span class="content">
    jQuery animate 跑马灯测试。跑马灯测试。跑马灯测试。跑马灯测试。。。
  </span>
</div>
<script src="https://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>
<script>
    //滚动
    (function () {
        var $marquee = $('.marquee');
        var $marqueeContent = $marquee.find('.content');
        $marquee.append($marqueeContent.clone());
        $marquee.append($marqueeContent.clone());
        $marqueeContent = $marquee.find('.content');

        var left = 0;
        var contentWidth = $marqueeContent.outerWidth();
        if (contentWidth <= 0) { // 没有内容搞什么动画
            return;
        }

        var speed = 100;
        var onceTime = contentWidth / speed * 1000; //ms

        render();
        function render() {
            setTimeout(function () {
                $marqueeContent.css({left: 0});
                $marqueeContent.css('left'); // 强制重绘
                $marqueeContent.animate({left: -contentWidth}, onceTime, 'linear', once(render)); // 回调会调用多次，但是我们只要一次
            }, 0);
        }

        function once(func) {
            var done = false;
            return function () {
                if (!done) {
                    done = true;
                    func.apply(this, arguments);
                }
            };
        }
    })()
</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS3 Marquee Test</title>
	<style>
	.marquee{
	width: 800px;
	height: 44px;
	line-height: 44px;
	background: #e9eaea;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	position: relative;
	}
	.marquee .content{
	display: inline-block;
	position: relative;
	padding-right: 0px;
	transition-delay: 0;
	transition-timing-function: linear;
	transition-property: transform;
	}
	</style>
	</head>
	<body>

	<div class="marquee">
	<span class="content">
	raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。跑马灯测试。。。
	</span>
	</div>
	<script>
	//滚动
	(function () {
	var speed = 100; // 速度 -- px每秒

	var $marquee = document.querySelector('.marquee');
	var $marqueeContent = $marquee.querySelector('.content');

	// 内容复制3份好有连续性
	$marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML

	var contentWidth = $marqueeContent.getBoundingClientRect().width;
	if (contentWidth <= 0) { // 没有内容搞什么动画
	return;
	}

	// 内容复制了3份，宽度也要除以3
	contentWidth = contentWidth / 3

	var onceTime = contentWidth / speed * 1000; //ms

	$marqueeContent.addEventListener('transitionend', render)

	render();

	function render() {
	// 回到起点，循环播放
	$marqueeContent.style.transitionDuration = '0s'
	$marqueeContent.style.transform = 'translateX(0px)'

	// 强制重绘
	$marqueeContent.getBoundingClientRect()

	// 继续播放下一个循环
	$marqueeContent.style.transitionDuration = onceTime + 'ms'
	$marqueeContent.style.transform = 'translateX(' + (-contentWidth) + 'px)'
	}
	})()
	</script>

	</body>
	</html>