当前位置：首页 > 资讯 > 技术文档

jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现

时间：2021-02-12 19:16 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery 关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现

关键字“拖曳搜索”之“拖曳”功能需要 jQuery UI 之 droppable 库效果如下： [img]http://files.jb51.net/file_images/article/201004/1.gif[/img] 搜索包含相关关键字时，把拖曳左边关键字到右边框里面也可以在输入框里输入自定义关键字到下面框即可搜索如果去掉不需要的关键词搜索时把不需要的关键词从右边框拖曳回到左边即可 [img]http://files.jb51.net/file_images/article/201004/2.gif[/img] 无论原来还是自定义加入的关键词如果已存在她会提示... [img]http://files.jb51.net/file_images/article/201004/3.gif[/img] 实现：

[url=#c]<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> .... </div> <div id="keywordIncluding" class="keyword_including"> </div>

拖曳关键代码：拖曳关键词

[u]复制代码[/u][/url] 代码如下:

$('#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)); } });

判断是否存在自定义的关键字，如果有就提示，没有的话就加入

[url=#c]$('.add_to_search #AddInput #baohan').val(''); } $('#keywordIncluding a').draggable({ helper: 'clone' }); }

关键字是否存在

[u]复制代码[/u][/url] 代码如下:

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; }

拖曳就这样实现了如果要实现拖曳搜索功能的话加入Ajax 就ok了！下面说说图片“提示自适应放大”效果一张小的缩略图当鼠标移过时就会有放大的提示效果 : [img]http://files.jb51.net/file_images/article/201004/4.gif[/img] 缩略图如果在页面不同位置时鼠标移过时放大提示效果会自动感应提示放大效果应该是在左边还是右边或者上面或者下面不会因浏览器而遮住非常人性化 [img]http://files.jb51.net/file_images/article/201004/5.gif[/img] 实现

[url=#]</span> </li>

提示效果

[u]复制代码[/u][/url] 代码如下: