【HTML】- 实现展开与收起效果

1.javascript实现

1.1 html

<div id="box"><div id="content"><h4>皮质腕表 水晶刻度大气表盘h4><p>瑞典 | Daniel Wellington | 价格:￥1233.24p><div id="spread"><img src="images/pic.jpg" alt=""><p>税费：进口税 预计146.76元p><p>物流：香港仓发货 至中国海关 至杭州市p><p>运费：0.00 24：00前付款,预计15日内送达p>div>div><button id="btn">展开button>
div>

1.2 css

<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;}#spread{height: 0px;overflow: hidden;}
style>

1.3 javascript

<script>/*获得btn*/
    var btn = document.getElementById('btn')var spread = document.getElementById('spread')var iSpread = false
    /*高度*/
    var height = spread.scrollHeight
    /*总时间*/
    var time = 420;/*间隔*/
    var interval = 8.4
    /*速度*/
    var speed = height/(time/interval)/*点击事件*/
    btn.onclick = function (e) {btn.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)btn.disabled = ''
                }},interval)this.innerHTML = '收起'
        }else {var speeds = height
            this.innerHTML = '展开'
            var timer = setInterval(function () {speeds -= speed
                spread.style.height = speeds + 'px'
                if(speeds <= 0){clearTimeout(timer)btn.disabled = ''
                }},interval)}iSpread = !iSpread
    }script>

1.4 效果

2.jQuery实现

2.1 html

<div id="box"><div id="content"><h4>手机h4><p>价格:1499 2999 3999 5999 6999p><div id="spread"><p>魅族 note5 小米 华为 OPPOp><p>超长待机 防水 1080高清屏p>div>div><button id="btn">展开button>
div>

2.2 css

<style>*{margin: 0;padding: 0;}body{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 16px;color: #222222;}#box{width: 600px;margin: 20px auto;text-align: center;}#content{background-color: #FF9C01;}h4,p{padding: 10px 0;}#btn{width: 80px;}#spread{display: none;}
style>

2.3 javascript

<script src="jquery-3.2.1.min.js">script>

<script>var btn = $('#btn')var spread = $('#spread')btn.click(function () {spread.slideToggle()})
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！