韦德国际1946英国 > 计算机网络 > 按钮点击效果

原标题:按钮点击效果

浏览次数:69 时间:2019-06-29

伟德国际娱乐城1946 1伟德国际娱乐城1946 2


CSS3实现

View Code

View Code

View Code

View Code

伟德国际娱乐城1946 3

css代码

兼容:ie9以上

View Code

这种作用能够由成分内嵌套canves实现,也得以由css3兑现。

<div class="wrapper">      <div class="carousel" id="carousel-generic">          <!--  Indicators  -->          <ul class="carousel-indicators">              <li data-slide-to="0" data-target="#carousel-generic" class="active">0</li>              <li data-slide-to="1" data-target="#carousel-generic">1</li>              <li data-slide-to="2" data-target="#carousel-generic">2</li>          </ul>            <!--  wrapper for slides  -->          <div class="carousel-inner">              <div class="item active">                  <img alt="first slide" src="images/slide1.png" />              </div>              <div class="item">                  <img alt="second slide" src="images/slide2.png" />              </div>              <div class="item">                  <img alt="third slide" src="images/slide3.png" />              </div>          </div>            <!--  controls  -->          <a class="carousel-control left" data-slide="prev" href="#carousel-generic">              &lt;          </a>          <a class="carousel-control right" data-slide="next" href="#carousel-generic">              &gt;          </a>      </div>  </div>
<div class="main">          <div id="timeLabel"></div>          <div id="hour"></div>          <div id="minute"></div>          <div id="second"></div>      </div>

先看看效果啊,如下图(摄像gif软件有一些渣,看起来卡卡的...)

前提:normalize.css  jquery.js

View Code

<a class="waves ts-btn">Press me!</a>

css 代码:

伟德国际娱乐城1946,终极调用如下:

伟德国际娱乐城1946 4

js 代码:

提起底页面代码:

js代码

伟德国际娱乐城1946 5伟德国际娱乐城1946 6

js代码如下:

伟德国际娱乐城1946 7伟德国际娱乐城1946 8

View Code

伟德国际娱乐城1946 9伟德国际娱乐城1946 10

如今见到个不利的按键点击效果,当点击时发生贰次水波涟漪效应,挺有意思的,于是简单的兑现了下(没怀想低版本浏览器包容难点)

