求一个ajax实现的效果？？？

qingYun1029 2011-01-04 01:21:07

当鼠标以上一个连接时，鼠标旁边有一些提示。。
这些提示需要一定的格式（自己可以定义提示的样式）。。

不需要与服务器交换，提示信息内容是静态的！！！

谢谢啦！！！

...全文

102 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

qingYun1029 2011-01-07

打赏
举报

[Quote=引用 17 楼 shenzhennba 的回复:]

引用 3 楼 qingyun1029 的回复:
引用 1 楼 shenzhennba 的回复:

参考一下，是不是这个效果
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
……
[/Quote]

谢谢了。。

qingYun1029 2011-01-07

打赏
举报

[Quote=引用 13 楼 yhtapmys 的回复:]

引用 8 楼 qingyun1029 的回复:
引用 7 楼 caikanxp 的回复:

插一句“题外话”：这种效果跟ajax完全不搭边……

没有说和ajax有关吧？？
我只说用到了jquery，js库。。

没错啊！

引用 11 楼 qingyun1029 的回复:
引用 10 楼 ccycxy123 的回复:

你这个只是一个简单的js的鼠标事件，就用……
[/Quote]

对对，是我搞错了。。
对不住了！！！

yhtapmys 2011-01-06

打赏
举报

[Quote=引用 8 楼 qingyun1029 的回复:]
引用 7 楼 caikanxp 的回复:

插一句“题外话”：这种效果跟ajax完全不搭边……

没有说和ajax有关吧？？
我只说用到了jquery，js库。。

没错啊！
[/Quote]

[Quote=引用 11 楼 qingyun1029 的回复:]
引用 10 楼 ccycxy123 的回复:

你这个只是一个简单的js的鼠标事件，就用层的隐藏和显示来控制嘛。动态的内容才是ajax哈……

用的是jquery中的ui控件。。。
为什么一定要所是ajax呢？？？
[/Quote]

楼主健忘了，这个是原标题
求一个ajax实现的效果？？？[问题点数:40分]
而不是
求一个jquery实现的效果？？？

-----------------------
我无心质疑一些人的逻辑能力或记忆能力或智力或经验或基础等
只想提个醒
Ajax和jquery其实是两个不一样的概念，不要搞混它们了。

yqfly2008 2011-01-06

打赏
举报

[Quote=引用 3 楼 qingyun1029 的回复:]
引用 1 楼 shenzhennba 的回复:

参考一下，是不是这个效果
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content……
[/Quote]

解决方法：
$('#msgTip').mouseout(function(){$(this).hide('normal');});
});
改成：
$('#alink01').mouseout(function(){$('#msgTip').hide('normal');});
});

应该让鼠标移开链接时就让提示消失

qingYun1029 2011-01-06

打赏
举报

[Quote=引用 10 楼 ccycxy123 的回复:]

你这个只是一个简单的js的鼠标事件，就用层的隐藏和显示来控制嘛。动态的内容才是ajax哈……
[/Quote]

用的是jquery中的ui控件。。。
为什么一定要所是ajax呢？？？

ccycxy123 2011-01-06

打赏
举报

[Quote=引用 10 楼 ccycxy123 的回复:]

你这个只是一个简单的js的鼠标事件，就用层的隐藏和显示来控制嘛。动态的内容才是ajax哈……
[/Quote]
解释一下哈，我所谓的动态内容是从服务器获取的哈……

shenzhenNBA 2011-01-06

打赏
举报

[Quote=引用 3 楼 qingyun1029 的回复:]
引用 1 楼 shenzhennba 的回复:

参考一下，是不是这个效果
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content……
刚刚试了一下，差不多了。
发现了两个缺点。
1：当鼠标移向超链接时，提示是出来了，但是当你“向上面”移开鼠标时——移开是鼠标不经过提示DIV，此时提示DIV不能消失。
2：当鼠标从提示DIV向下移开时，和上面相反，提示的文字有一种”闪烁“的效果，就是有点晃眼睛。。

