QQ登录界面中的动态背景是如何实现的？

JavaScript014

QQ登录界面中的动态背景是如何实现的？,第1张

QQ登录界面的动态背景是通过使用 JavaScript 代码实现的。JavaScript 代码会动态地创建一系列的 HTML 元素，比如图片、文本、音频等，将他们放在 QQ 登录界面的背景中，做出一种视觉的效果。另外，鼠标移动到某些元素上，也会有不同的行为，比如翻转、改变图片等等，使得 QQ 登录界面看上去更有趣、活力。

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=1024" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=9" />

<title>动态背景演示</title>

<link type="text/css" rel="stylesheet" href="https://sqimg.qq.com/qq_product_operations/im/https_src/css/pc_6_0.css" />

</head>

<body id="page0">

<div class="opbg"></div>

<div id="container" class="mpage">

<div id="anitOut" class="anitOut"></div>

</div>

<!--这里添加你自己的内容-->

<script src="https://sqimg.qq.com/qq_product_operations/jslib/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="https://sqimg.qq.com/qq_product_operations/im/https_src/js/pc7.js"></script>

</body>

</html>

楼主可直接复制上面的代码另存为HTML，可看效果，请采纳。

1、正常写JS动态css代码的时候，background-image:url(图片地址）。

2、这个图片地址能够直接不使用引号，但是使用绑定背景图片cover的时候，图片地址就必须加上引号。这是JS动态绑定背景图片cover失效的原因。