用前端语言写了一个页面，其中有一个点击按钮跳出小窗口播放视频的功能，如图，点击1的时候，应该会出现2那个小窗口，但是现在点击1按钮不起作用，不知道什么原因，会前端的兄弟看看是什么原因，
html部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/quanbu.css">
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/luobo.js"></script>
<script type="text/javascript" src="js/tanchuang.js"></script>
<script type="text/javascript" src="js/piaochuang.js"></script>
</head>
<body>
<div id="floatT">nihao</div>
<div id="tan">
<div id="video"></div>
<div id="cha">
<a id="aa" href="#">X</a>
</div>
</div>
<div class="header">
<div class="wrap"><!--
<ul class="header-left">
<li><a href="#">商城</a><span>|</span></li>
<li><a href="#">美</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">下载</a><span>|</span></li>
<li><a href="#">协议</a><span>|</span></li>
</ul>
<ul class="header-right">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li><a href="#"><i class="inconfont"></i>购物车</a><span>|</span></li>
</ul>-->
<div class="weather">
<iframe width="150" scrolling="no" height="50" frameborder="0"
allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=1">
</iframe>
</div>
<div class="header-right1">
<a href="#">添加微信
<div class="erweima">
<img src="img/10.jpg">
</div>
</a>
</div>
</div>
</div>
<div class="nav">
<div class="wrap">
<div class="logo">
<a href="#">
<img src="img/10.jpg">
</a>
</div>
<div class="nav-bar">
<ul>
<li><a href="#">打印机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/2.jpg">
</div>
<p>i4型号打印机</p>
<p class="i">4560元</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#" target="_blank">门禁系统</a></li>
<li><a href="#" target="_blank">收银系统</a></li>
<li><a href="#" target="_blank">电子秤</a></li>
<li><a target="_blank" href="shouhou.html">售后</a></li>
<li><a href="guanyu.html" target="_blank">关于我们</a></li>
</ul>
</div>
<!--<div class="search"></div> -->
</div>
</div>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li class="src1"><img src="img/1.jpg"/>
<a class="src1-box" href="shouhou.html">点击查看详情</a>
</li>
<li><img class="src2" src="img/2.jpg"/></li>
<li><img class="src3" src="img/3.jpg"/></li>
<li><img class="src4" src="img/4.jpg"/></li>
<li><img class="src5" src="img/5.jpg"/></li>
<li><img class="src1" src="img/1.jpg"/></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<div class="container">
<div class="wrap">
<div class="phone">
<div class="home-banner-box">
<a href="#">
<img src="img">
</a>
</div>
<h2 class="title">手机</h2>
<div class="phone-box">
<div class="phone-box-left">
</div>
<div class="phone-box-right">
<ul>
<li class="items"><a href="#"> rfff</a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> www</a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
<li class="items"><a href="#"> </a></li>
</ul>
</div>
</div>
</div>
<div class="video">
<h2 class="title">视频</h2>
<div class="video-box">
<ul>
<li><a id="dianJi" href="javascript:;">
<div class="video-img">
<img src="img/1.jpg">
<div class="play">
<img src="img/66.jpg">
</div>
</div>
<p class="video-name">你好</p>
</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css的代码
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,
button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center;}
li{list-style-type: none;}
a{text-decoration: none;color: #333}
.header{
width: 100%;
line-height: 40px;
height: 50px;
background-color: #e0e0e0;
font-size: 12px;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header li{
float: left;
}
.header a{
color: #b0b0b0;
font-size: 12px;
}
.header a:hover{
color: #fff;
}
.header span{
color: #424242;
margin: 0 6px;
}
.nav{
position: relative;
width: 100%;
height: 100px;
//background-color:red;
}
.logo{
margin-top: 16px;
float: left;
width: 66px;
height: 66px;
background-color: blue;
border-radius: 50%;
}
.nav-bar{
/*float: left; */
width:1200px;
height: 100px;
line-height: 100px;
padding-left: 180px;
box-sizing: border-box;
}
/*.search{
float: left;
width: 296px;
height: 50px;
background-color: blue;
} */
.logo img{
width: 100%;
border-radius: 50%;
}
.nav-bar>ul>li{
padding: 0 50px;
float: left;
}
.nav-bar>ul>li>a:hover{
color: deepskyblue;
/*color: #ff6700;*/
}
.nav-bar-list{
display: none;
position: absolute;
left: 0;
top: 100px;
width: 100%;
height: 229px;
background-color: white;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
z-index: 9;
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
.nav-bar-list li{
float: left;
width: 204px;
padding-top: 35px;
}
.nav-bar-list li img{
width: 110px;
}
.nav-img-box{
margin-left: 10px;
width: 100%;
height: 110px;
border-right: 1px solid #e0e0e0;
box-sizing: border-box;
margin-bottom: 20px;
}
.nav-bar-list li:last-child .nav-img-box{
border-right: none;
}
.nav-bar-list p{
font-size: 12px;
line-height: 20px;
}
.i{
color: red;
}
.banner/*, .banner-box*/{
width: 100%;
height: 460px;
background-color:yellow;
}
.banner-box{
width: 100%;
height: 460px;
background-color: #ff6700;
}
.banner-box>img{
height: 460px;
}
.container{
width: 100%;
height: auto;
/*background-color: blueviolet;*/
padding: 4px 0 12px;
}
.home-banner-box{
width: 100%;
height: 120px;
background-color: aqua;
margin: 22px 0;
}
.title{
color: #333;
font-size: 22px;font-weight: 200;
text-align: left;
line-height: 58px;
}
.phone-box{
width: 100%;
height: 614px;
background-color: #ff6700;
}
.phone-box-left{
float: left;
width: 234px;
height: 614px;
background-color: blue;
}
.phone-box-right{
float: right;
width: 990px;
height: 614px;
background-color: #b0b0b0;
}
.items{
float: right;
width: 234px;
height: 300px;
background-color: #fff;
margin-bottom: 14px;
margin-left: 13px;
}
.qaz{
background-color: #ff6700;
height: 600px;
width: 100%;
}
.video-box li{
float: left;
width: 296px;
height: 285px;
background-color: #ff6700;
margin-bottom: 14px;
margin-left: 14px;
}
.video-box li:first-child{
margin-left: 0;
}
.video-img{
width: 296px;
height: 180px;
position: relative;
background-color: aqua;
z-index: 0;
}
.video-img img{
height: 180px;
width: 296px;
}
.video-name{
width: 268px;
height: 21px;
margin: 38px auto 6px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.play{
background-color: black;
position: absolute;
left: 40px;
bottom: 30px;
width: 46px;
height: 36px;
/*border: 2px solid #fff;
box-sizing: border-box;*/
border-radius: 12px;
}
.play img{
width:100%;
height: 36px;
border-radius: 12px;
}
.weather{
float: left;
width: 150px;
height: 50px;
}
.header-right1{
margin-top: 5px;
float: right;
position: relative;
height: 50px;
width: auto;
}
.header-right1 a{
font-size: 18px;
color: #424242;
}
.header-right1 a:hover{
/*background-image:url("img/1.jpg");*/
color: dodgerblue;
}
.erweima img{
width: 100px;
height: 100px;
}
.erweima{
display: none;
position: absolute;
}
.header-right1 a:hover>.erweima{
display: block;
}
.src1{
position: relative;
}
.src1-box{
position: absolute;
left: 40px;
bottom: 30px;
width: auto;
height: 60px;
}
#tan{
position: fixed;
top:20%;
left: 35%;
/*margin:200px auto;*/
width:720px;
height: 480px;
/* width:720px;
height: 480px;*/
background-color: rgba(134, 0, 139, 0.67);
display: none;
/*z-index: 99;*/
}
#video{
width:100%;
height: auto;
}
#cha{
width: 20px;
height: 21px;
padding-left: 7px;
background-color: dodgerblue;
position: absolute;
right: 1px;
top: 1px;
}
*{
margin: 0;
padding: 0;
}
/*
* 设置outer的样式
*/
#outer{
/*设置宽和高*/
width:100%;
height: 600px;
/*居中margin: 50px auto;*/
/*设置背景颜色*/
/*background-color: greenyellow;*/
/*设置padding padding: 10px 0;*/
/*开启相对定位*/
position: relative;
/*裁剪溢出的内容*/
overflow: hidden;
}
/*设置imgList*/
#imgList{
/*去除项目符号*/
list-style: none;
/*设置ul的宽度*/
/*width: 2600px;*/
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
/*
* 每向左移动520px，就会显示到下一张图片
*/
left: 0px;
z-index: -1;
}
/*设置图片中的li*/
#imgList li{
/*设置浮动*/
float: left;
/*设置左右外边距 margin: 5px 10px;*/
}
/*设置导航按钮*/
#navDiv{
/*开启绝对定位*/
position: absolute;
/*设置位置*/
bottom: 15px;
/*设置left值
outer宽度 520
navDiv宽度 25*5 = 125
520 - 125 = 395/2 = 197.5
* */
/*left: 197px;*/
}
#navDiv a{
/*设置超链接浮动*/
float: left;
/*设置超链接的宽和高*/
width: 15px;
height: 15px;
/*设置背景颜色*/
background-color: red;
/*设置左右外边距*/
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
border-radius: 50%;
}
/*设置鼠标移入的效果*/
#navDiv a:hover{
background-color: black;
}
#imgList img {
width:1920px;
height: 600px;
}
/*飘窗*/
#floatT{width: 80px;height: 80px;position: fixed;top: 100px;background-color: #ff6700;z-index: 10}
js的代码
var dianJi = document.getElementById('dianJi');
var tan = document.getElementById('tan');
var video = document.getElementById('video');
/*var cha = document.getElementById('cha');*/
var aa = document.getElementById('aa');
dianJi.onclick=function () {
tan.style.display='block';
video.innerHTML='<video width="100%" height="480px" src="vid/qaz.mp4" poster="" oncontextmenu="return false"></video>';
}
aa.onclick= function () {
tan.style.display='none';
}
