缓慢展开与收起

最新推荐文章于 2024-03-26 01:45:20 发布
最新推荐文章于 2024-03-26 01:45:20 发布
阅读量154 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41813243/article/details/112622980
版权
这是一个HTML页面示例，展示了如何使用JavaScript实现内容的动态展开和隐藏。当用户点击‘展开’按钮时，一个包含图片和多段文字的内容区域会以平滑动画的方式展开。点击后变为‘收起’，内容再次隐藏。此功能可用于优化网页的阅读体验，只显示关键信息，用户按需查看详细内容。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="../jquery-1.9.1.min.js"></script>

    <title>Document</title>

 

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            font-family: Verdana, Arial, Helvetica, sans-serif;

            font-size: 14px;

            color: #222222;

        }

        #box{

            width: 600px;

            margin: 20px auto;

            text-align: center;

        }

        #content{

            background-color: #b3dae9;

            border-radius: 8px;

            box-shadow: 1px 1px 1px #ccc;

            border:1px solid #EEEEEE;

        }

        h4{

            font-size: 16px;

        }

        h4,p{

            padding: 10px 0;

        }

        #btn{

            width: 80px;

        }

        /* copy */

        #spread{

            height: 0px;

            overflow: hidden;

        }

 

        .openSpan{

            background: url(././imgimg/up.png) left center no-repeat;

            background-size: 20px;

            padding-left: 30px;

        }

 

        .closeSpan{

            background: url(././imgimg/down.png) left center no-repeat;

            background-size: 20px;

            padding-left: 30px;

        }

 

        #openbtn{

            width: 100px;

            height: 40px;

            background-color: #333;

            color: #fff;

            font-size: 18px;

        }

    </style>

</head>

 

<body>

    <div id="box">

        <div id="content">

            <h4>标题</h4>

            <p>3333333333333333333333333333333</p>

            <p>3333333333333333333333333333333</p>

            <p>3333333333333333333333333333333</p>

 

            <div id="spread">

                <img src="images/pic.jpg" alt="">

                <p>aaaaaaaaaaaaaaa</p>

                <p>bbbbbbbbbbbbbb</p>

                <p>cccccccccccccc</p>

            </div>

        </div>

        <button id="openbtn" >

            <span class="openSpan">展开</span>

        </button>

    </div>

 

</body>

 

<script>

    var a = document.getElementById('openbtn');

    var spread = document.getElementById('spread');

    var iSpread = false;

    var height = spread.scrollHeight;

    var time = 320;

    var interval = 2.4;

    var speed = height/(time/interval);

    openbtn.onclick = function (e) {

        a.disabled = 'disabled';

        if(!iSpread){

            var speeds = 0;

            var timer = setInterval(function () {

                speeds += speed;

                spread.style.height = speeds + 'px';

 

                if(parseInt(spread.style.height) >=height){

                    clearTimeout(timer);

                    openbtn.disabled = '';

                }

            },interval)

            this.innerHTML = '<span  class="closeSpan">收起</span>';

        }else {

            var speeds = height;

            this.innerHTML = '<span  class="openSpan">展开</span>';

            var timer = setInterval(function () {

                speeds -= speed;

                spread.style.height = speeds + 'px';

                if(speeds <= 0){

                    clearTimeout(timer);

                    openbtn.disabled = '';

                }

            },interval);

        }

        iSpread = !iSpread;

    }

 

</script>


 

<script>

   

    $(document).ready(function(){

        $(".hidebtn").click(function(){

            $(".hide111").hide();

            $(".replace111").show();

        })

    })

</script>

 

</html>