你也可以看看。。
[/Quote]
1问题，修改一下，见红色部分。2问题因为是动态效果过程是有点这个情况，
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#alink01').mouseover(function(){
var o=$("#msgTip");
var posx = $(this).offset().left+10;
var posy = $(this).offset().top+$(this).height();
var txt = $(this).attr("title");
o.html(txt); //设置显示的信息文本
o.css("left",posx);
o.css("top",posy);
o.css("position","absolute");
o.width(300);
o.show('fast');
});

$('#alink01').mouseout(function(){ $('#msgTip').hide('normal'); });

//$('#msgTip').mouseout(function(){$(this).hide('normal');}); //不用，估计仅仅看提示信息而已

});
</script>

若非零落 2011-01-06

打赏
举报

wugui414 2011-01-06

打赏
举报

[Quote=引用楼主 qingyun1029 的回复:]
当鼠标以上一个连接时，鼠标旁边有一些提示。。
这些提示需要一定的格式（自己可以定义提示的样式）。。

不需要与服务器交换，提示信息内容是静态的！！！

谢谢啦！！！
[/Quote]
不需要与服务器交换，这还是Ajax吗？

wugui414 2011-01-06

打赏
举报

……混乱了吧

lllwwt 2011-01-05

打赏
举报

ccycxy123 2011-01-05

打赏
举报

你这个只是一个简单的js的鼠标事件，就用层的隐藏和显示来控制嘛。动态的内容才是ajax哈……

籽沫 2011-01-05

打赏
举报

标题党啊……

我也以为是ajax 崩溃

qingYun1029 2011-01-05

打赏
举报

[Quote=引用 7 楼 caikanxp 的回复:]

插一句“题外话”：这种效果跟ajax完全不搭边……
[/Quote]

没有说和ajax有关吧？？
我只说用到了jquery，js库。。

没错啊！

CaiKanXP 2011-01-05

打赏
举报

插一句“题外话”：这种效果跟ajax完全不搭边……

qingYun1029 2011-01-04

打赏
举报

对了，他的样式代码写在js/jquery.qtip-1.0.0-rc3.min.js这个js文件里面，但是格式都是被压缩过后的。
请问有没有什么方法可以还原这些代码呀？？

qingYun1029 2011-01-04

打赏
举报

另外，我自己也找了一个。。
用到了这个js文件

<script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.min.js"></script>

但是效果不是很好控制。。
这是实现代码：

$(document).ready(function()

	{              

		$('#scores img[title]').qtip({                   

			content:{

				text: false

			},   

				style: 'cream'

		}); 

	});

但是样式的设置没有找到其他的。。
style: 'cream'

qingYun1029 2011-01-04

打赏
举报

[Quote=引用 1 楼 shenzhennba 的回复:]

参考一下，是不是这个效果
HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char……
[/Quote]

刚刚试了一下，差不多了。
发现了两个缺点。
1：当鼠标移向超链接时，提示是出来了，但是当你“向上面”移开鼠标时——移开是鼠标不经过提示DIV，此时提示DIV不能消失。
2：当鼠标从提示DIV向下移开时，和上面相反，提示的文字有一种”闪烁“的效果，就是有点晃眼睛。。

你也可以看看。。

shenzhenNBA 2011-01-04

打赏
举报

参考一下，是不是这个效果



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<style type="text/css">

*{font-family:verdana; font-size:12px;}

.div01{border:1px solid red; padding:5px; background-color:#EEEEEE; font-family:verdana,arial; font-size:12px; display:none;}

</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" language="javascript"></script>



<script type="text/javascript">

$(document).ready(function(){

$('#alink01').mouseover(function(){

var o=$("#msgTip");

var posx = $(this).offset().left+10;

var posy = $(this).offset().top+$(this).height();

var txt = $(this).attr("title");

o.html(txt);  //设置显示的信息文本

o.css("left",posx);  

o.css("top",posy);  

o.css("position","absolute");

o.width(300);

o.show('fast');

});



$('#msgTip').mouseout(function(){$(this).hide('normal');});

});

</script>

<body>

<p>

把鼠标移到这个连接上面看看效果: <a id="alink01" title="这里是 http:www.163.com" href="http://www.163.com">link 163.com</a>

</p>

<div id="msgTip" class="div01">msg tip here</div>

</body>

</html>