jquery关键字“拖曳搜索”之“拖曳”以及图片“提示自适应放大”效果的实现
2023-06-13 09:14:18 时间
关键字“拖曳搜索”之“拖曳”功能需要jQueryUI之droppable库效果如下:
搜索包含相关关键字时,把拖曳左边关键字到右边框里面也可以在输入框里输入自定义关键字到下面框即可搜索
如果去掉不需要的关键词搜索时把不需要的关键词从右边框拖曳回到左边即可
无论原来还是自定义加入的关键词如果已存在她会提示...
实现:
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery-ui-1.8.custom.min.js"></script>
左边框右边框
<divid="KeywordContent"class="keyword_content_BackGroundui-droppable">
<ahref="#c"value="温馨"style="cursor:pointer">温馨</a>
<ahref="#c"value="春天"style="cursor:pointer">春天</a>
<ahref="#c"value="儿童"style="cursor:pointer">儿童</a>
<ahref="#c"value="美女"style="cursor:pointer">美女</a>
<ahref="#c"value="爱情"style="cursor:pointer">爱情</a>
....
</div>
<divid="keywordIncluding"class="keyword_including">
</div>
拖曳关键代码:
拖曳关键词
$("#keywordIncludinga,#KeywordContenta").draggable({
helper:"clone"
});
//左边keyword_content拖曳到右边keyword_including
$("#KeywordContent").droppable({
accept:"#keywordIncludinga",
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:"#KeywordContenta",
activeClass:"including_active",
opacity:"0.5",
drop:function(ev,ui){
$(this).addClass("dropped");
ui.draggable.fadeOut("normal",function(){
$(this).fadeIn("fast");
}).appendTo($(this));
}
});
判断是否存在自定义的关键字,如果有就提示,没有的话就加入
//输入框点击
$("#AddInputinput[type="button"]").click(InputInclude);
//输入框回车
functionownKeywordAddInput(evt)
{
if(evt.keyCode==13)
{
InputInclude();
}
}
//关键词是否存在
functionInputInclude(){
$("#keywordIncluding").addClass("dropped");
varown=$(".add_to_search#AddInputinput").val();
own=jQuery.trim(own);
if(own.length!=0)
{
//在此处理"|"问题
while(own.indexOf("|")>-1)
{
own=own.replace(/\|/g,"");
}
while(own.indexOf("")>-1)
{
own=own.replace(//g,"");
}
varExistsKeywordArr=GetExistsKeywordArr();
for(vari=0;i<ExistsKeywordArr.length;i++)
{
if(ExistsKeywordArr[i]==own)
{
alert("此关键字已存在,请通过拖拽操作获取关键字来搜索图片");
return;
}
}
$("#keywordIncluding").append("<ahref="#c"value="+own+"style="cursor:pointer">"+own+"</a>");
$(".add_to_search#AddInput#baohan").val("");
}
$("#keywordIncludinga").draggable({
helper:"clone"
});
}
关键字是否存在
functionGetExistsKeywordArr()
{
varkeyArrResult=[];
$("#keywordIncludinga").each(
function(i,v){
keyArrResult.push($(v).attr("value"));
});
$("#KeywordContenta").each(
function(i,v){
keyArrResult.push($(v).attr("value"));
});
returnkeyArrResult;
}
拖曳就这样实现了如果要实现拖曳搜索功能的话加入Ajax就ok了!
下面说说图片“提示自适应放大”效果
一张小的缩略图当鼠标移过时就会有放大的提示效果:
缩略图如果在页面不同位置时鼠标移过时放大提示效果会自动感应
提示放大效果应该是在左边还是右边或者上面或者下面不会因浏览器而遮住非常人性化
实现
<scripttype="text/javascript"src="js/jquery.tooltip.js"></script>
<li>
<spanclass="img">
<ahref="#"><imgsrc="1h-3928.jpg"lowsrc="1h-39281.jpg"/></a>
</span>
</li>
提示效果
<scripttype="text/javascript">
$(".imgimg").tooltip({
track:true,
delay:1000,
showURL:false,
bodyHandler:function(){
return$("<img/>").attr("src",this.lowsrc);
}
});
</script>
完毕!演示效果:
作者:
出处:
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- vue.js与jquery的区别_说出两者之间的区别
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- JQuery Tips(1)—-关于$.Ready()详解编程语言
- jQuery表单插件jquery.form.js详解编程语言
- jQuery prepend()和prependTo()方法
- jquery$.ajax入门应用一
- JQuery初体验(建议学习jquery)
- jQuery温习篇强大的JQuery选择器
- 初窥JQuery-Jquery简介入门了解篇
- 合并table相同单元格的jquery插件分享(很精简)
- 关于锚点跳转及jQuery下相关操作与插件
- jquery文字上下滚动的实现方法
- 关于JQuery($.load)事件的用法和分析
- JQuery制作的放大效果的popup对话框(未添加任何jqueryplugin)分享
- JQuery中关于jquery.js与jquery.min.js的比较探讨
- jquery.ui.draggable中文文档(原文翻译)
- jquery简单实现滚动条下拉DIV固定在头部不动
- Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
- asp.net使用jquery实现搜索框默认提示功能
- 让input框实现类似百度的搜索提示(基于jquery事件监听)
- Jquery获取元素的父容器对象示例代码
- jQuery提示效果代码分享
- jquery+php实现搜索框自动提示
- jQuery+PHP+ajax实现微博加载更多内容列表功能
- jquery中checkbox全选失效的解决方法
- jquery搜索框效果实现方法