爱学习的小饼干
关注
jQuery使用slideUp方法实现控制元素缓慢收起
10-24
主要介绍了jQuery使用slideUp方法实现控制元素缓慢收起的功能,实例分析了jQuery中slideUp方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js鼠标点击展开收起特效(带缓动效果)
yzlghb520的专栏
08-13 3478
这款网页特效还不错  兼容性很好！ 大气阿  转自: JS特效 代码如下 鼠标点击展开收起效果(带缓动效果)-网页特效代码 .box{width:300px;border:1px solid #ccc;font-size:12px} .box dt{line-height:24px;text-align:right;margin:0;padding:0 10px;backgroun
js实现折叠、缓慢滑动效果
weixin_34259159的博客
03-04 510
为什么80%的码农都做不了架构师？>>> ...
js实现div层缓慢收缩与展开的方法
10-24
主要介绍了js实现div层缓慢收缩与展开的方法,通过javascript自定义函数实现div层的收缩与展开效果,非常具有实用价值,需要的朋友可以参考下
vue.js 实现点击展开收起动画效果
12-29
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图： vue页面： (item,...
JQ 收起和展开的菜单
08-13
标题“JQ 收起和展开的菜单”指的是使用jQuery来实现网页上菜单的交互功能，即点击后可以收起或展开子菜单。这种功能在网站导航中非常常见，它提供了良好的用户体验，使用户能够方便地浏览和选择不同的页面或功能。 ...
jQuery实现表格展开与折叠的方法
12-11
在这个例子中，我们利用jQuery的事件监听和CSS类操作来实现表格的展开与折叠效果。 HTML结构是实现此功能的基础。可以看到，表格中包含三列：姓名、性别和暂住地。每个主要信息（如“张山”、“前台开发组”等）都...
如何实现页面中点击+号多张图片缓慢展开，再次点击×缓慢收起
weixin_34097242的博客
08-17 225
本文内容转自“东软睿道”培训内容。首先我们画出基本的内容，我们需要一个标题的部分然后是一个展开的按钮，这里简化为一个加号<!DOCTYPEhtml> <html> <head> <title></title> <metacharset="utf-8"> <linkrel="stylesh...
js实现改变div层缓慢收缩和放大（动态改变大小的方式）
qq_33638928的博客
12-16 1525
js实现改变div层缓慢收缩和放大 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> #testDiv { width: 200px; height: 200px; border: 1px solid red; }
前端js和css实现 展开/收起 效果
最新发布
smile_hahahaxixi的博客
03-26 1373
height;;colorrgb;cursor;.colse;overflow;display;word-break;;;</</</</</// 定义一个函数用来获取指定类名的domfunctionclassNamereturn0;// 获取domconst"outBox";const;// 获取高/外层元素内容高度const"outBox";const。
Jquery点击展开-点击收缩
爱吃鱼油
07-12 1万+
菜单点击展开-点击收缩 jquery展开、收缩 // 收缩展开效果 $(document).ready(function(){ $(".box h2").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); },functio
CSS实现展开动画
WindrunnerMax
01-29 6859
CSS实现展开动画 展开收起效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。 实现 首先想到的是通过height在0与auto之间切换，但是结果可能并不会是我们所预期的那样，原因是我们将要展开的元素内容是动态的，即高度值不确定，因此height使用的值是默认的auto，从0px到auto是无法计算的，因此无法形成过渡或动画效果。 据此我们可以使用max-height，将m
HTML实现点击展开和收起
热门推荐
07-04 6万+
#box,#box2,#box3,#box4{padding:10px;border:1px solid green;} //===========================点击展开关闭效果==================================== function openShutManager(oSourceObj,oTargetObj,shutAble,oOpenT
button onclick跳转到指定页面或动作
m0_48246547的博客
06-05 1万+
onclick跳转的代码 单独添加一个链接，实现跳转： <input type=“button” value=“按钮” οnclick=“javascrtpt:window.location.href=‘http://www.baidu.com’”> 触发一个函数跳转： <input type=“button” value=“按钮” οnclick=javascrtpt:jump()> < script> function jump(){ window.locat
jquery展开收起（手风琴）
You_vane的博客
11-26 1261
jquery 展开收起 手风琴
【HTML】- 实现展开与收起效果
baidu_hxl的博客
07-27 5万+
javascript和jQuery分别实现实现展开与收起动画效果
JQuery慢慢出现和隐藏
e_yohn的专栏
08-22 6753
.redborder {     border:2px;     dashed:#ff0000;    }            /*    $(document).ready(function(){     ("#hit").click(function(){
vue v-show缓慢展开
10-05
1. 检查是否存在其他与元素展示相关的CSS样式或过渡效果，这些样式可能会导致元素展示时产生过渡效果，从而造成缓慢展开的感觉。 2. 检查是否存在其他与元素显示和隐藏相关的JavaScript代码，在这些代码中可能进行了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值