index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国大熊猫保护研究中心</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<link href="static/css/base.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body>
<!-- header -->
<div class="header">
保护大熊猫
</div>
<!-- header -->
<!-- nav -->
<div class="nav">
<ul class="wp fix">
<li><a href="index.html">首页</a> </li>
<li> <a href="wenzhang.html">信息动态</a>
<ul>
<li><a href="wenzhang.html">国内信息</a></li>
<li><a href="wenzhang.html">国外信息</a></li>
</ul>
</li>
<li> <a href="tupian.html">大熊猫图片</a> </li>
<li> <a href="login.html">登录</a> </li>
<li id="time">
</li>
</ul>
</div>
<!-- nav end -->
<!-- main content -->
<div class="maincontent wp pr">
<div id="gwdshare-id"></div>
<div class="banner-box fix row">
<!--图片轮转-->
<!--start-->
<div class="img-list" style="width:520px;height:298px">
<div class="banner">
<ul class="list" id="banner_list">
<li style="display: none;">
<img src="./static/picture/20210825152854104912711.jpg" alt="">
</li>
<li style="display: none;">
<img src="./static/picture/20211014103334000577781.jpg" alt="">
</li>
<li style="display: none;">
<img src="./static/picture/20211014103642078621470.jpg" alt="">
</li>
<li style="display: block;">
<img src="./static/picture/20210723152302535631801.jpg" alt="">
</li>
</ul>
<ul class="dot_list" id="dot_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<!--end-->
<div class="b-right r">
<div class="h-title-f fix">
<span class="spbg x-eye l"></span>
<div class="h-title">
信息动态
<a href="#" onclick="yincang()">隐藏</a>
</div>
</div>
<div class="h-infos">
<ul style="padding-top:0px;margin-top:17px;">
<li><a href="#">> 大熊猫志愿宣讲团开展“关爱国宝·竹苗计划”公...</a><span>2021-12-14</span> </li>
<li><a href="#">> 中国大熊猫保护研究中心开展安全生产与疫情防控...</a><span>2021-12-07</span> </li>
<li><a href="#">> 共青团中国大熊猫保护研究中心委员会组织开展2...</a><span>2021-11-05</span> </li>
<li><a href="#">> 阿联酋2020年迪拜世界博览会中国大熊猫保护...</a><span>2021-10-14</span> </li>
<li><a href="#">> 中国大熊猫保护研究中心切实做好节日安全生产工作</a><span>2021-09-30</span> </li>
<li><a href="#">> 卡塔尔驻华使馆参赞到访中国大熊猫保护研究中心</a><span>2021-09-30</span> </li>
</ul>
</div>
</div>
</div>
<div class="fix row row3">
<div class="p-title">
<span class="spbg x-panda"></span> 图片报道
<a href="#">>>更多</a>
</div>
<div class="p-box fix">
<ul>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20211214103523620545861.jpg"></a>
<p>大熊猫志愿宣讲团开展“关爱国宝·竹苗计划”公...</p>
<p>2021-12-14</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20211207155517232363385.jpg"></a>
<p>中国大熊猫保护研究中心开展安全生产与疫情防控...</p>
<p>2021-12-07</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20211105112353065964218.jpg"></a>
<p>共青团中国大熊猫保护研究中心委员会组织开展2...</p>
<p>2021-11-05</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20211014103334000577781.jpg"></a>
<p>阿联酋2020年迪拜世界博览会中国大熊猫保护...</p>
<p>2021-10-14</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20211014103653454414783.jpg"></a>
<p>熊猫献礼——全球首个巨物化裸眼3D熊猫公益视...</p>
<p>2021-10-14</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20210930161510044321794.jpg"></a>
<p>中国大熊猫保护研究中心顺利举行警示教育专题讲...</p>
<p>2021-09-30</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20210825152854104912711.jpg"></a>
<p>中国大熊猫保护研究中心都江堰青城山基地管理处...</p>
<p>2021-08-25</p>
</div>
<div class="p-item hvr-img">
<a href="#"><img style="wdith:260px;height:175px;"
src="static/picture/20210825154049644703228.jpg"></a>
<p>中国大熊猫保护研究中心各党支部分别开展“讲担...</p>
<p>2021-08-25</p>
</div>
</ul>
</div>
</div>
</div>
<!-- main content end -->
<!-- footer -->
<div class="footer" style="padding:0px;">32020110521 马子瑄</div>
<!-- footer end -->
<script>
function banner() {
var index = 0
var list = document.getElementById('banner_list').children;
// 用循环计时器每2秒自动换一张图片
var interval = setInterval(function () {
if (index == list.length - 1) {
index = 0
} else {
index = index + 1
}
for (i = 0; i < list.length; i++) {
list[i].style.display = "none"
}
list[index].style.display = "block"
}, 2000)
var dot_list = document.getElementById('dot_list').children
// 通过循环给每一个按钮设置鼠标事件
for (i = 0; i < dot_list.length; i++) {
dot_list[i].onmouseover = function () {
// 如果鼠标移入则停止自动轮播
clearInterval(interval)
}
dot_list[i].onmouseout = function () {
// 如果鼠标移出继续轮播
banner()
}
dot_list[i].onclick = function () {
// 设置点击按钮切换选项卡
index = this.innerText - 1
for (j = 0; j < list.length; j++) {
list[j].style.display = "none"
}
list[index].style.display = "block"
}
}
}
banner()
// 调用这个方法时 传入显示时间的 元素id
function formatDate(dom_id) {
var date = new Date();
var year = date.getFullYear()
// 月份从0取要+1
var month = date.getMonth() + 1
var ri = date.getDate()
var hour = date.getHours()
var minuntes = date.getMinutes()
// 如果分和秒是个位数补个0
if (minuntes < 10) {
minuntes = '0' + minuntes
}
var secoed = date.getSeconds()
if (secoed < 10) {
secoed = '0' + secoed
}
document.getElementById(dom_id).innerText = year + "-" + month + "-" + ri + " " + hour + ":" + minuntes + ":" + secoed
setTimeout(() => {
formatDate(dom_id)
}, 1000);
}
formatDate('time')
function yincang(){
document.querySelector('.b-right').style.display='none'
}
</script>
</body>
</html>
login.html
<html>
<head>
<meta charset="utf-8">
<!--很重要请保留-->
<title>图片报道_中国大熊猫保护研究中心</title>
<link href="static/css/base.css" type="text/css" rel="stylesheet">
<link href="static/css/page.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
</head>
<style>
input {
width: 80%;
display: block;
border-radius: 4px;
border: 1px #dbdbdb solid;
margin: auto;
margin: 10px auto;
height: 40px;
text-indent: 1em;
}
.text-list {
margin-top: 50px;
padding: 50px;
width: 600px;
}
</style>
<body class="index-bg bg2">
<div class="header">
保护大熊猫
</div>
<!-- header -->
<!-- nav -->
<div class="nav">
<ul class="wp fix">
<li><a href="index.html">首页</a> </li>
<li> <a href="wenzhang.html">信息动态</a>
<ul>
<li><a href="wenzhang.html">国内信息</a></li>
<li><a href="wenzhang.html">国外信息</a></li>
</ul>
</li>
<li> <a href="tupian.html">大熊猫图片</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div>
<div class="text-list wrap2 cl">
<input class="item_account" autocomplete="off" type="text" name="user" id="username" placeholder="账号">
<input class="item_account" type="password" placeholder="密码" autocomplete="off" id="pwd" name="password">
<input class="btnadpt" onclick="login()" type="button" value="登录">
</div>
</div>
<script>
function login() {
var user = document.getElementById('username').value
var pass = document.getElementById('pwd').value
alert("登陆成功");
location.href = "index.html"
}
</script>
</body>
</html>
tupian.html
<html>
<head>
<meta charset="utf-8">
<!--很重要请保留-->
<title>图片报道_中国大熊猫保护研究中心</title>
<link href="static/css/base.css" type="text/css" rel="stylesheet">
<link href="static/css/page.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="static/css/main.css">
</head>
<style>
.text-list {
margin-top: 10px;
}
</style>
<body class="index-bg bg2">
<div class="header">
保护大熊猫
</div>
<!-- header -->
<!-- nav -->
<div class="nav">
<ul class="wp fix">
<li><a href="index.html">首页</a> </li>
<li> <a href="wenzhang.html">信息动态</a>
<ul>
<li><a href="wenzhang.html">国内信息</a></li>
<li><a href="wenzhang.html">国外信息</a></li>
</ul>
</li>
<li> <a href="tupian.html">大熊猫图片</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div>
<div class="text-list wrap2 cl">
<div class="inner">
<div class="con cl">
<ul>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20211214103523620545861.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
大熊猫志愿宣讲团开展“关爱国宝·竹苗计划...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20211207155517232363385.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心开展安全生产与疫情...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20211105112353065964218.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
共青团中国大熊猫保护研究中心委员会组织开...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20211014103334000577781.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
阿联酋2020年迪拜世界博览会中国大熊猫...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20211014103653454414783.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
熊猫献礼——全球首个巨物化裸眼3D熊猫公...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210930161510044321794.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心顺利举行警示教育专...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210825152854104912711.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心都江堰青城山基地管...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210825154049644703228.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心各党支部分别开展“...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210723152302535631801.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
“熊猫侠”形象大使“志志”“愿愿”周岁探...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210702162053169150973.png">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
熊猫中心党委开展庆祝中国共产党成立100...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210629092902269308725.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心举办“颂歌献给党”...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210628150844912532049.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心开展应急管理能力提...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210624151238872877285.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心旅日大熊猫“仙女”...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210608093145942953273.png">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
科研动管党支部、都江堰青城山基地党支部、...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210601101905739623344.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心妇委会举办《未成年...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210527150129295584046.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心卧龙核桃坪基地管理...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210527150326732587811.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心卧龙神树坪基地党支...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210514145705229372392.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心组织开展防灾减灾日...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210512165647958641196.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
中国大熊猫保护研究中心召开2021年党的...</p>
</a> </li>
<li style="valign:middle;
align:center;
width:235px;
height:180px;
line-height:20px;
display:block;
float:left;
margin-left:-5px;
padding-bottom:25px;"> <a href="#" style="border:0px;width:230px;" target="_blank"> <img
style="border:0px;width:200px;height:150px;"
src="static/picture/20210510102917533896863.jpg">
<p align="center" valign="top"
style="padding-left:10px;padding-bottom:20px;width:200px;font-size:14px;word-break:break-all;word-wrap:break-word;">
熊猫中心召开党委理论学习中心组2021年...</p>
</a> </li>
</ul>
</div>
</div>
</div>
<div>
</div>
</div>
</body>
</html>
wenzhang.html
<html>
<head>
<meta charset="utf-8">
<!--很重要请保留-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!--很重要请保留-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--很重要请保留-->
<title>熊猫献礼——全球首个巨物化裸眼3D熊猫公益视频发布_大熊猫文化_中国大熊猫保护研究中心</title>
<link href="static/css/base.css" type="text/css" rel="stylesheet">
<link href="static/css/page.css" type="text/css" rel="stylesheet">
<link href="static/css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
保护大熊猫
</div>
<!-- header -->
<!-- nav -->
<div class="nav">
<ul class="wp fix">
<li><a href="index.html">首页</a> </li>
<li> <a href="wenzhang.html">信息动态</a>
<ul>
<li><a href="wenzhang.html">国内信息</a></li>
<li><a href="wenzhang.html">国外信息</a></li>
</ul>
</li>
<li> <a href="tupian.html">大熊猫图片</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div class="bd-bg2">
<div class="path-box wrap2 cl">
</div>
<div class="article-box wrap2 cl">
<!-- GWD SHARE BEGIN 页面右侧浮动分享-->
<div id="gwdshare-id"></div>
<!-- GWD SHARE END -->
<div class="inner">
<div class="tit">
<h1 id="forestry_Title"><span id="forestry_title">熊猫献礼——全球首个巨物化裸眼3D熊猫公益视频发布</span></h1>
<div class="sub1">
</div>
</div>
<div class="line-solid"></div>
<div class="con">
<div id="zoomit">
<h2></h2>
<h3></h3>
<span id="forestry_content">
<p style="font-size: medium; white-space: normal; text-align: left;">
<span style="font-size: 14px;">国庆节期间，成都太古里步行街的裸眼</span><span
style="font-size: 14px;">3D屏呈现了全新的内容，画面中展现了出生于</span><span
style="font-size: 14px;">中国大熊猫保护研究中心</span><span
style="font-size: 14px;">（以下简称熊猫中心）卧龙神树坪基地，</span><span
style="font-size: 14px;">一对刚满一周岁的龙凤双胞胎</span><span
style="font-size: 14px;">大熊猫宝宝，携满满的爱意途经</span><span
style="font-size: 14px;">冰川与雪山</span><span style="font-size: 14px;">，</span><span
style="font-size: 14px;">赶在国庆节期间来</span><span
style="font-size: 14px;">到城市中向</span><span style="font-size: 14px;">大家献礼</span><span
style="font-size: 14px;">。</span></p>
<p>
步行街中人来人往，裸眼3D大屏幕中，突然出现一对熊猫宝宝，时而喝奶嗑笋，时而嬉戏打闹，时而呼之欲出，仿佛随时会从屏幕中跌落街头，吸引无数路人驻足观看，萌翻现场观众，为节日氛围增添了一抹靓丽的黑白色。据了解，大熊猫公益视频国庆期间至本月底每天都会在太古里步行街轮流播出，此次熊猫中心利用大熊猫＋裸眼3D实拍技术，融合呈现了全球首个巨物化实拍熊猫公益视频，打破了空间距离，让大熊猫与城市完美结合，与大家亲密互动、拉近彼此。
</p>
<p>
熊猫中心相关负责人介绍，正值庆祝新中国成立72周年之际，熊猫中心对外发布全球首个巨物化裸眼3D大熊猫公益视频，意在展现中国大熊猫保护研究成绩，展示生态文明建设成果；同时，通过与先进视频展示技术的结合，让大熊猫“走入”城市，展现可爱中国，祝福伟大祖国生日快乐，繁荣昌盛！
</p>
<p><img src="static/picture/20211014103612388581601.jpg"></p>
<p><img src="static/picture/20211014103626733911003.jpg"></p>
<p><img src="static/picture/20211014103642078621470.jpg"></p>
<p><br></p>
</span>
</div>
</div>
</div>
</div>
</div>
<div>
</div>
<div id="codefans_net" style="position:absolute;">
<img width="300" title="点击图片删除" src="./static/picture/20211014103334000577781.jpg" alt="">
</div>
<script>
// 悬浮代码
var x = 50, y = 60
var xin = true, yin = true
var step = 1
// 设置延时
var delay = 10
// 获取元素
var obj = document.getElementById("codefans_net")
function float() {
// console.log(x,y)
// 这里是计算代码,大概就是计算元素宽高,然后随机移动
// 当页面总宽-元素长度 等于移动的距离时,说明到头了,开始反向移动
var L = T = 0
var R = document.body.clientWidth - obj.offsetWidth
var B = document.body.clientHeight - obj.offsetHeight
obj.style.left = x + document.body.scrollLeft + 'px'
obj.style.top = y + document.body.scrollTop + 'px'
x = x + step * (xin ? 1 : -1)
if (x < L) { xin = true; x = L }
if (x > R) { xin = false; x = R }
y = y + step * (yin ? 1 : -1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl = setInterval("float()", delay)
// 鼠标移入清除计时器
obj.onmouseover = function () { clearInterval(itl) }
// 鼠标移出打开计时器
obj.onmouseout = function () { itl = setInterval("float()", delay) }
</script>
</body>
</html>
扫一扫
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
