纯CSS实现图片切换效果

这几天学了点以前不知道的东西,特地放上来和大家分享一下.现在网页上面JS广告滚动条用的是越来越多了.方便漂亮是其特点,我们可以体会到JavaScript给我们带来的很多意想不到的特效.当然JS作用的还远不止这一点.兴奋之余也在思考用CSS来实现图片轮换效果,不过CSS还不能实现过渡效果,所以仅做研究吧.

看了书也搜索了资料大概思路是这样的:

1.模拟一个放映机,

2.镜头相当于一个大小固定的盒子

3.镜头后面(也就是胶片)相当于你想起换的图片

4.我们可以使用a标签锚链接的点击来实现胶片(图片)的切换

你可以先看看右面这个原理图:

 

最终效果

继续阅读 »

迟到的愚人节礼物

宝贝你好笨…

你可能没想到吧,

从一开始你就被我骗了.

我骗你关心你,

我骗你喜欢你,

骗你想要你,

我骗你说情话给你,

我用我的所有在骗你,难道你真的不知道吗?

你可能已经很失望了吧!

但你有没有想过呢.

如果要我拿这些骗人的话讲给另一个女孩子听…

那么—

我真的会讲不出来的

天啊.

如果这是一场骗局.

我可不可以也有个请求-让她也骗我一次吧.

就算是真的骗也好啊.

写在后面的:

—————————————————
“生活不是诗…

———-但是我一直在努力让她变得像诗一样

无hack完美兼容的div垂直居中解决方案

研究一个经典的CSS问题:DIV垂直居中。结合网上的各种方法自己总结出了一个无hack完美的兼容IE6,7,FF的垂直解决方案.你可以看下面的图来理解第三种方法               预览效果

vertical-align.jpg

1.当div内容为单行时,众所周知将div的height和line-height设置成一个相同的值。
2.当div高度不固定时,将父div的padding-top和padding-bottom设置成一个相同的值使其自适应。
3.当div高度固定时,有两种情况:
(1)非IE浏览器中可用如下代码使其垂直居中

.box{ display:table-cell; vertical-align:middle;}

(2)IE中不支持上面的属性,所以下面就得用blueidea上的一个方法了,代码如下

.box{ position:relative; }
.inner{ position:absolute; top:50%; left:0;}
.innerbox{ position:relative; top:-50%; left:0;}

继续阅读 »