2015年五月月 发布的文章

JQ实现鼠标放上显示离开隐藏

很简单的一段实现鼠标放上显示离开隐藏的小效果,代码虽简单 用途多多哦~~~

1
2
3
$(".box1").hide();//使鼠标放上显示的内容隐藏
$(".box").mouseover(function(){$(.box1).show();});//鼠标放上显示
$(".box").mouseout(function(){$(".box1").hide();});//鼠标离开隐藏

网站灰色调 CSS

这个就不多解释了,让网站所有元素变成灰色调,全浏览器支持,使用了滤镜,比较吃性能,建议作临时方案使用。
代码如下:

1
2
3
4
5
6
7
8
9
body{
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray;
}

在 Retina 屏幕下显示变模糊的问题,可以加上:

body{
    ...
    -webkit-transform: translateZ(0);
    ...
}

用CSS画三角形

作为一个不太会写CSS的

1
伪前端

来说,用纯CSS画各种形状是一件很牛X的事情,今天就先画一个三角形吧。

最终效果图:

css:

div{
width: 0;
height: 0;
border-width: 30px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.6) rgba(0,0,0,0.6) transparent;
}

说明

html部分很简单,就一个div;
css部分定义宽度和高度都为0,border宽度是30px并且border-style是实心的div,
其中最重要的是最后一句,也是最关键的一句,

1
border-color

属性的四个参数分别定义了边框的

1
上-右-下-左

(顺时针)的样式,
上、左是透明的,下、右使用rgba定义了黑色且透明度为0.6的颜色。

同理, 可以修改

1
border-clor

属性画出各种形状:

transparent

Position定位

position定位

position共有三种形式的定位:绝对定位、相对定位和静态定位。

position属性值:

static: 静态定位(default)
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位

注意:absolute和fixed都是绝对定位形式。
绝对定位:完全脱离标准流,兄弟元素不再受其影响。

absolute和fixed的相同点

  1. 完全脱离标准流
  2. 未设置偏移量时,都定位在父元素的左上角(第四象限)
  3. 与父包含块设置
    1
    postition:relative

    与否没有关系,初始位置总是在父元素的左上角。

偏移量:元素设置定位(绝对或相对)后就具有偏移属性和堆叠属性(z-index)

absolute和fixed的不同点

一、当设置偏移量时,偏移参照基准

absolute

  1. 无已定位的祖先元素,以为基准偏移
  2. 有已定位的祖先元素,以距其最近的、已定位的祖先元素为基准偏移

fixed

  1. 无论有、无已定位的祖先元素,都以浏览器可视窗口为基准偏移。

二、表现形式(产生滚动条时)

absolute

  1. 位置会随滚动条变化

fixed

  1. 位置固定,不会随滚动条变换
  2. 被它遮盖的元素,可以从其下方穿过

偏移量的设置

在对元素设置固定定位(

1
fixed

)时,如果希望本元素包含在其父包含块中,则不需要对齐设置偏移量。

fixed定位

定位形式——绝对定位
特点:位置固定不变,兄弟元素会从其下方穿过

未设置偏移量:
有已定位的祖先元素时,以祖先元素为基准
无已定位的祖先元素时,以浏览器窗口为基准

设置偏移量时:
无论有无以定位的祖先元素,都已浏览器窗口为基准偏移。

毕业季总是伤感的

 

毕业季总是伤感的,特别是自己的毕业季,但这个季节的天空却是晴空万里,一碧如洗,一点都不搭调,不能呈现沥沥淅淅的哀愁,所以我只能莫名地惆怅。

IMG_2222