.wrapper{      width:900px;      overflow: hidden;      margin: 0 auto;    }    .carousel{      position: relative;      width:900px;  }    .carousel-inner{      position: relative;      width: 100%;      overflow: hidden;  }    .carousel-inner .item{      position: relative;      display: none;      -webkit-transition:0.06s ease-in-out left;      -ms-transition: 0.6s ease-in-out left;      transition:0.6s ease-in-out left;  }    .carousel-inner .active,  .carousel-inner .next,  .carousel-inner .prev{      display: block;  }    .carousel-inner .active{      left:0;  }    .carousel-inner .next,  .carousel-inner .prev{      position: absolute;      top:0;      width: 100%;  }    .carousel-inner .next{      left:100%;  }    .carousel-inner .prev{      left:-100%;  }    .carousel-inner .next.left,  .carousel-inner .prev.right{      left:0;  }    .carousel-inner .active.left{      left:-100%;  }    .carousel-inner .active.right{      left:100%;  }    .carousel-control {      position: absolute;      top:0;      bottom:0;      width:15%;      font-size: 20px;      color:#fff;      text-align: center;      text-shadow:0 1px 2px rgba(0, 0, 0, 0.6);      opacity: 0.5;  }    .carousel-control.left {    left:0;    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);    background-repeat: repeat-x;  }    .carousel-control.right {    right: 0;    left: auto;    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);    background-repeat: repeat-x;  }    .carousel-control:hover,  .carousel-control:focus {    color: #ffffff;    text-decoration: none;    outline: none;    opacity: 0.9;  }    .carousel-indicators{      position: absolute;      bottom:10px;      width:60%;      left:50%;      margin-left: -30%;      padding-left: 0;      text-align: center;      z-index: 15;  }    .carousel-indicators li{      display: inline-block;      width: 10px;      height: 10px;      margin:1px;      text-indent: -9999px;      line-height: 0;      cursor: pointer;      background-color: #000 9;      background-color: rgba(0, 0, 0, 0);      border:1px solid #fff;      border-radius: 10px;  }    .carousel-indicators .active{      width:12px;      height:12px;      margin: 0;      background-color: #fff;  }

View Code

英特网摘了一份canves实现的代码,略微去掉了些重复定义的体制并且给出js注释,代码如下

 

伟德国际娱乐城1946 11伟德国际娱乐城1946 12

html代码

(function ($) {        "use strict";        var Carousel = function (element, options) {            this.$element = $(element);  // div.carousel          this.$indicators = this.$element.find(".carousel-indicators");  // ul.carousel-indicators          this.$items = this.$element.find(".item");            this.paused  = false,        // 动画停止了?(false)          this.sliding = false,        // 正在滑动中?(false)          this.interval = null,        // 有定时器吗?(null)          this.$active = null;          this.options = options;        // 合并后的options              this.options.pause === "hover" && this.$element.              on("mouseenter", $.proxy(this.pause, this)).              on("mouseleave", $.proxy(this.cycle, this));      };        Carousel.DEFAULTS = {          interval: 2000,          pause: "hover"      };        Carousel.fn = Carousel.prototype;        Carousel.fn.pause = function () {            this.paused = true; // 状态标记            this.interval = clearInterval(this.interval); // this.interval is undefined            return this;      };        Carousel.fn.cycle = function (e) {            e || (this.paused = false); // 标记状态            // 先清除定时器(如果有的话)          this.interval && clearInterval(this.interval);            // 在重设循环滚动的定时器          this.interval = setInterval($.proxy(this.next, this), this.options.interval);            return this;      };        Carousel.fn.next = function () {            if (this.sliding) {              return;          }            return this.slide("next");      };        Carousel.fn.prev = function () {            if (this.sliding) {              return;          }            return this.slide("prev");      };        Carousel.fn.getActiveIndex = function () {            this.$active = this.$element.find(".item.active");            return this.$items.index(this.$active);       };        // type: ["next", "prev"]; next: targetElement      Carousel.fn.slide = function (type, next) {            var $active = this.$element.find(".item.active"),              $next = next || $active[type](), // 下一帧的目标元素(注:最后一帧的下一帧是第一帧)              direction = (type === "next" ? "left" : "right"),              fallback = (type === "next" ? "first" : "last"),              isCycling = this.interval,              that = this;              // 边界元素问题          if (!$next.length) {              $next = this.$items[fallback]();          }            if ($next.hasClass('active')) {              return false;          }            // 状态:滚动中。。。          this.sliding = true;            // 停止当前动画          isCycling && this.pause();                // 开启新的动画 600毫秒          // o my god!!!!! the sequence is so important, but dont know why!!!          $next.addClass(type);          $next[0].offsetWidth;   //  force reflow!!!!!!!!!!!!!!          $next.addClass(direction);            $active.addClass(direction);                    // indicator同步改变样式          if (this.$indicators.length) {              this.$indicators.find('.active').removeClass('active');              this.$element.one("slide.bs.carousel", function () {                  // change indicators                  var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]);                  $nextIndicator && $nextIndicator.addClass("active");              });          }            // 动画完成后,重置样式或开启下一帧动画          var transitionend = function () {                $next.removeClass([type, direction].join(" ")).addClass("active");                $active.removeClass(["active", direction].join(" "));                // 立即触发              setTimeout(function () {                  // changer indicators or begin another animation (Carousel.fn.to)                  that.$element.trigger("slide.bs.carousel");              }, 0);                              that.sliding = false;              isCycling && that.cycle();                          };            setTimeout(transitionend, 600);  // 时间和css对应          };        // indicator and carousel-control with silde to       Carousel.fn.to = function (pos) {            var that = this,              activeIndex = this.getActiveIndex();            if (pos > (this.$items.length - 1) || pos < 0) {              return;          }            // 运动中。。。。。。。。。          if (this.sliding) {              // 当前动画完成后,会立即触发 slide.bs.carousel 事件              return this.$element.one("slide.bs.carousel", function () { that.to(pos); });          }            if (activeIndex === pos) {              return this.pause().cycle();          }            // 通过next或prev的方式到达this.$items[pos]          return this.slide(pos > activeIndex ? "next" : "prev", $(this.$items[pos]));        };            // jquery 插件      $.fn.carousel = function (option) {            return this.each(function () {                var $this = $(this),                  data = $this.data("bs.carsouel"),                  options = $.extend({}, Carousel.DEFAULTS, typeof option == 'object' && option);                if (!data) {                  // 妙处:把所有方法附加到carousel对象上  ==>                    $this.data("bs.carousel", (data = new Carousel(this, options)));                    // $this.data("bs.carousel") = data  就是滚动对象的引用              }                if (typeof option === "number") {                  // 直接切换到第几帧                  data.to(option);              } else if (typeof option === "string") {                  data[option]();              } else if (options.interval) {                  // interval is true 则自动播放                  data.pause().cycle();              }              });      };        $.fn.carousel.Constructor = Carousel;        // 事件绑定      $(document).on("click.carousel.data-api", "[data-slide-to], [data-slide]", function (e) {          e.preventDefault();            var $this = $(this),              $target = $($this.attr("data-target") || $this.attr("href")),              slide = $this.attr("data-slide"),              slideIndex = $this.attr("data-slide-to");            if (slide) {              $target.data("bs.carousel").slide(slide);          } else if (slideIndex) {              $target.data("bs.carousel").to(slideIndex);          }                  });          // 应用      $(".carousel").carousel();   })(jQuery);
  1. 预加防守早先时代专业,把石英钟的表面,时分秒针,实时光阴标签 的大约样子做好,效果如图:

接下去就是纯手打的代码了...感觉照旧css3完成的造福些,或者是css写习于旧贯了...

特征:滑动图片看起来长久唯有两帧,过度完美;是html css js的周密合作;个中html的data属性起了核心成效

window.onload = function () {              initClock();                      }          var timer = null;          function $(id) {              return document.getElementById(id)          }          function CreateKeDu(pElement, className, deg, translateWidth) {              var Pointer = document.createElement("div");              Pointer.className = className              Pointer.style.transform = "rotate("   deg   "deg)   translate("   translateWidth   "px)";              pElement.appendChild(Pointer);          }          function initClock() {              var main = $("biaopan");              var timeLabel = $("timeLabel");              var hour = $("hour");              var minute = $("minute");              var second = $("second");                var now = new Date();              var nowHour = now.getHours();              var nowMinute = now.getMinutes();              var nowSecond = now.getSeconds();                //初始化timeLabel              timeLabel.innerHTML = nowHour   ":"   nowMinute   ":"   nowSecond;                //初始化表盘              for (var index = 0; index < 4; index  ) {                  CreateKeDu(main, "hourPointer", index * 90, 138);              }                for (var index = 0; index < 12; index  ) {                  CreateKeDu(main, "minuterPointer",index*30, 140);              }              for (var index = 0; index < 60; index  ) {                  CreateKeDu(main, "secondPointer", index * 6, 142);              }                //初始化时分秒针              second.style.transform = "rotate("   (nowSecond * 6 - 90)   "deg)";              minute.style.transform = "rotate("   (nowMinute * 6   1 / 10 * nowSecond - 90)   "deg)";              hour.style.transform = "rotate("   (nowHour * 30   1 / 2 * nowMinute   1 / 120 * nowSecond - 90)   "deg)";          }

View Code

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:按钮点击效果

关键词: CSS

上一篇:按钮点击效果

下一篇:没有了