威尼斯www.9778.com-威尼斯正版官方网站

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

日期:2019-12-25编辑作者:服务器&运维

关键字“拖曳搜索”之“拖曳”功能需要 jQuery UI 之 droppable 库 效果如下:

搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索

如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可

无论原来还是自定义加入的关键词 如果已存在 她会提示...

实现:复制代码 代码如下:

左边框 右边框 复制代码 代码如下:

温馨 春天 儿童 美女 爱情 ....

拖曳关键代码: 拖曳关键词 复制代码 代码如下: $('#keywordIncluding a, #KeywordContent a').draggable; // 左边 keyword_content 拖曳到 右边keyword_including $.droppable({ accept: '#keywordIncluding a', activeClass: 'keyword_content_active', opacity: '0.5', drop: function.addClass; ui.draggable.fadeOut { $; }).appendTo; // 右边 keyword_including 拖曳到 左边keyword_content $.droppable({ accept: '#KeywordContent a', activeClass: 'including_active', opacity: '0.5', drop: function.addClass; ui.draggable.fadeOut { $; }).appendTo; 判断是否存在自定义的关键字,如果有就提示,没有的话就加入 复制代码 代码如下: //输入框点击 $('#AddInput input[type="button"]').click; //输入框 回车 function ownKeywordAddInput { if { InputInclude(); } } //关键词是否存在 function InputInclude(){ $.addClass; var own = $('.add_to_search #AddInput input').val(); own = jQuery.trim; if { //在此处理"|"问题 while { own = own.replace; } while { own = own.replace; } var ExistsKeywordArr = GetExistsKeywordArr(); for(var i=0;i"+ own +""); $('.add_to_search #AddInput #baohan').val; } $('#keywordIncluding a').draggable; } 关键字是否存在 复制代码 代码如下: function GetExistsKeywordArr() { var keyArrResult=[]; $("#keywordIncluding a").each{ keyArrResult.push; }); $.each{ keyArrResult.push; }); return keyArrResult; } 拖曳就这样实现了 如果要实现拖曳搜索功能的话 加入Ajax 就ok了!

下面说说 图片“提示自适应放大”效果

一张小的缩略图 当鼠标移过时 就会有放大的提示效果 :

缩略图如果在页面不同位置时 鼠标移过时 放大提示效果会自动感应

提示放大效果应该是在左边还是右边 或者上面或者下面 不会因浏览器而遮住 非常人性化

实现复制代码 代码如下:

图片 1

提示效果 复制代码 代码如下:

完毕!演示效果:

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现_jquery_脚本之家

关键词:

jquery获取input表单值的代码_jquery_脚本之家

jquery取radio单选按钮的值 $("input[name='items']:checked").val();jqueryradio取值,checkbox取值,select取值,radio选中,checkbox选中,...

详细>>

javascript对象之内置对象Math使用方法_基础知识_脚本之家

一、Math.min,分别返回参数中的最小和最大值 例: alert //输出 "1"alert //输出 "3" 二、Math.abs(),返回参数的绝对值 例:...

详细>>

一套比较完整的javascript面试题_javascript技巧_脚本之家

一、单选题 1、以下哪条语句会发出运转错误:;//语法错误 B.var obj =[];//创设数组 C.var obj = {};//成立对象 D.var obj = //...

详细>>

分享31个实用的Javascript工具

尽管JavaScript的语法非常简单,但对于写程序而言仍然是困难重重,就是因为它的运行环境:基于Web浏览器。JSLint 下面...

详细>>