纯CSS实现图片切换效果

  1. 鼠标点击实现图片切换效果

     

     9 <style type="text/css">
10     * { margin:0; padding:0;}
11     body { background-color:#fff; color:#333; font:12px/1.5 Tahoma, Verdana, Sans-serif; word-wrap:break-word;}
12     li { list-style:none;}
13     img { border:0;}
14     a:link,a:visited,a:hover,a:active { color:#d94b01; text-decoration:none;}
15     h1 { line-height:100px; text-align:center;}
16     /* 鼠标滑过  */
17     .main { position:relative; width:306px; height:161px; margin:0 auto; overflow:hidden;}
18     .main p { border:3px solid #f47500;}
19     .main a { position:absolute; display:block; width:306px; height:136px;}
20     .main a:hover,.main a:active { *zoom:1; z-index:2!important;}
21     .main a:hover span,.main a:active span { background-color:#4e8ac5; color:#fff; font-weight:700;}
22     .main a span { position:absolute; top:136px; height:20px; padding:0 7px; border-width:0 2px 2px 2px; border-style:solid; border-color:#f47500; background-color:#fef3da; cursor:pointer;}
23     .main .a span {left:165px;}
24     .main .b span {left:201px;}
25     .main .c span {left:236px;}
26     .main .d span {left:271px;}
27 
28 </style>

31 <h1>纯CSS实现鼠标经过图片轮换效果</h1>
32     <div class="main">
33         <a href="#a1" class="a"><p><img src="http://www.hellocookies.com/imgs/201004/img1.jpg" width="300" height="130" /></p><span>1</span></a>
34         <a href="#b1" class="b"><p><img src="http://www.hellocookies.com/imgs/201004/img2.jpg" width="300" height="130" /></p><span>2</span></a>
35         <a href="#c1" class="c"><p><img src="http://www.hellocookies.com/imgs/201004/img3.jpg" width="300" height="130" /></p><span>3</span></a>
36         <a href="#d1" class="d"><p><img src="http://www.hellocookies.com/imgs/201004/img4.jpg" width="300" height="130" /></p><span>4</span></a>
37     </div>

     

    简单说下思路：通过点击链接跳到不同的锚记，每个li标签定义了对应的锚记。

  2. 鼠标经过实现图片切换效果

     

     9 <style type="text/css">
10     * { margin:0; padding:0;}
11     body { background-color:#fff; color:#333; font:12px/1.5 Tahoma, Verdana, Sans-serif; word-wrap:break-word;}
12     li { list-style:none;}
13     img { border:0;}
14     a:link,a:visited,a:hover,a:active { color:#d94b01; text-decoration:none;}
15     h1 { line-height:100px; text-align:center;}
16     /* 鼠标点击  */
17     .content { width:306px; height:161px; margin:0 auto;}
18     .content ul { width:100%; height:161px; overflow:hidden;}
19     .content li { width:306px; height:161px;}
20     .content li img { display:block; border:3px solid #f47500;}
21     .content p { height:25px; text-align:right;}
22     .content p a,.content p span { display:inline-block; height:20px; margin-right:10px; padding:0 7px; border-width:0 2px 2px 2px; border-style:solid; border-color:#f47500; background-color:#fef3da;}
23     .content p span { background-color:#4e8ac5; color:#fff; font-weight:700;}
24 </style>

27 <h1>纯CSS实现鼠标点击图片轮换效果</h1>
28     <div class="content">
29         <ul>
30             <li name="a" id="a"><img src="http://www.hellocookies.com/imgs/201004/img1.jpg" width="300" height="130" /><p><span>1</span><a href="#b">2</a><a href="#c">3</a><a href="#d">4</a></p></li>
31             <li name="b" id="b"><img src="http://www.hellocookies.com/imgs/201004/img2.jpg" width="300" height="130" /><p><a href="#a">1</a><span>2</span><a href="#c">3</a><a href="#d">4</a></p></li>
32             <li name="c" id="c"><img src="http://www.hellocookies.com/imgs/201004/img3.jpg" width="300" height="130" /><p><a href="#a">1</a><a href="#b">2</a><span>3</span><a href="#d">4</a></p></li>
33             <li name="d" id="d"><img src="http://www.hellocookies.com/imgs/201004/img4.jpg" width="300" height="130" /><p><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a><span>4</span></p></li>
34         </ul>
35     </div>

     

    思路：每个a标签都通过绝对定位，通过鼠标切换每个链接的z-index属性，实现覆盖其它a标签。

posted @ 2010-04-18 13:54  nicholaslai  阅读(933)  评论(0)    收藏  举报