玩坏前端
2015-06-23 01:22
309 查看
玩坏前端
标签(空格分隔): 前端发现自己好久没更博了,最近一直在努力学习数学,哈哈。十月的最后一天,分享一些有趣的东西。
浏览器To编辑器
在html5中多了一个特性,叫做contenteditable,这个特性可以让html里的一个元素变成可编辑状态。因此,我们可以通过这个属性来构造一个简单的文本编辑器。
在浏览器里新建一个标签页输入网址
data:text/html, <html contenteditable>你会发现你的浏览界面变成了一个简单的文本编辑器。
往往有了简单的东西之后,就会有大神把它改造成神器,比如,用Chrome或者Safari打开下面的超长链接,
data:text/html, <style type="text/css"># e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/python");</script>
你会得到一个高亮python代码的编辑器,效果如下:
如果想改造成支持其他语言语法高亮的,可把 上面链接里的ace/mode/python 替换为:
C/C++ -> ace/mode/c_cpp Javscript -> ace/mode/javascript Java -> ace/mode/java Scala -> ace/mode/scala Markdown -> ace/mode/markdown and more...
修改网页为你想要的任何内容
有了上面的基础,我们可以做一点更有意思的东西,打开chrome的console控制台。输入document.body.contentEditable='true';
当console返回true后,说明你可以对当前的页面做任意的修改了。恶搞如下:
这比起以前需要在chrome的控制台里先点击小的搜索按钮锁定内容后再去修改简单很多了。
将网页进行反转
愚人节的时候有看到过将网页进行整体翻转的网站,实现起来也很简单,只需要在css文件里增加如下代码:html{ filter:fliph; }/*ie fliph(水平翻转滤镜),还有flipv垂直翻转滤镜*/ body{ -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -moz-transform: skew(0deg, 180deg) scale(-1, 1); -o-transform: skew(0deg, 180deg) scale(-1, 1); }
效果如下:
如果想让网页只旋转10度,则可以这样写:
body { transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); }
另外,还发现了一个叫做
foo.js的东西,通过这个js文件我们可以构造很多愚人的页面特效。感兴趣可以关注这个github地址:https://github.com/idiot/Fool.js
相关文章推荐
- 谈谈Ext JS的组件――组件基类:Ext.Component
- 谈谈Ext JS的组件——组件基类:Ext.Component
- 谈谈Ext JS的组件——组件基类:Ext.Component
- 谈谈Ext JS的组件——组件基类:Ext.Component
- React实践(一)
- leetcode--Populating Next Right Pointers in Each Node II
- js中操作符 || 和 &&
- 用 350 行代码从零开始,将 Lisp 编译成 JavaScript
- javascript中传统事件与现代事件
- 简介可以自动完成UI的AngularJS工具angular-smarty
- 使用JavaScript的AngularJS库编写hello world的方法
- js的flv视频播放器插件使用方法
- javascript框架设计之框架分类及主要功能
- angular指令
- javascript框架设计之种子模块
- 简述AngularJS相关的一些编程思想
- javascript框架设计之浏览器的嗅探和特征侦测
- jQuery判断多个input file 都不能为空的例子
- javascript框架设计之类工厂
- 使用JavaScript实现旋转的彩圈特效