• 纯css的image slide


    用css到做出的类似于幻灯片的图片展示的东西,先看看是什么样子吧!

    当鼠标悬停在‘图片集1’上时是下面这个样子 

     

    当鼠标悬停在'图片集2'上时是下面这个样子

     

     就是一种图片集之间切换的效果。当点击某张图片时图片就会放大。

     

    当要在自己网页上放置多张图片时,这倒是个不错的选择。

    下面就讲讲用css是怎么做出来的。

    其实要做出这么个东西,只需要理解两个css里的概念就ok了。第一个就是绝对定位的概念,第二个就是伪类的概念

    让我们来仔细分析一下:因为页面会在不同的鼠标状态里显示呈现不同的样子,而且是与鼠标状态相关,在css里实现这个的就只有通过:hover :avtive :focus等伪类了;还有像这样的布局,最容易做到的就是用绝对定位; 

     下面就是html代码:

     1 <body>
     2 <id="intro">
     3     我的css图片集
     4 </p>
     5 <ul id="out">
     6 <li class="cl">
     7 <class="title" href="#">图片集1</a>
     8 <div>
     9     <a><img src="img/pic1_s.jpg" class="small"/><img src="img/pic1.jpg" class="big"/></a>
    10     <a><img src="img/pic2_s.jpg" class="small"/><img src="img/pic2.jpg" class="big"/></a>
    11     <a><img src="img/pic3_s.jpg" class="small"/><img src="img/pic3.jpg" class="big"/></a>
    12 </div>
    14 </li>
    16 <li class="cl">
    17 <class="title" href="#">图片集2</a>
    18 <div>
    19     <a><img src="img/pic4_s.jpg"  class="small"/><img src="img/pic4.jpg" class="big"/></a>
    20     <a><img src="img/pic5_s.jpg"  class="small"/><img src="img/pic5.jpg" class="big"/></a>
    21     <a><img src="img/pic6_s.jpg"  class="small" /><img src="img/pic6.jpg" class="big"/></a>
    22 </div>
    23 </li>
    25 </ul><!--out end-->                                                                                                           26 </body> 

    结构很简单的吧!如果你的图片很多,还可以照这个样子往上加。

    在来看一看css

     1 ul{
     2     list-style:none;padding:0;margin:0;
     3 }
     5 li{
     6     list-style:none;padding:0;margin:0;float:left;height:50px;
     7 }
     9 p#intro{
    10     font-size:16px;color:#C09;position:absolute;top:50px;left:10px;
    11 }
    12 
    13 /*图片不显示*/
    14 ul li.cl div{
    15     display:none;
    16 }
    18 /*修饰标题*/
    19 a.title{
    20     display:block;float:left;width:60px;font-size:12px;color:#FF0;text-align:center;
    21     background-color:#666;margin-right:5px;padding:5px 0;text-decoration:none;
    22 }
    24 /*鼠标悬停在标题上*/
    25 ul li.cl:hover div{
    26     display:block;position:absolute;top:50px;left:10px;
    27 }
    28 
    29 ul li.cl:hover div img.big{
    30     display:none;
    31 }
    32 
    33 ul li.cl:hover div{
    34     width:500px;
    35     height:500px;
    36 }
    38 ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{
    39     display:block;
    40     position:absolute;
    41     top:0;left:0;
    42     width:400px;height:400px; } 

    有三个关键的地方

    关键点1:ul li.cl div{display:none}

    看,在正常情况下我把包含图片的div全隐藏了。

    关键点2:

    ul li.cl:hover div{

    display:block;position:absolute;top:50px;left:10px;

    当鼠标悬停在标题的li上时,包含图片的div就显示出来了。

    关键点3:

    ul li.cl:hover div a:active img.big,ul li.cl:hover div a:focus img.big{

    display:block;position:absolute;top:0;left:0;400px;height:400px;

    当点击下去时,大图片就显示出来了。仔细的你或许能够发现,其实大图片这是把小图片隐藏了而已,障眼法吧!如果你的小图片太大的话,可就盖不住了哦!

    呵呵,就是这个样子啊,我的css image slide 就做成了。 

    还有一点哦,这个在ie8里显示不正常,在ie8里点击不能出现大图片,我还没找到原因呢!ie8以前,就更算了吧!它们应该还不支持除了a标签外的伪类,所以要想在ie8以前里的ie版本里显示出来,最好都包裹个a标签。

    做这么个例子,其实是么有什么大的实际意义的,我想用javascrip做或许表现的更好一点。做它,只是能够让我们发现,原来css还可以这样用啊!对css的探索本来就是一件很好玩的事吧!

    源代码:/Files/orchid/myCssImageSlide.rar 

  • 相关阅读:
    margin和pading的百分比值
    Vue中的computed和watch
    JS的自身属性和继承属性
    JS对象的可枚举属性和不可枚举属性
    Dart语言学习
    Practice_Test
    Lesson2 basic python_20200920
    Python 基础语法L1
    小男孩和狗的故事
    智者的故事
  • 原文地址:https://www.cnblogs.com/orchid/p/1607250.html
Copyright © 2020-2023  润新知