今天是9月30号，明天就迎来国庆七天小长假了，哈哈哈~~~~提前祝大家国庆节快乐！

前几天写过一篇文章，jquery toggle()设置从上往下滑动，jquery toggle()方向，在文章的后面，介绍了一些jquery动画效果的使用方法，让大家温故而知新。今天主要讲一下jquery.offset()使用方法。

jquery.offset()应用背景

很多时候需要对某个div进行定位，或者获取某个元素相对于document的位置，那么我们会用到jquery.offset()。

获得元素相对于document的位置

获得位置是元素相对于document的位置信息，通常可以说是这个元素的坐标值。

// 元素相对于document的左位移
$("#haorooms-id").offset().left
// 元素相对于document的上位移
$("#haorooms-id").offset().top

设置元素相对于document的位置

$(".haorooms").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

这个案例是我们在点击haorooms标签的时候，在id=span1和id=span2上面显示p标签的left值和top值。

也可以用数组方式设置haorooms-id的位置，如下

// 设置元素相对于document的位移，该元素的position必须为非static值
$("#haorooms-id").offset({left:123,top:99});

注意：

需要注意的是，offset的设置值，必须成对出现，否则会报错的哦！

offset不仅可以设置单个元素，也可以设置多个元素不同的坐标值，而不需要jQuery.each操作了，如：

$(".haorooms-class").offset(function(index,haorooms)
{
    // index为元素索引
    // haorooms为元素的坐标：top、left
    // 函数必须返回坐标值
    return {top:haorooms.top+index,left:haorooms.left+index};
});

我在之前有一篇文章，写的是“javascript时间戳函数”，大家可以看一下，记录了js时间戳的转换，今天主要写的函数式日期格式化函数，我们有时候调用的new Date()不是格式化的时间，可能显示不是很正常，今天这里分享一个js写的foramt（）函数，希望能对大家有所帮助！

javascript Date format(js日期格式化)

方法一

Date.prototype.pattern=function(fmt) {         
    var o = {         
    "M+" : this.getMonth()+1, //月份         
    "d+" : this.getDate(), //日         
    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时         
    "H+" : this.getHours(), //小时         
    "m+" : this.getMinutes(), //分         
    "s+" : this.getSeconds(), //秒         
    "q+" : Math.floor((this.getMonth()+3)/3), //季度         
    "S" : this.getMilliseconds() //毫秒         
    };         
    var week = {         
    "0" : "/u65e5",         
    "1" : "/u4e00",         
    "2" : "/u4e8c",         
    "3" : "/u4e09",         
    "4" : "/u56db",         
    "5" : "/u4e94",         
    "6" : "/u516d"        
    };         
    if(/(y+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));         
    }         
    if(/(E+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);         
    }         
    for(var k in o){         
        if(new RegExp("("+ k +")").test(fmt)){         
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         
        }         
    }         
    return fmt;         
}       

前面，我的有一篇防止用户XSS注入的文章，是一个php函数，地址是：http://www.haorooms.com/post/php_xss ,对于各种攻击，首先你的代码要有严密的逻辑性，不要有漏洞。还有，你用的一些框架或者源码，本身有什么漏洞等，可以对这些漏洞做一些修复等等。

今天首先是讲讲防止网页跨框架的方法，其次讲讲IE浏览器和谷歌浏览器。

防止网页垮框架

很简单，在你的网页中添加如下代码就可以了

<style> html{ visibility:hidden; }</style>
<script>
if( self == top){
        document.documentElement.style.visibility='visible';
}else{
        top.location = self.location;
}
</script>

上面的这个办法可以帮助我们解决网站扫描出来的垮框架漏洞。

谈谈IE和谷歌

