求一js特效，鼠标划过用户logo加载出用户信息
0
最佳答案
0
这里简单列出步骤：
1.做好 html，鼠标经过图片 显示一个div ，确保正确运行 （这里其实也就 做一下 ie6 的js 绑定 :hover 事件即可）
2.再通过 ajax 动态读取 一个内容 输出到 鼠标经过的要显示 div里面 ，确保 ajax返回的内容正确
不清楚mailto：aklivecai@gmail.com
收获园豆：20
你好，我静态页已做好，但是不知道让他 鼠标经过图片 显示出个div，我是新手，麻烦说的详细些！QQ:24339085 这我QQ,麻烦加下，邮箱太慢！
@天*^o^*.使:
呵呵，正在写例子，等等写好了，传上来给你。。
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> ! </title> <!-- 引入js库 --> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script> <style type="text/css"> <!-- .list-pics li{position:relative;cursor:pointer;} .list-pics li div{display:none;position:absolute;left:150px;width:250px;height:100px;background:#DDD;} .list-pics .wap-show{display:block;} //--> </style> </head> <body class="page-index"> <div class="wrapper"> <ul class="list-pics" id="list-pics"> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div> 1Ajax loading...</div> </li> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div> 1Ajax loading...</div> </li> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div>Ajax loading...</div> </li> </li> </ul> </div><!-- end wrapper --> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ $$('#list-pics li').addEvents({ 'mouseover':function(e){ //鼠标经过 $(this).getElement('div').addClass('wap-show'); } ,'mouseout':function(e){ //鼠标离开 $(this).getElement('div').removeClass('wap-show'); } }); }); /*]]>*/ </script> </body> </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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> AJAX 版本的</title> <!-- 引入js库 --> <script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script> <style type="text/css"> <!-- .list-pics li{position:relative;cursor:pointer;} .list-pics li div{display:none;position:absolute;left:150px;top:0;width:250px;height:100px;background:#DDD;} .list-pics .wap-show{display:block;} //--> </style> </head> <body class="page-index"> <div class="wrapper"> <ul class="list-pics" id="list-pics"> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div ajax-data="1"> 1Ajax loading...</div> </li> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div ajax-data="10"> 1Ajax loading...</div> </li> <li><img src="http://static.cnblogs.com/images/logo_small.gif" alt="" width="145" height="55" /> <div ajax-data="20">Ajax loading...</div> </li> </li> </ul> </div><!-- end wrapper --> <script type="text/javascript"> /*<![CDATA[*/ window.addEvent('domready',function(){ var getAjaxData=function(elem){ /*ajax获取数据*/ var req=new Request({ method:'get', url:'ajax.aspx', //动态获取的地址 data:'id='+elem.get('ajax-data'), //要传递的参数,公司编号 onSuccess:function (text) { elem.set('text',text); //获得内容添加到 框里面 show_wap.removeProperty('ajax-data'); //删掉要加载的参数 } }).send(); } $$('#list-pics li').each(function(elem){ var show_wap=elem.getElement('div'); elem.addEvents({ 'mouseover':function(e){ //鼠标经过 if(!show_wap.get('ajax-data')){ //根据 【公司编号 】 判断之前是否已经加载过 公司信息，没有立即通过ajax方式获取 getAjaxData(show_wap); } show_wap.addClass('wap-show'); } ,'mouseout':function(e){ //鼠标离开 show_wap.removeClass('wap-show'); } }); }); }); /*]]>*/ </script> </body> </html>
@天*^o^*.使:
你qq写错了，加错人了。
@阿K&LiveCai: 我汗，实在不好意思，少了个数 243390285！等明天上班试一下，谢谢你了！
@阿K&LiveCai: 你好，这个js特效请求的url:'ajax.aspx', //动态获取的地址 能否换成action 方法，如果换成请求action方法应该怎么实现？
@天*^o^*.使:
不知道你的 action 方法 指的是什么。
url 是请求的地址，
下面的是 要传递的参数。
data:'id='+elem.get('ajax-data'), //要传递的参数,公司编号
其他回答(1)
0
度娘搜索 Jquery tooltip
