cAng^Er

不懂我的人 , 离不了我 , 该了解了解我 !而懂我的人 , 更离不了我 , 因为他们爱我 。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  30 随笔 :: 16 文章 :: 18 评论 :: 0 Trackbacks

n.styleSheet.cssText = r;这个写法是亮点,动态载入过css,但从来都没这么载入过,在公司的项目中试了下,不一样的感觉.很搞怪.

原帖:http://www.webchina110.cn/?p=328
今天网上闲逛,看到克军写了一句话,恶搞一下。凭着这句话的吸引力,我点进去了。

哇,居然页面倒过来了,页头和页脚翻了一个根头,其实我以前还在想,背景图片是不是可以这样呢,今天至少在页面上看到了。

真好奇,立即启动火狐看了一下,哈哈,找到原因了,马上在试了一下IE,搞定,也OK,哈哈,如果不知道的同学们,我想你们也想知道这是怎么回事吧。

其实就是这个东东在做怪。。。

-moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

三行代码,分别用来支持moz,webkit和IE的内核的浏览器。

我们看看克军是怎么做的呢,他使用了JS,让代码立即执行的方式。。给页面增加一个<sytle>和相应的样式,并且为body增加相应的class.下面我将他的js代码贴出来。嘿嘿!

;(function(){
var d = document, n = d.createElement('style'), r='.flip { -moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }';
n.type = 'text/css';
if(n.styleSheet)
{
 n.styleSheet.cssText = r;
}
else
{
 n.appendChild(d.createTextNode(r))
}
d.getElementsByTagName('head')[0].appendChild(n);
d.body.className += ' flip';
}

为了使用document方便,他把document传给了变量d,建立了一个style标签为变量n,把样式的内容传给
了变量r,克军的命名都很简洁。
在为这个n其实就是style标签了type这个属性。
下面是进行判断页面中style有不有属性,如果没有,直接将r,也就是样式的内容放入n中。
如果有,就得使用建立文本并且追加的方式。
我不知道我的解释对不对哈,反正大概意思就是这样的,欢迎指正。
一切准备就绪以后,就将n添加到head中去,在将class增加到body上,这样页面一加载。。。。你的页面就会被旋转180度,当然你可以旋转90度,10度,数字是可以调整的哟。

2010.09.30  今天在使用过程中,最后发现,原来ie只支持4个值,分别旋转值可以是1,2,3或4。这些数字分别代表90,180,270,或360度旋转。

posted on 2011-06-10 18:08 cAng^Er 阅读(668) 评论(0)  编辑  收藏 所属分类: |:Web View:|

只有注册用户登录后才能发表评论。


网站导航: