效果体验：

本效果适用于移动设备，可以使用手机等浏览效果。

代码下载：

HTML代码如下：

1  2  3  4 
      5 
      6 
      7  8 
      9 
     10 
     11 12 13 14 
     
      15 
      首页 
      特效 
      原文16 
     
17 
     
      18 
      
       19 
       
        20 
        21 
        22 
        23 
       
24 
       25 
       
        26 27 
       
28 
      
29 
     
30 31 32 33 34 

 

其中hovertreesearch.js的代码如下：

1 function searchToggle(obj, evt) { 2 var container = $(obj).closest('.search-wrapper'); 3  4 if (!container.hasClass('active')) { 5 container.addClass('active'); 6 evt.preventDefault(); 7 } 8 else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) { 9 container.removeClass('active');10 // clear input11 container.find('.search-input').val('');12 // clear and hide result container when we press close13 container.find('.result-container').fadeOut(100, function () { $(this).empty(); });14 }15 }16 17 function submitFn(obj, evt) {18 var value = $(obj).find('.search-input').val().trim();19 20 var _html = "您搜索的关键词： ";21 if (!value.length) {22 _html = "关键词不能为空。";23 }24 else {25 window.open("http://cn.bi" + "ng.com/search?q=site%3Ahove" + "rtree.com " + value + "&hewenqi=yestop");26 _html += "" + value + "";27 }28 29 $(obj).find('.result-container').html('' + _html + '');30 $(obj).find('.result-container').fadeIn(100);31 32 evt.preventDefault();33 }

更多特效：