利用jQuery實現點擊按鈕訂單完成特效



19 75 26



特效描述:利用jQuery實現 點擊按鈕 訂單完成 特效,利用jQuery實現點擊按鈕訂單完成特效

代碼結構

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代碼

<button class="order"><span class="default">點擊下單</span><span class="success">完成訂單
    <svg viewbox="0 0 12 10">
      <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg></span>
  <div class="box"></div>
  <div class="truck">
    <div class="back"></div>
    <div class="front">
      <div class="window"></div>
    </div>
    <div class="light top"></div>
    <div class="light bottom"></div>
  </div>
  <div class="lines"></div>
</button>
<script type="text/javascript">
$('.order').click(function(e) {
    let button = $(this);
    if(!button.hasClass('animate')) {
        button.addClass('animate');
        setTimeout(() => {
            button.removeClass('animate');
        }, 10000);
    }
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 切換按鈕 表單 表單美化 表單插件 表單美化插件 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 湖南快乐10分平台 江苏十一选五前三组选 时时彩后三有多少注 三亚开一个洗草厂赚钱吗 什么游戏不用充钱又能赚钱 做海运赚钱吗 广西快3走势图吉林 京东购物卡怎么赚钱 e球彩玩法及奖金 极速快3哪里下载 重庆时时走势直播 pk10走势图pk拾走势分析 海南环岛赛车彩票网站下载 彩票阶梯投注方案 青海快3图片欣赏 地下城勇士工作室