Jquery實現輪播公告

時間 2019-11-06

標籤 jquery 實現公告欄目 JQuery 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .line {
      background-color: gray;
      height: 30px;
      overflow: hidden;
      line-height: 30px;
    }
    li {
    }
  </style>
  <script>
  </script>
</head>
<body>
  <ul class="line">
    <li><a href="#">hello</a></li>
    <li><a href="#">world</a></li>
    <li><a href="#">good</a></li>
  </ul>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
/**
 * 公告輪播插件
 * @param  {number} $ liHeight  li元素的高度 
 * @param  {number} $ time  輪播間隔時間
 * @param  {number} $ movetime  輪播持續時間
 */
(function($) {
  $.fn.extend({
    "slideUp": function(value) {

      var docthis = this;
      //默認參數
      value = $.extend({
        "liHeight": "30",
        "time": 2000,
        "movetime": 1000
      }, value)
      //向上滑動動畫
      function autoplay() {
        $("li:first", docthis).animate({ "margin-top": -value.liHeight }, value.movetime, function() {
          $(this).css("margin-top", 0).appendTo(".line");
        })
      }

      //自動間隔時間向上滑動
      var anifun = setInterval(autoplay, value.time);

      //懸停時中止滑動，離開時繼續執行
      $(docthis).children("li").hover(function() {
        clearInterval(anifun); //清除自動滑動動畫
      }, function() {
        anifun = setInterval(autoplay, value.time); //繼續執行動畫
      })
    }
  })
})(jQuery)

$('.line').slideUp()
</script>
</html>

純css3沒法實現無縫銜接，只能仍是js來實現css

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。