纯CSS+DIV实现滑动门

作者:Davidszhou   来源:Davidszhou博客   时间:2015-04-02 21:23:43   点击:

    最近在弄一个网站模板,想添加一个滑动门效果,不想使用另外JS,麻烦还要加载,有没有纯粹使用DIV+CSS布局添加少量代码就能实现网页滑动门效果的?
    在网上找了好久,最后找到一个最少代码实现效果的例子,按照他给的思路,自己在已经写好的样式上面在修改一下:
    DIV+CSS滑动门超简单实现代码 下载:
   

DIV+CSS滑动门超简单实现代码下载
文件类型: .zip 08dbf7ad888b3354eefba44c18f0c2d3.zip (649.75 KB)

    讲解:
    1、<a href="#" onmousemove="dh.style.display='none';xc.style.display='none';zy.style.display='block'">儿童安全座椅</a>
    主要使用了onmousemove事件:dh 是下面要切换DIV的选择符,一定要与你下面定义的每个滑动门的类选择符相同,style 给它触动事件时的样式,display='none' 隐藏的意思,display='block' 将他转化为块级元素,我粗糙的理解就是显示。
    上面一句话的意思就是:当鼠标覆盖移动到“儿童安全座椅”上面的时候,dh是隐藏、xc是隐藏的、但是zy转化为块元素显示出来。
    2、除了第一个滑动门,其他滑动门上添加样式:例子附件内<ul id="dh" style="display:none;">
    意思就是:当我们鼠标都没有移动或触动着几个滑动门的时候,默认显示的是第一个滑动门内信息。
    附件内的文件,我也添加了图片,增加了一点显示效果,如果都是文字的话总觉得有点太单调。

TAGS:DIV , CSS , 滑动门

来自Davids zhou博客原创文章请尊重作者:http://www.zongk.com/zongk/19.html转载请标注此链接

网站统计
文章总数:129
今天发布:0
软件资源数:18