DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Jquery 點擊按鈕自動高亮實現原理及代碼
Jquery 點擊按鈕自動高亮實現原理及代碼
編輯:JavaScript綜合知識     

   其實原理很簡單,我們點擊的時候我們給元素加上一個自定義的attr,加上後便會有有一個匹配的樣式去自動適配背景,幾秒後去掉該樣式恢復原狀

  首先在自己的js中拓展一個方法hoverEl

  代碼如下:

  $.extend($.fn, {

  hoverEl:function(){

  var _this = $(this);

  var _t = setTimeout(function(){

  _this.attr("hover", "on");

  }, 10);

  _this.attr("hoverTimeout", _t);

  setTimeout(function(){

  clearTimeout( _this.attr("hoverTimeout") );

  var _t = setTimeout(function(){

  _this.removeAttr("hover");

  }, 100);

  _this.attr("hoverTimeout", _t);

  },200);

  }

  });

  其次定義樣式,當特定attr被加上時

  代碼如下:

  li[hover=on]{

  background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important;

  background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important;

  color: white!important;

  cursor: pointer!important;

  }

  調用示例:

  代碼如下:

  $(e.target).hoverEl();

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved