网页应用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

---