看到这样的效果,你是不是小鸡动了一下,嘿嘿,别急,听我慢慢道来。
首先,容器。分别用两个DIV来显示两个不同时期的影像。接下来设置两个容器的样式,代码:
#after{ position: absolute; top: 0px; left: 0px; background-image: url(../images/24.jpg); width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url(../images/23.jpg); width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; }
这样,图片就在web上显示出来了。
接下来实现卷帘效果。实现卷帘,最主要的是设置before的宽度,如何去设置呢,就是获取鼠标的位置,代码如下:
这样,卷帘的效果就实现了。源代码如下:
style.css
.beforeafter{ width: 940px; height: 529px; } #after{ position: absolute; top: 0px; left: 0px; background-image: url(../images/24.jpg); width: 940px; height: 529px; background-repeat: no-repeat; } #before{ position: absolute; top: 0px; left: 0px; border-right: 3px solid #f00; background-image: url(../images/23.jpg); width: 433px; height: 529px; background-repeat: no-repeat; max-width: 940px; }
test.html
日本地震灾区前后对比
Copyright © 2019- igat.cn 版权所有 赣ICP备2024042791号-1
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务