作者:airwin
发布时间:September 29, 2009
分类:前端
| | <ul class="tab"><li>Tab_1</li><li>Tab_2</li></ul>
| | <div id="div_1">
| | <img id="1_1" src="xx" onload="resize(this)" />
| | <img id="1_2" src="xx" onload="resize(this)" />
| | </div>
| | <div id="div_2" style="display:none">
| | <img id="2_1" src="xx" onload="resize(this)" />
| | <img id="2_2" src="xx" onload="resize(this)" />
| | </div> |
|
简要代码如上,效果是滑动门,目的是两个div里面的图片都利用js进行按比例缩放
在resize函数里面记录, 发现在div_2(也就是display属性为none) 容器里面的img, 触发onload事件时, 本身的width 和 height 属性都是0
网上google良久, 有说window.setTimeout的, 然后我使用了如下函数
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 | | 31 | | 32 | | 33 | | 34 | | 35 | | 36 | | 37 | | 38 | | 39 | | 40 | | 41 | | 42 | | 43 | | 44 | | 45 | | 46 | | 47 | | 48 | | 49 | | 50 | | 51 | | 52 | | 53 | | 54 | | 55 | | 56 | | 57 | | 58 |
| | function resize(image, iwidth, iheight)
| | {
| | console.debug(image.id + ' ' + image.width + ' ' + image.height);
| | var width = image.width;
| | var height = image.height;
| | var newwidth = 0,newheight = 0;
| | if(width > 0 && height > 0)
| | {
| | if (width / height >= iwidth / iheight)
| | {
| | if (width > iwidth)
| | {
| | newwidth = iwidth;
| | newheight = (height * iwidth) / width;
| |
| | }
| | else
| | {
| | newwidth = width;
| | newheight = height;
| |
| | }
| | if (newheight > iheight)
| | {
| | newwidth = newwidth * iheight / newheight;
| | newheight = iheight;
| | }
| | }
| | else
| | {
| | if (height > iheight)
| | {
| | newheight = iheight;
| | newwidth = (width * iheight) / height;
| |
| | }
| | else
| | {
| | newwidth = width;
| | newheight = height;
| | }
| | if (newwidth > iwidth)
| | {
| | newheight = newheight * iwidth / newwidth;
| | newwidth = iwidth;
| | }
| | }
| | }
| | else {
| | window.console.log('retry ' + image.id);
| | window.setTimeout(function(){resizeImg(image,iwidth,iheight);}, 1000);
| | }
| | if(newwidth > 0 && newheight > 0)
| | {
| | image.width = newwidth;
| | image.height = newheight;
| | }
| | } |
|
结果就是无限循环调用, image的width和height属性都是0.
调试: 只要 div_2 不是隐藏的, IE都能够正确取得width和height属性
问题是页面默认显示div_1, 隐藏div_2, 要在页面加载时就把图片的缩放做好..愁死我咯...
update: 临下班前搞定此问题..效果不错..
障眼法:
| | jQuery(function(){
| | if($.browser.msie) {
| | $('#div_2').show();
| | $('#div_2').find('img').each(function(i, img){ resizeImg(img,80,80); });
| | $('#div_2').hide();
| | }
| | }); |
|
搞定 ^_^
作者:airwin
发布时间:September 24, 2009
分类:前端
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 | | 19 | | 20 | | 21 | | 22 | | 23 | | 24 | | 25 | | 26 | | 27 | | 28 | | 29 | | 30 | | 31 | | 32 | | 33 | | 34 | | 35 | | 36 | | 37 | | 38 | | 39 | | 40 | | 41 | | 42 |
| | //图片按比例缩放,可输入参数设定初始大小
| | function resizeimg(ImgD,iwidth,iheight) {
| | var image=new Image();
| | image.src=ImgD.src;
| | if(image.width>0 && image.height>0){
| | if(image.width/image.height>= iwidth/iheight){
| | if(image.width>iwidth){
| | ImgD.width=iwidth;
| | ImgD.height=(image.height*iwidth)/image.width;
| | }else{
| | ImgD.width=image.width;
| | ImgD.height=image.height;
| | }
| | ImgD.alt=image.width+"×"+image.height;
| | }
| | else{
| | if(image.height>iheight){
| | ImgD.height=iheight;
| | ImgD.width=(image.width*iheight)/image.height;
| | }else{
| | ImgD.width=image.width;
| | ImgD.height=image.height;
| | }
| | ImgD.alt=image.width+"×"+image.height;
| | }
| | ImgD.style.cursor= "pointer"; //改变鼠标指针
| | ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
| | if (navigator.userAgent.toLowerCase().indexOf("ie") > -1){
| | //判断浏览器,如果是IE
| | ImgD.title = "请使用鼠标滚轮缩放图片,点击图片可在新窗口打开";
| | ImgD.onmousewheel = function img_zoom() //滚轮缩放
| | {
| | var zoom = parseInt(this.style.zoom, 10) || 100;
| | zoom += event.wheelDelta / 12;
| | if (zoom> 0) this.style.zoom = zoom + "%";
| | return false;
| | }
| | } else { //如果不是IE
| | ImgD.title = "点击图片可在新窗口打开";
| | }
| | }
| | } |
|
作者:airwin
发布时间:September 24, 2009
分类:前端
最近在某个alexa统计报告中看来国内IE6还是占据了90%以上的市场, OMG.. 看来离死尚早..
做一些笔记, 以备急用...
1、不支持position:fixed
| 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 | | 10 | | 11 | | 12 | | 13 | | 14 | | 15 | | 16 | | 17 | | 18 |
| | /*让position:fixed在IE6下可用! */
| |
| | .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
| | .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
| | .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
| | .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}
| | /* 上面的是除了IE6的主流浏览器通用的方法 */
| | * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
| | * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression
| | (eval(document.documentElement.scrollTop));}
| | * html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression
| | (eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)
| | -(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
| | * html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression
| | (eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-
| | (parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
| | * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression
| | (eval(document.documentElement.scrollLeft));} |
|
"无振动完美模拟fixed"
作者:airwin
发布时间:September 22, 2009
分类:LNMP
isset 和 array_key_exists 都常被用来检测数组中是否有对应的索引存在
它们的基本功能一样, 唯一的区别是:
| | array_key_exists() 在给定的 key 存在于数组中时返回 TRUE。
| | key 可以是任何能作为数组索引的值。array_key_exists() 也可用于对象。
| |
| | array_key_exists() 与 isset() 对比
| |
| | isset() 对于数组中为 NULL 的值不会返回 TRUE,而 array_key_exists() 会。 |
|
再引用老外一些描述
isset works by default with real variables. array_key_exists would need to be supplied the current scope state with a call to check if a variable exists, and that would likely entail a call to get_defined_vars. So for the existance of variables, isset is better.
按我的理解来看, 如果NULL值对你的应用没什么影响, 那么用isset可能会快一些~
作者:airwin
发布时间:September 18, 2009
分类:ShineWoo
这篇文章是用m8通过wifi发的,哈哈
作者:airwin
发布时间:September 14, 2009
分类:ShineWoo
昨天,在老婆的带领下,去四元桥装饰了一下车车,现在又好看又舒服~
在车后面贴上了属于我们自己的标志~绝对唯一哦~~
我们一起去菜百挑了一对戒指,作为我们的订婚信物,pt的,花的钱不多,但情意重,同时符合我们的低调心理,^_^
在那么多让人眼花缭乱的专柜前,老婆作了会心的选择,感谢宝贝儿:)
最后去海底捞大吃了一顿,最后撑撑了,连杂面都没吃 哎呀呀~~
作者:airwin
发布时间:September 9, 2009
分类:前端
转帖自: http://heeroluo.net/ShowPost19.aspx
Firebug是很常用的网页前端开发工具,但是从1.4版本开始,其性能有所下降。用Firefox3.5+Firebug1.4打开网易新闻频道的首页,整个浏览器就卡死了。
由于Firebug 1.3不支持Firefox 3.5,为此,我一直还在用Firefox 3.0。后来又听说只要强制Firefox 3.5不进行兼容性检查,Firebug 1.3还是可用的。这证明Firebug在Firefox 3.5下是可以正常工作的,只是由于某些版本信息使其不支持Firefox 3.5,而插件的安装包必定存有这些信息。
阅读剩余部分...
- 1