在做web前端之前，我对浏览器没有什么概念，不知道什么内核了等等。在做web前端开发之后，我一步一步开始学习，渐渐的喜欢上了谷歌浏览器，因为谷歌浏览器强大的调试功能，可以让我的开发更加便捷，而且谷歌对css样式更加友好，即使你书写有些小的不规范，谷歌浏览器也能容忍你。在后来，随着css3和html5的发展和流行，IE渐渐失去了主导的地位，自IE9和IE10以后，渐渐的支持CSS3和html5但是对css3的一些特殊的属性，整个IE就不支持（例如css3弹性盒子等），所以，我一度对IE比较憎恨。

但是，你想想，为什么一些老的程序员还在用IE调试，为什么一些财务的系统统统用IE，一些国家的（像劳动保障部网站，证书查询的时候，必须用IE，谷歌会报错），铁道部网站近年来才支持谷歌浏览器，刚刚出来的时候，买票都不能用谷歌浏览器！

所以，看来，IE对安全性方面还是有一定的优势的，反观一些IE的老的不能再老的属性，只有IE浏览器才能支持，我之前写个一篇js导出excel的文章，也只有在IE浏览器下面才可以，文章地址：http://www.haorooms.com/post/js_excel ，说到这里，你应该对IE浏览器没有那么憎恨了吧。

其实，每个内核的浏览器，都有其存的的价值和优势。谷歌浏览器对一些老的属性和功能都是不支持的，下面我列举一些IE浏览器下面可以执行，但是谷歌浏览器不可以的例子，关于这样的例子有很多很多，不也不一一列举，仅仅列举几个。

一、先从CSS和html开始说起吧

style="ime-mode:disabled "

语法： ime-mode : auto | active | inactive | disabled

ime-mode这个css属性是设置或检索是否允许用户激活输入中文，韩文，日文等的输入法(ime)状态。假如你设置了disabled，那么你就不能切换中文输入法，只能用键盘上面的字母和数字。

二、页面过度效果。

在IE5.5及以上版本的浏览器中，增加了页面过渡效果，经过检查和实验，IE中是可以的，谷歌浏览器是不支持的。

方法：

只需在中添加一个特殊的即可，比如：

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" /> 

http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有:

Page-Enter : 进入页面

Page-Exit  : 离开页面

Site-Enter : 进入网站

Site-Exit  : 离开网站

content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示

Duration  : 过渡速度
Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式 

具体数值介绍:

案例背景

记得前几天，我总结过一篇文章，jquery的height()和javascript的height总结，是获得各种高度，主要针对做pc网页或者手机网页，有时候需要用js添加动态高度，而总结的。

今天的这个案例和之前的稍微有点不同，案例背景是“在做pc网页的时候，有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式！”另外一种就是在手机页面上，在新闻页插入的图片往往都是按照图片的原尺寸来展示，如果手机屏幕太小，太大的图就会超出去！

针对这种情况，一般有两种解决方案：

一种是给所有图片加上如下样式

.haorooms img{margin:5px auto; display:block;width:90%; height:auto;}

但是这种方式有另外一个问题就是，如果插入的图片本身就很小的话，也会被直接拉伸成100%显示，显然这是不合理的！那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸！

jquery方式:

var _winwh = parseInt($(window).width());//获取浏览器的宽度
$(".haorooms img").each(function(i){
        var img = $(this);
        var realWidth;//真实的宽度
        var realHeight;//真实的高度
   //这里做下说明，$("<img/>")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
   $("<img/>").attr("src", $(img).attr("src")).load(function() {
                /*
                  如果要获取图片的真实的宽度和高度有三点必须注意
                  1、需要创建一个image对象：如这里的$("<img/>")
                  2、指定图片的src路径
                  3、一定要在图片加载完成后执行如.load()函数里执行
                 */
                realWidth = this.width;
                realHeight = this.height;
               //如果真实的宽度大于浏览器的宽度就按照100%显示
                if(realWidth>=_winwh ){
                       $(img).css("width","100%").css("height","auto");
                    }
                    else{//如果小于浏览器的宽度按照原尺寸显示
                      $(img).css("width",realWidth+'px').css("height",realHeight+'px');
                    }
            });
    });