jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及圖片“提示自適應(yīng)放大”效果的實(shí)現(xiàn)

更新時(shí)間：2010年04月18日 01:42:40 作者：

關(guān)鍵字“拖曳搜索”之“拖曳”功能需要 jQuery UI 之 droppable 庫(kù) 效果如下：

搜索包含相關(guān)關(guān)鍵字時(shí)，把拖曳左邊關(guān)鍵字到右邊框里面也可以在輸入框里輸入自定義關(guān)鍵字到下面框即可搜索

如果去掉不需要的關(guān)鍵詞搜索時(shí) 把不需要的關(guān)鍵詞從右邊框拖曳回到左邊即可

無(wú)論原來(lái)還是自定義加入的關(guān)鍵詞如果已存在她會(huì)提示...

實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> 

左邊框右邊框

復(fù)制代碼代碼如下:

 
<div id="KeywordContent" class="keyword_content_BackGround ui-droppable"> 
<a href="#c" value="溫馨" style="cursor:pointer"> 溫馨 </a> 
<a href="#c" value="春天" style="cursor:pointer"> 春天 </a> 
<a href="#c" value="兒童" style="cursor:pointer">兒童 </a> 
<a href="#c" value="美女" style="cursor:pointer">美女</a> 
<a href="#c" value="愛(ài)情" style="cursor:pointer">愛(ài)情</a> 
.... 
</div> 
<div id="keywordIncluding" class="keyword_including"> 
</div> 

拖曳關(guān)鍵代碼：
拖曳關(guān)鍵詞

復(fù)制代碼代碼如下:

 
$('#keywordIncluding a, #KeywordContent a').draggable({ 
helper: 'clone' 
}); 
// 左邊 keyword_content 拖曳到 右邊keyword_including 
$('#KeywordContent').droppable({ 
accept: '#keywordIncluding a', 
activeClass: 'keyword_content_active', 
opacity: '0.5', 
drop: function(ev, ui) { 
$(this).addClass('dropped'); 
ui.draggable.fadeOut('fast', function() { 
$(this).fadeIn('fast'); 
}).appendTo($(this)); 
} 
}); 
// 右邊 keyword_including 拖曳到 左邊keyword_content 
$('#keywordIncluding').droppable({ 
accept: '#KeywordContent a', 
activeClass: 'including_active', 
opacity: '0.5', 
drop: function(ev, ui) { 
$(this).addClass('dropped'); 
ui.draggable.fadeOut('normal', function() { 
$(this).fadeIn('fast'); 
}).appendTo($(this)); 
} 
}); 

判斷是否存在自定義的關(guān)鍵字，如果有就提示，沒(méi)有的話(huà)就加入

復(fù)制代碼代碼如下:

 
//輸入框點(diǎn)擊 
$('#AddInput input[type="button"]').click( InputInclude); 
//輸入框 回車(chē) 
function ownKeywordAddInput(evt) 
{ 
if(evt.keyCode==13) 
{ 
InputInclude(); 
} 
} 
//關(guān)鍵詞是否存在 
function InputInclude(){ 
$('#keywordIncluding').addClass("dropped"); 
var own = $('.add_to_search #AddInput input').val(); 
own = jQuery.trim(own); 
if( own.length != 0) 
{ 
//在此處理"|"問(wèn)題 
while(own.indexOf('|')>-1) 
{ 
own = own.replace(/\|/g,""); 
} 
while(own.indexOf(' ')>-1) 
{ 
own = own.replace(/ /g,""); 
} 
var ExistsKeywordArr = GetExistsKeywordArr(); 
for(var i=0;i<ExistsKeywordArr.length;i++) 
{ 
if(ExistsKeywordArr[i]==own) 
{ 
alert('此關(guān)鍵字已存在，請(qǐng)通過(guò)拖拽操作獲取關(guān)鍵字來(lái)搜索圖片'); 
return; 
} 
} 
$('#keywordIncluding').append("<a href='#c' value="+own+" style='cursor:pointer'>"+ own +"</a>"); 
$('.add_to_search #AddInput #baohan').val(''); 
} 
$('#keywordIncluding a').draggable({ 
helper: 'clone' 
}); 
} 

關(guān)鍵字是否存在

復(fù)制代碼代碼如下:

 
function GetExistsKeywordArr() 
{ 
var keyArrResult=[]; 
$("#keywordIncluding a").each( 
function(i,v){ 
keyArrResult.push($(v).attr("value")); 
}); 
$("#KeywordContent a").each( 
function(i,v){ 
keyArrResult.push($(v).attr("value")); 
}); 
return keyArrResult; 
} 

拖曳就這樣實(shí)現(xiàn)了如果要實(shí)現(xiàn)拖曳搜索功能的話(huà) 加入Ajax 就ok了！

下面說(shuō)說(shuō) 圖片“提示自適應(yīng)放大”效果

一張小的縮略圖當(dāng)鼠標(biāo)移過(guò)時(shí) 就會(huì)有放大的提示效果 :

縮略圖如果在頁(yè)面不同位置時(shí) 鼠標(biāo)移過(guò)時(shí) 放大提示效果會(huì)自動(dòng)感應(yīng)

提示放大效果應(yīng)該是在左邊還是右邊或者上面或者下面不會(huì)因?yàn)g覽器而遮住非常人性化

實(shí)現(xiàn)

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="js/jquery.tooltip.js"></script> 
<li> 
<span class="img"> 
<a href="#"> <img src="1h-3928.jpg" lowsrc="1h-39281.jpg" /> </a> 
</span> 
</li> 

提示效果

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(".img img").tooltip({ 
track: true, 
delay: 1000, 
showURL: false, 
bodyHandler: function() { 
return $("<img/>").attr("src", this.lowsrc); 
} 
}); 
</script> 