很久之前找到一个很喜欢的注释提示的效果,不过是依赖 Bootstrap,对于不用 Bootstrap 的网站很无奈。
bootstrap.footnotes.js:
http://taitems.github.io/UX-Lab/BootstrapFootnotes/index.html后来就自己查手册,上 Google 制作了一个仅依赖 jQuery 版本,而且除了元素上方弹出注释之外,添加了其他三个方向的窗口。
昨天做了调整,可以自动根据元素位置在原本注释弹出方式不适用的时候自动切换到其他方向弹出注释。
例如,原本是设置上方弹出注释,当页面滚动到一定时候上方不够空间显示注释窗口自动切换成在元素下放弹出。
Demo: http://kaiyuan.github.io/footnotes.js/sup.html
Github: https://github.com/Kaiyuan/bootstrap.footnotes.js
注意的是,可能我变量的命名太随便,或许会和其他插件或者你们写的变量有冲突。
我现在还不了解实时获取当前窗口高宽,所以当浏览器改变窗口大小时候没有刷新页面没能正确判断合适方式显示注释。
前两天仿照 http://elenagreta.com/ 上的画框做了一个 CSS3 版本 http://cdpn.io/BIbru
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/72157
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.