yjxf8285@qq.com

JavaScript

理解JS的原型继承

Posted By 刘晓帆 | 1,333 views

不多说看代码吧,里面有注释~

<html>
<body>
<script type="text/javascript">
/*定义了我*/
var me=function(){
this.face="handsome";
this.height="tall";
}
/*下面是我老婆*/
var mywife=function(){
this.hobby="eat";
}
mywife.prototype= new me();//我的属性传递给了我老婆
var myson=new mywife();//生下了我的儿子
for(x in myson)alert(x+":"+myson[x]);//我儿子拥有了我们的属性
</script>
</body>
</html>

function changeTsize(){document.getElementById(“runcode_oXqRY5”).style.height = document.getElementById(“runcode_oXqRY5”).scrollHeight + “px”;}window.setTimeout(changeTsize,0); 提示:你可以先修改部分代码再运行。

Read More

HTML/CSS

3列、2列自适应布局,中部内容优先显示3列布局等方法。

Posted By 刘晓帆 | 2,644 views

最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。
1. 固定宽度,中部DIV内容优先显示布局
说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

< !DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>中间内容优先显示的3列布局</title>
<style type="text/css">
.warp{width: 960px;margin: 0px auto;}
.main{float: left;width: 100%;}
#dyleft {width: 200px;float: left;margin-left: -960px;background: #ccc;}
#dycenter {margin: 0 210px;background: #ccc;}
#dyright {float: right;width: 200px; margin-left: -200px; background: #ccc;}
</style>
</head>
Read More

JavaScript

淘宝购物车页面的底部浮动层效果

Posted By 刘晓帆 | 2,955 views

今天有个新功能开发,就是类似淘宝的购物车页面的那个浮动层,其实那种浮动效果很常见,京东什么的很多网站都用了。
因为最近一直在复习源生js所以这次就不用jq来写了,那个效果其实很简单,算好元素到窗口的顶部距离和窗口的高度来判断层是否要浮动;

Read More

HTML/CSS

主流的clearfix清楚浮动原理

Posted By 刘晓帆 | 2,578 views

我目前已知的清除浮动的方法大概有3种
首先是HTML结构:
[html]
<div id="warbox" class="clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
[/html]
然后是CSS代码:
[css]
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides

Read More