很久之前找到一个很喜欢的注释提示的效果,不过是依赖 Bootstrap,对于不用 Bootstrap 的网站很无奈。
bootstrap.footnotes.js:
http://taitems.github.io/UX-Lab/BootstrapFootnotes/index.html后来就自己查手册,上 Google 制作了一个仅依赖 jQuery 版本,而且除了元素上方弹出注释之外,添加了其他三个方向的窗口。
![](http://ww1.sinaimg.cn/large/620eff41jw1e2qd4sf1woj.jpg)
昨天做了调整,可以自动根据元素位置在原本注释弹出方式不适用的时候自动切换到其他方向弹出注释。
例如,原本是设置上方弹出注释,当页面滚动到一定时候上方不够空间显示注释窗口自动切换成在元素下放弹出。
Demo:
http://kaiyuan.github.io/footnotes.js/sup.htmlGithub:
https://github.com/Kaiyuan/bootstrap.footnotes.js注意的是,可能我变量的命名太随便,或许会和其他插件或者你们写的变量有冲突。
我现在还不了解实时获取当前窗口高宽,所以当浏览器改变窗口大小时候没有刷新页面没能正确判断合适方式显示注释。
前两天仿照
http://elenagreta.com/ 上的画框做了一个 CSS3 版本
http://cdpn.io/BIbru![](http://ww1.sinaimg.cn/large/620eff41gw1e5iiiplwryj21ke1547cm.jpg)