The html code is as follows:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/VideoBox.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/VideoBox.js"></script> </head> <body> <div class="video_box"> <!-- top start--> <div class="top_video"> <div class="avatar_video"></div> <span class="title_video tit_close_com">He Dingding invites you to video chat</span> <span class="close_video tit_close_com" id="close_video">×</span> </div> <!-- top end--> <!-- mid start--> <div class="mid_video"> <img class="mid_img_video" src="images/left.png"> <img src="images/midphone.png"> <img class="mid_img_video" src="images/right.png"> </div> <!-- mid start--> <!-- bottom start--> <div class="bottom_video"> <a class="bottom_btn bottom_btn1" href="javascript:;">接听</a> <a class="bottom_btn bottom_btn2" href="javascript:;">拒绝</a> </div> <!-- bottom start--> </div> </body> </html>
The css code is as follows:
/* Video outermost box */ .video_box{ width: 335px; height: 230px; background-color: #313131; position: absolute; right: 10px; bottom: 10px; border-radius: 5px; display: none; } /*top*/ .top_video{ width: 230px; height: 58px; line-height: 58px; text-align: center; } .avatar_video { width: 34px; height: 34px; border-radius: 2px; background-color: yellow; display: inline-block; position: absolute; left: 15px; top: 12px; cursor: pointer; } .tit_close_com{ font-size: 14px; color: white; font -family: 'Microsoft Yahei' ; position: absolute; } .title_video{ left: 62px; } .close_video{ display: inline-block; width: 58px; height: 58px; text-align: center; font-size: 24px; top: 0px; right: 0px; cursor: pointer; } /*mid*/ .mid_video{ text-align: center; position: relative; top: 20px; } .mid_video img{ -webkit-animation:gogogo 3s infinite linear ; } .mid_img_video{ position: relative; top: -10px; } /*bottom*/ a{ list-style: none; color: white; font-size: 14px; } .bottom_video{ width: 100%; height: 60px; position: absolute; bottom: 0px; left: 0px; } .bottom_btn { display: inline-block; width: 100px; height: 36px; line-height: 36px; text-align: center; border-radius: 3px; position: absolute; bottom: 12px; cursor: pointer; } .bottom_btn1{ background-color: #5ac43a; left: 54px; } .bottom_btn2{ background-color: #e1615a; right: 54px; } @-webkit-keyframes gogogo { 0%{ opacity: 0; } 25%{ opacity: 0.25; } 50%{ opacity: 0.5; } 75%{ opacity: 0.75; } 100%{ opacity: 1; } }
js code is as follows:
1 $("body").ready(function(){ 2 $('.video_box').slideDown(500); 3 }); 4 $(function () { 5 $('.video_box').on('click', '#close_video', function(event) { 6 $('.video_box').slideUp(500); 7 }); 8 })
The effect is shown as follows: