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

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

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

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

 

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


实现:

复制代码 代码如下:

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

左边框 右边框

复制代码 代码如下:

<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="爱情" style="cursor:pointer">爱情</a>
....
</div>
<div id="keywordIncluding" class="keyword_including">
</div>

拖曳关键代码:
拖曳关键词

复制代码 代码如下:

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

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

复制代码 代码如下:

//输入框点击
$('#AddInput input[type="button"]').click( InputInclude);
//输入框 回车
function ownKeywordAddInput(evt)
{
if(evt.keyCode==13)
{
InputInclude();
}
}
//关键词是否存在
function InputInclude(){
$('#keywordIncluding').addClass("dropped");
var own = $('.add_to_search #AddInput input').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,"");
}
var ExistsKeywordArr = GetExistsKeywordArr();
for(var i=0;i<ExistsKeywordArr.length;i++)
{
if(ExistsKeywordArr[i]==own)
{
alert('此关键字已存在,请通过拖拽操作获取关键字来搜索图片');
return;
}
}
$('#keywordIncluding').append("<a href='#c' value="+own+" style='cursor:pointer'>"+ own +"</a>");
$('.add_to_search #AddInput #baohan').val('');
}
$('#keywordIncluding a').draggable({
helper: 'clone'
});
}

关键字是否存在

复制代码 代码如下:

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了!

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

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

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

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

实现

复制代码 代码如下:

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

提示效果

复制代码 代码如下:

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

完毕!演示效果:http://www.quanjing.com/FrameSet.aspx?SearchType=7&SearchTab=G2&CEFlag=1

作者:曾祥展
出处:http://zengxiangzhan.cnblogs.com/

时间: 2024-09-27 10:36:50

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

jQuery实现为图片添加镜头放大效果的方法_jquery

本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

jQuery实现为图片添加镜头放大效果的方法

本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: ? 1 2 3 4 5 6 $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg

jquery图片预览放大效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

jQuery实现类似淘宝网图片放大效果的方法_jquery

本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

jQuery实现点击图片翻页展示效果的方法_jquery

本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

jQuery实现鼠标移到元素上动态提示消息框效果_jquery

当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery动态提示消息框效果</title><base target="_blank&qu

jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)_jquery

demo04.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

关于微信上网页图片点击全屏放大效果_javascript技巧

实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson(o) { var r = []; if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\

jquery实现两个图片渐变切换效果的方法_jquery

本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> </div> j