首页 新闻 搜索 专区 学院

求一js特效,鼠标划过用户logo加载出用户信息

0
悬赏园豆:20 [已解决问题] 解决于 2012-08-30 19:20

我有一用户列表,当鼠标划过用户logo时弹出一浮层,加载出用户信息。求js特效源码。如图

天*^o^*.使的主页 天*^o^*.使 | 初学一级 | 园豆:140
提问于:2012-08-25 15:14
< >
分享
最佳答案
0

这里简单列出步骤:

1.做好 html,鼠标经过图片 显示一个div ,确保正确运行 (这里其实也就 做一下 ie6 的js 绑定 :hover 事件即可)

 

2.再通过 ajax 动态读取 一个内容  输出到 鼠标经过的要显示 div里面 ,确保 ajax返回的内容正确

 

不清楚mailto:aklivecai@gmail.com

收获园豆:20
阿K&LiveCai | 小虾三级 |园豆:514 | 2012-08-25 17:37

你好,我静态页已做好,但是不知道让他 鼠标经过图片 显示出个div,我是新手,麻烦说的详细些!QQ:24339085 这我QQ,麻烦加下,邮箱太慢!

天*^o^*.使 | 园豆:140 (初学一级) | 2012-08-25 17:44

@天*^o^*.使: 

呵呵,正在写例子,等等写好了,传上来给你。。

阿K&LiveCai | 园豆:514 (小虾三级) | 2012-08-25 17:54
<!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>

 

阿K&LiveCai | 园豆:514 (小虾三级) | 2012-08-25 18:03
<!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>
阿K&LiveCai | 园豆:514 (小虾三级) | 2012-08-25 18:24

@天*^o^*.使: 

你qq写错了,加错人了。

阿K&LiveCai | 园豆:514 (小虾三级) | 2012-08-25 18:25

@阿K&LiveCai: 我汗,实在不好意思,少了个数 243390285!等明天上班试一下,谢谢你了!

天*^o^*.使 | 园豆:140 (初学一级) | 2012-08-26 18:42

@阿K&LiveCai: 你好,这个js特效请求的url:'ajax.aspx', //动态获取的地址 能否换成action 方法,如果换成请求action方法应该怎么实现?

天*^o^*.使 | 园豆:140 (初学一级) | 2012-08-27 09:36

@天*^o^*.使: 

不知道你的  action 方法 指的是什么。

url 是请求的地址,

下面的是 要传递的参数。

            data:'id='+elem.get('ajax-data'),       //要传递的参数,公司编号  
阿K&LiveCai | 园豆:514 (小虾三级) | 2012-08-27 20:39
其他回答(1)
0

度娘搜索 Jquery tooltip

八戒的师傅 | 园豆:1472 (小虾三级) | 2012-08-26 10:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册