jQuery实现图片左右出现和隐藏动画（腰封）

淡淡的烟草味﹌ 2022-07-13 08:57 189阅读 0赞

一定要引入jQuery，代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="jquery-1.8.3.min.js"></script> <link rel="stylesheet" href=""> <style> .container{//整个容器的样式 display:block; position:fixed; z-index: 13; } .d1{//红色部分的样式 position:fixed; z-index:999999; overflow:hidden;; bottom:50px; cursor:pointer; } .d2{//灰色部分的样式 position:fixed; left:0; bottom:0; width:100%; height:220px; z-index:999998; } #close{//关闭的样式 display:inline-block; position:absolute; bottom:160px; right:270px; width:60px; height:55px; cursor:pointer; font: normal 50px Simsun; color: #fff; } </style> </head> <body> <div class="container">

<div class="d1" style="width:150px;height:80px;background-color:red;left:-150px;">15551 </div> <div class="d2" style="width:1903px;height:220px;background-color:grey;left:0px;"> <a id="close">×</a> </div> </div> <script> $(document).ready(function(){ $("#close").click(function(){ $(".d2").animate({left:'-1920px'});//让d2左移-1920px，就等于隐藏d2 $(".d1").animate({display:'block',left:'0px'});//让d1距离左边0px就是等于让d1显示 }); $(".d1").click(function(){ $(".d1").animate({display:'block',left:'-150px'}); $(".d2").animate({left:'0px',display:'block'}); }); }); </script> </body> </html>

红色隐藏，灰色出现时，效果如图所示：

![Center][]

点击x灰色隐藏，红色出现时：

![Center 1][]

[Center]: /images/20220713/cf0a8eead2ca443691d796fa6b591387.png
[Center 1]: /images/20220713/923c6311e26742a59a644eb9d5fdf992.png