每日一发21

2012-11-12-CSS剪贴图像的几种方法

在不改变原来图片大小的情况下，剪切有几个方法（每种方法都要把img包在一个元素内来定位）：

1.用margin给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏/
}
img#usemargin{
margin:-40px -40px -40px -40px;
}
</style>

demo1

2.用absolute给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;
overflow: hidden;/设置溢出隐藏,必需/
position: relative;/必需！/
}
img#useabsolute{
position:absolute;/必需！/
top:-40px;
right:-50px;
}
</style>

demo2

3.用clip给img切图

<style>
p{
width:400px;
height:300px;
margin-right:20px;
border: 5px lightblue solid;
float: left;

position: relative;/必需！/
}
img#useclip{
position:absolute;/必需！/
clip: rect(20px 225px 200px 55px);

}
img#withoutclip{
opacity:0.4;
}
</style>

demo3

4.用clip给背景切图

<style>

div{
float:left;
margin-right: 20px;
}
div#noclip{
background:url(2.jpg) no-repeat;
width:400px;
height:300px;
opacity:0.5;

}
div#clip{
background:url(2.jpg);
width:400px;
height:300px;
text-align: center;
line-height: 130px;
border:1px solid white;
opacity:1;
/使用clip的条件是position:absolute，父元素则为position:relative/
position: absolute;
clip:rect(50px 250px 150px 50px);
/注意，在IE8以及其以下的版本，在使用clip属性时需要注意语法：clip (top,right,bottom,left);/
}

</style>

demo4

 

 

5.显然，最好用的就是clip方法了

每日一发21

2012-11-11-CSS3几个新属性的测试

CSS3中过渡、圆角、阴影等的测试，只在chrome下测试，没写其他浏览器下的Hack代码。

核心代码：



.ease{
-webkit-transition:all 4s ease;
}

.ease-in{
-webkit-transition:all 4s ease-in;
}

.ease-out{
-webkit-transition:all 4s ease-out;
}

.ease-in-out{
-webkit-transition:all 4s ease-in-out;
}

.linear{
-webkit-transition:all 4s linear;
}

#trs:hover .trs{
margin-left: 400px;/向右偏移/
-webkit-transform:rotate(25deg);/旋转/
color:red;/更换字体颜色/
font-size: 1.5em;/更换字体大小/
background:-webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));/背景平滑过渡/
border-radius: 25px;/增加圆角/
}

 

demo

每日一发21

2012-11-03-网页中间弹出文本框

 

核心代码是：

$(“#button”).click(function(){
var curwidth = document.body.scrollWidth;//获得当前屏幕可见部分的宽和高
var curheight = document.body.scrollHeight;//思考用了哪种高宽！
var tipswidth = $(“.tips”).width(); //获得通知栏的宽和高
var tipsheight = $(“.tips”).height();
var left = (curwidth - tipswidth) / 2 ; //计算通知栏应在的位置
var top = (curheight - tipsheight) / 2 ;
$(“.tips”).css(“left”,left);
$(“.tips”).css(“top”,top);

$(“.tips”).fadeTo(4000,1).delay(5000).fadeTo(3000,0);
});
});

 

各种宽度高度，不一一allert加上草稿纸上多加画画，还真搞不懂分不清：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

CSS3很强大，能做出很炫的效果。

点击按钮就可以弹出像信封的提示框，见Demo.

 

 

 

每日一发21

2012-10-30-CSS3写动态进度条

1.进度条效果

在一个div内包含空的span元素，通过CSS3来控制这个属性的背景以及宽度，就写出了进度条的效果，页面加载时进度条滚动使用的新属性animation并自定义了关键帧，demo

 

2.chrome云语音输入

只能在webkit内核的浏览器中使用，貌似是使用了谷歌的云语音功能，但是语音识别效果并不理想额，demo