利用jQuery實現感知方向懸停按鈕特效



11 42 15



特效描述:利用jQuery實現 感知方向 懸停按鈕特效,利用jQuery實現感知方向懸停按鈕特效

代碼結構

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代碼

<div class="content">
  <h1>Bubble hover effect</h1>
  <div class="button_container">
      <div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            Simple button
          </span>
        </a>
      </div>
      <div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            Another button
          </span>
        </a>
      </div>
      <div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            A third button
          </span>
        </a>
      </div>
      <div class="button_su">
        <span class="su_button_circle">
        </span>
        <a href="#" class="button_su_inner">
          <span class="button_text_container">
            A forth button
          </span>
        </a>
      </div>
  </div>
</div>
<script>
$( ".button_su_inner" ).mouseenter(function(e) {
   var parentOffset = $(this).offset(); 
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
   $(this).prev(".su_button_circle").removeClass("desplode-circle");
   $(this).prev(".su_button_circle").addClass("explode-circle");
});
$( ".button_su_inner" ).mouseleave(function(e) {
     var parentOffset = $(this).offset(); 
     var relX = e.pageX - parentOffset.left;
     var relY = e.pageY - parentOffset.top;
     $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
     $(this).prev(".su_button_circle").removeClass("explode-circle");
     $(this).prev(".su_button_circle").addClass("desplode-circle");
});
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 滑動星星打分 h5彈窗動畫 html5彈窗動畫 切換按鈕 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 表單 表單美化 表單插件 表單美化插件 其他 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 鼠標滑過 鼠標懸停 跟隨鼠標移動 h5按鈕動畫 html5按鈕動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 娱乐平台下载 河北快3怎样推算 上海股票融资 超级大乐透500期走势图 美柚自媒体怎么赚钱 排列五开奖直播 7星彩18135 什么是包胆号码 陕西麻将app 映客直播点亮能赚钱吗 2008排列五走势图 幸运365软件是正规的嘛 有卖看片软件赚钱的吗 做ipo很赚钱么 各种彩票玩法说明 福彩3d开奖结果今天