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

淡淡的烟草味﹌ 2022-07-13 08:57 203阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，203人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery实现的图片左右来回轮播功能

使用jQuery实现的图片左右来回轮播功能第一次使用CSDN写博客，诸多不完善之处还望各位多多谅解。希望今后的日子和大家有更多的交流和发展。话不多说，进入主题。轮

一时失言乱红尘/ 2023年06月17日 03:56/ 0 赞/ 10 阅读

相关【JavaWeb】JQuery实现广告显示和隐藏动画效果

我们经常会看到几秒后出现了广告，显示了几秒后广告就消失了，下面就用JQuery框架来实现这个功能。代码如下： <!DOCTYPE html>

川长思鸟来/ 2023年03月02日 05:23/ 0 赞/ 119 阅读

相关缓封动画的原理和封

学习目标：网页轮播图的实现 1.offset .client. scroll 三大家族 2.缓动动画的原理和封 3.网页轮播图实现 4.节流阀返回顶部及筋斗

╰+攻爆jí腚メ/ 2022年12月28日 01:36/ 0 赞/ 124 阅读

相关 jquery列表隐藏和出现练习

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>change</

布满荆棘的人生/ 2022年08月12日 01:05/ 0 赞/ 162 阅读

相关 jquery的动画显示隐藏效果停止

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

雨点打透心脏的1/2处/ 2022年07月14日 00:40/ 0 赞/ 328 阅读

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

一定要引入jQuery，代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-e

淡淡的烟草味﹌/ 2022年07月13日 08:57/ 0 赞/ 204 阅读

相关 javascript实现图片左右移动动画

图片的左右移动，具备像荡秋千一样的动画效果，图片自己可重新定义，移动速度和距离也可在代码内设定，挺简单的Js生成动画的特效代码，仅供参考。 <!DOCTYPE htm

比眉伴天荒/ 2022年06月07日 04:27/ 0 赞/ 272 阅读

相关 JQuery 定时操作实现图片显示与隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

心已赠人/ 2022年04月21日 22:30/ 0 赞/ 255 阅读

相关 jQuery实现图片自动出现消失

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页<

雨点打透心脏的1/2处/ 2022年04月06日 08:12/ 0 赞/ 188 阅读

相关 Jquery动画图片轮播

Jquery动画图片轮播补充：JQ是基于JS开发的库，所以代码跟JS相差不多，不多说，直接看代码吧！要求：单击左上角箭头图标来控制图片滚动 1.

以你之姓@/ 2021年09月16日 23:16/ 0 赞/ 444 阅读