仿maquee效果滚动文字垂直居中图片（js动态向style添加

作者: 给我小前端 | 来源:发表于2017-06-10 11:53 被阅读76次

仿maquee效果滚动文字垂直居中图片（js动态向style添加
VC++ 对话框内平滑文字滚动，垂直向上，仿电影字幕，自媒体必备
CSS居中大全(带截图)
HTML基础学习04_video、audio、滚动视图
CSS中几种常用的居中
HTML 水平居中和垂直居中
CSS图片居中(水平居中和垂直居中)
微信小程序布局-图片+文字
微信小程序布局-图片+文字
Android 仿今日头条文字渐变效果

<!doctype html>
<html lang="en">

<head id="head">
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="jquery-3.1.1.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="marquee.css" />
    <style type="text/css" id="style"></style>
</head>

<body>
    <div>
        ![](logo.gif)
        <div id="cabinet">
            <p id="marquee">
                <font style="color: #F00;"><b>中共中央政治局4月25日召开会议，分析研究当前经济形势和经济工作，审议《关于巡视中央政法单位情况的专题报告》。阿斯顿</b></font><font style="color: #fff;"><b>阿斯顿</b></font>
            </p>
        </div>
    </div>
</body>
<script type="text/javascript">
    window.onresize = function() {
        location = location
    };
    // 创建对象
    var img = new Image();
    var width, height, width_p;
    // 改变图片的src
    img.src = "logo.gif";

    // 判断是否有缓存
    if (img.complete) {
        width = document.body.clientWidth - $('img').width();
        height = $('#img').height();
        width_p = $('p').width();
        doSomething();
    } else {
        // 加载完成执行
        img.onload = function() {
            width = document.body.clientWidth - $('img').width();
            height = $('#img').height();
            width_p = $('p').width();
            doSomething();
        };
        console.log(width+"--"+height);
    }
    function doSomething(){
        $('#cabinet').width(width);
        $('#cabinet').height(height);
        $('#cabinet').css('line-height', height + "px");
        $("#marquee").height(height);
        var dom = document.getElementById('style');
        dom.innerHTML = '#marquee{animation: intro 30s infinite linear;} @keyframes intro { from{margin-left:100%;} to {margin-left: ' + -width_p + 'px;}}' //向id为style的style标签添加css3动画
    }
    
</script>

</html>