1. 程式人生 > 資訊 >中國空間站航天員首次出艙:全景相機拍到地球絕美畫面

中國空間站航天員首次出艙:全景相機拍到地球絕美畫面

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 
0; margin: 0; } .container { width: 500px; height: 600px; margin: 100px auto; } .video { width: 500px; height: 500px; position: relative; display: flex; align-items: center; } .video img { width:
100%; height: 100%; } .botom { width: 100%; height: 100px; display: flex; } .botom .input { flex: 1; /* height: 100px; */ } .botom button { height: 100%; } .video p { position: absolute; left:
100%; display: flex; align-items: center; } .video p img { width: 50px; height: 50px; border-radius: 50%; } .video p span { display: block; margin-left: 10px; white-space: nowrap; } </style> </head> <body> <div class="container"> <div class="video"> <img class="vdimg" src="../images/3.jpg" alt=""> <!-- <p> <img src="../images/3.jpg" alt=""> <span>彈幕內容</span> </p> --> </div> <div class="botom"> <input type="text" class="input"> <button class="btn">傳送</button> </div> </div> <script> var ocontainer = document.querySelector('.container') var ovideo = document.querySelector('.video') var obtn = document.querySelector('.btn') var oinput = document.querySelector('.input') obtn.onclick = function () { var msg = oinput.value if (msg) { create(msg) } } //生成彈幕 function create(msg) { var op = document.createElement('p') op.innerHTML = ` <img src="../images/3.jpg" alt=""> <span>${msg}</span> ` ovideo.appendChild(op) var maxY = ovideo.clientHeight - op.offsetHeight var x = random(0, maxY) op.style.cssText = `top:${x}px` move(-op.offsetWidth, op, 'left', 21, function () { op.remove() }) } function random(min, max) { return parseInt(Math.random() * (max - min) + min) } function move(end, ele, attr, speed, fb) { var sta = parseInt(getStyle(ele, attr)) var speed = end > sta ? speed : -speed var t = setInterval(function () { sta += speed ele.style[attr] = sta + 'px' if (Math.abs(end - sta) < Math.abs(speed)) { sta = end ele.style[attr] = sta + 'px' clearInterval(t) if (fb) { fb() } } }, 100) } function getStyle(ele, attr) { if (window.getComputedStyle) { return getComputedStyle(ele)[attr] } return ele.currentStyle[attr] } </script> </body> </html>