基于项目的需要,需要制作出如下的一种页面效果:当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能。 网上找了很多代码,基本都实现了鼠标悬浮之后弹出div,离开之后马上就消失了。还有些纯CSS的代码实现了这样的效果,但是对我没用,我需要的是JS的(因为我的数据还要通过Ajax取得),并且鼠标离开后不能马上隐藏,这个div上还有功能入口。这个页面效果折腾了我一天,由此可见我的JS和CSS技术有待提高... 搜索了好久,终于发现了可行的2个思路如下,这2个方法有个例子,不是我写的,我也没用到,转过来分享一下。下载地址。我的方法参考了方法B的思路。 ————————————————————————————————————————————————————————————————————————————— 方法A:
————————————————————————————————————————————————————————————————————————————— 我这个方法就是采用了上面方法B的思想,当用户离开触发事件的图像后,资料卡div要延时3秒才后关闭,用户拥有足够的时间进行相应的操作,当用户点击其他好友图像时,则会立刻调用hidden方法,将之前的打开正在计时的div关闭。 下面给出我的方法的JS代码:
在HTML中,需要调用showInfoCard和hideInfoCard方法,使用以下语句监听鼠标事件:
这些都是动态的代码片段,采用的时候需要引入jquery.js框架,当然也可以修改成纯JS的。上面的完成了,AJAX取得信息,然后利用JS在上面div中插入HTML代码即可完成显示,最后来张初步的效果图,挺丑的... (原文地址:http://blog.csdn.net/zhshulin/article/details/36204089) |
|
来自: 人人驿站 > 《javaScript》