網頁應用jQuery開辟的圓形頁面元素懸浮和點擊觸發教程

 

在線演示

對于一個元素應用一個：hover偽類的體式格式是一個典范辦法來實現一個頁面元素的懸浮結果。然則題目是應用border-radius來實現的懸浮并不是很是幻想的體式格式來對一個圓形元素實現懸浮事務處理懲罰，因為你無法針對真正的可視圓形區域處理懲罰懸浮事務，而只能針對對應的外邊框矩形區域實現懸浮。希罕是當你設置border-radius為50％的時辰。

今天我們這里將分享一個解決體式格式來針對圓形來實現懸浮結果。我們將開辟一個插件來處理懲罰真正的圓形區域對應的‘mouseenter’，‘mou搜刮引擎優化ut’和‘click’事務而不是對應的矩形區域。

起首我們須要創建一個圓形。如下：

 

Hovered

以下為對應的樣式表：

.ec-circle{
 width: 420px;
 height: 420px;
 -webkit-border-radius: 210px;
 -moz-border-radius: 210px;
 border-radius: 50％;
 text-align: center;
 overflow: hidden;
 font-family:""Kelly Slab""， Georgia， serif;
 background: ＃dda994 url（../images/1.jpg） no-repeat center center;
 box-shadow:
  inset 0 0 1px 230px rgba（0，0，0，0.6），
  inset 0 0 0 7px ＃d5ad94;
 transition: box-shadow 400ms ease-in-out;
 display: block;
 outline: none;
}

接下來我們為懸浮結果定義一個class，但不是應用一個動態的偽class ：hover。首要的設法是當我們進入圓形區域的時辰應用jQuery履行這個class：

.ec-circle-hover{
    box-shadow:
  inset 0 0 0 0 rgba（0，0，0，0.6），
  inset 0 0 0 20px ＃c18167，
  0 0 10px rgba（0，0，0，0.3）;
}

只有當javascript被禁用的時辰，我們才應用偽類體式格式。如下：

.ec-circle:hover{
    box-shadow:
  inset 0 0 0 0 rgba（0，0，0，0.6），
  inset 0 0 0 20px ＃c18167，
  0 0 10px rgba（0，0，0，0.3）;
}

JavaScript

￥.CircleEventManager    = function（ options， element ） {
 this.￥el   = ￥（ element ）;
 this._init（ options ）;
};

￥.CircleEventManager.defaults  = {
 onMouseEnter : function（） { return false }，
 onMouseLeave : function（） { return false }，
 onClick   : function（） { return false }
};

￥.CircleEventManager.prototype  = {
 _init     : function（ options ） {
  this.options   = ￥.extend（ true， {}， ￥.CircleEventManager.defaults， options ）;
  // set the default cursor on the element
  this.￥el.css（ ""cursor""， ""default"" ）;
  this._initEvents（）;
 }，
 _initEvents   : function（） {
  var _self = this;
  this.￥el.on（{
   ""mouseenter.circlemouse"" : function（ event ） {
    var el = ￥（event.target），
        circleWidth = el.outerWidth（ true ），
        circleHeight = el.outerHeight（ true ），
        circleLeft = el.offset（）.left，
        circleTop  = el.offset（）.top，
        circlePos  = {
         x  : circleLeft + circleWidth / 2，
         y  : circleTop + circleHeight / 2，
         radius: circleWidth / 2
        };
    // save cursor type
    var cursor = ""default"";
    if（ _self.￥el.css（""cursor""） === ""pointer"" || _self.￥el.is（""a""） ）
     cursor = ""pointer"";
    el.data（ ""cursor""， cursor ）;
    el.on（ ""mousemove.circlemouse""， function（ event ） {
     var distance = Math.sqrt（ Math.pow（ event.pageX - circlePos.x， 2 ） + Math.pow（ event.pageY - circlePos.y， 2 ） ）;
     if（ !Modernizr.borderradius ） {

      // inside element / circle
      el.css（ ""cursor""， el.data（""cursor""） ）.data（ ""inside""， true ）;
      _self.options.onMouseEnter（ _self.￥el ）;

     }
     else {
      if（ distance <= circlePos.radius && !el.data（""inside""） ） {
       // inside element / circle
       el.css（ ""cursor""， el.data（""cursor""） ）.data（ ""inside""， true ）;
       _self.options.onMouseEnter（ _self.￥el ）;

      }
      else if（ distance > circlePos.radius && el.data（""inside""） ） {
       // inside element / outside circle
       el.css（ ""cursor""， ""default"" ）.data（ ""inside""， false ）;
       _self.options.onMouseLeave（ _self.￥el ）;
      }
     }
    }）; 
   }，
   ""mouseleave.circlemouse"" : function（ event ） {
    var el  = ￥（event.target）;
    el.off（""mousemove""）;
    if（ el.data（ ""inside"" ） ） {
     el.data（ ""inside""， false ）;
     _self.options.onMouseLeave（ _self.￥el ）;
    }
   }，
   ""click.circlemouse""   : function（ event ） {
    // allow the click only when inside the circle
    var el  = ￥（event.target）;
    if（ !el.data（ ""inside"" ） ）
     return false;
    else
     _self.options.onClick（ _self.￥el ）;
   }
  }）;
 }，
 destroy    : function（） {
  this.￥el.unbind（"".circlemouse""）.removeData（""inside""）.removeData（""cursor""）;
 }
};

當我們的鼠標進入圓形區域對應的外部矩形邊框后，我們將綁定mousemove辦法到對應元素。然后我們策畫鼠標離元素中間的間隔。若是間隔大于圓形半徑，那么我們就知道不須要懸浮，不然，就觸發自定義的‘mouseenter’事務。

同時若是出于圓內我們也可以容許觸發鼠標的點擊事務。

在我們的例子中我們可以針對任何元素履行我們的插件。在這個實例中，我們添加hover的class到‘mouseenter’并且在‘mouseleave’中刪除掉。

￥（""＃circle""）.circlemouse（{
 onMouseEnter : function（ el ） {
  el.addClass（""ec-circle-hover""）;
 }，
 onMouseLeave : function（ el ） {
  el.removeClass（""ec-circle-hover""）;
 }，
 onClick   : function（ el ） {
  alert（""clicked""）;
 }
}）;

記住正常的偽類懸浮體式格式也須要定義到noscript.css中，如許若是javascript被禁用后，依然可以實現懸浮，固然不如JS實現的完美。

via：tympanus

---