javascript - 如何优雅的实现js效果?
ringa_lee
ringa_lee 2017-04-10 14:30:11
[JavaScript讨论组]

问题的背景是这样的,我想要在项目中实现一个js效果,刚好sf问答首页有这个。

mouseover到微信公众平台,就弹出微信公众平台标签的介绍这样子,现在很多网站都有这个,比如说新浪微博的ID也是这样。
我想要知道这个效果叫什么?有什么相关的插件?

然后下面这个顺便问问,因为自己心中有这个疑问:
常见的js效果网上都很容易找到,或很多js框架本身有这个功能,那如果是遇到自己没见过的,应该怎么做?


我要怎么逻辑判断鼠标悬停到弹出框的时候也显示呢?
http://jsfiddle.net/sLb8S/

ringa_lee
ringa_lee

ringa_lee

全部回复(6)
大家讲道理

强烈推荐 jQuery Tooltipster,很好用呢!

现在SF上的实现好像是每次hover都去fetch一下data,然后生成一个pop出来的p然后设置位置到相应的element旁边。

黄舟

用bootstrap吗
看看这个:http://getbootstrap.com/javascript/#popovers

黄舟

cc: http://segmentfault.com/q/1010000000489160

迷茫

自己平时练习做的一个jq插件, 可能会有不完善的地方, 仅供参考
https://github.com/caprikk/usercard

伊谢尔伦

简单的很
你为每个需要做提示效果的元素添加一个唯一的属性,比如:data-app-id='111111';
1、监听这种元素,并绑定相应事件(mouseover)
2、hover的时候根据鼠标位置计算出坐标,并创建一段dom结构来存放需要显示的内容;id中的值可以取到,并且传到后台服务器来获取这个ID需要的信息,插入到对应的dom中;
3、然后append到body(或需要插入的地方);

PS:不需要的时候(mouseout)可以remove掉

黄舟

房事问天涯,往事问知乎,没事问segmentfault

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号