在線演示

對于一個(gè)元素應(yīng)用一個(gè)：hover偽類的體式格式是一個(gè)典范辦法來實(shí)現(xiàn)一個(gè)頁面元素的懸浮結(jié)果。然則題目是應(yīng)用border-radius來實(shí)現(xiàn)的懸浮并不是很是幻想的體式格式來對一個(gè)圓形元素實(shí)現(xiàn)懸浮事務(wù)處理懲罰，因?yàn)槟銦o法針對真正的可視圓形區(qū)域處理懲罰懸浮事務(wù)，而只能針對對應(yīng)的外邊框矩形區(qū)域?qū)崿F(xiàn)懸浮。希罕是當(dāng)你設(shè)置border-radius為50％的時(shí)辰。

今天我們這里將分享一個(gè)解決體式格式來針對圓形來實(shí)現(xiàn)懸浮結(jié)果。我們將開辟一個(gè)插件來處理懲罰真正的圓形區(qū)域?qū)?yīng)的‘mouseenter’，‘mou搜刮引擎優(yōu)化ut’和‘click’事務(wù)而不是對應(yīng)的矩形區(qū)域。

起首我們須要?jiǎng)?chuàng)建一個(gè)圓形。如下：

 

Hovered

以下為對應(yīng)的樣式表：

.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;
}

接下來我們?yōu)閼腋〗Y(jié)果定義一個(gè)class，但不是應(yīng)用一個(gè)動(dòng)態(tài)的偽class ：hover。首要的設(shè)法是當(dāng)我們進(jìn)入圓形區(qū)域的時(shí)辰應(yīng)用jQuery履行這個(gè)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）;
}

只有當(dāng)javascript被禁用的時(shí)辰，我們才應(yīng)用偽類體式格式。如下：

.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""）;
 }
};

當(dāng)我們的鼠標(biāo)進(jìn)入圓形區(qū)域?qū)?yīng)的外部矩形邊框后，我們將綁定mousemove辦法到對應(yīng)元素。然后我們策畫鼠標(biāo)離元素中間的間隔。若是間隔大于圓形半徑，那么我們就知道不須要懸浮，不然，就觸發(fā)自定義的‘mouseenter’事務(wù)。

同時(shí)若是出于圓內(nèi)我們也可以容許觸發(fā)鼠標(biāo)的點(diǎn)擊事務(wù)。

在我們的例子中我們可以針對任何元素履行我們的插件。在這個(gè)實(shí)例中，我們添加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被禁用后，依然可以實(shí)現(xiàn)懸浮，固然不如JS實(shí)現(xiàn)的完美。

via：tympanus

---