DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> css 雪碧圖 及jquery定位代碼
css 雪碧圖 及jquery定位代碼
編輯:WEB前端代碼     

無意間發現了一個很神奇的事情,就是

 

鼠標懸停在圖片上方會切換,起初以為圖標是單獨插入的。但發現居然是一張完整的圖片。

一萬只草泥馬在心中奔騰。這是怎麼實現的?

後來詢問得知,這是css精靈技術(sprite) 也叫雪碧圖。

 

CSS知識點:
    • background-image
    • backgorund-position
  • 特點:
    1. 相對於當個小圖標,它節省文件體積和服務請求次數。將所有零碎的網頁背景圖片整合到一起,這樣做可以有效的減少http對圖片的請求次數,而不需要加載多次加載零碎的背景圖片,所以合理的利用好它可以有效的提高網頁的加載速度。
    2. 一般情況下,你需要保存為PNG-24的文件格式。
    3. 可以設計出豐富多彩的顏色體表。
  • 難點:
    1. 你需預先確定每個小圖標的大小
    2. 注意小圖標與小圖標之間的距離
    3. 細心、耐心

 

於是,我百度之後。我決定玩一玩

HTML結構
<ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>

css

<style>
        ul{
            position: absolute;
            top: 50px;
            height:31px;
            
        }
        li{
            list-style: none;
            float:left;
            width:30px;
            height: 31px;
            margin-right: 30px;
        }
        a{
            width:30px;
            height: 31px;
            display: block;
            background: url(images/social-media.png) no-repeat;
            background-position: 8px 0px;
            
        }
    </style>

 

用css來定位坐標的話,十分浪費時間,於是可以用jquery統一設置坐標(ss雪碧圖的定位參數按實際需求)

<script>
    $(function() {
        var index;
        var icorW;
        $("ul>li").each(function(index) {
            index = $(this).index();//獲取對象的索引值
            icorW = $(this).width()+2;//獲取對象寬度
            var _this = $(this);
            $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");//先眾神歸位
            
            $(_this).hover(function () {
                $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 103%");

                $("span").html(index);//測試索引數值

            },function(){
                $(_this).children().attr("style","background-position:"+(8-(index *icorW))+"px 0px");
            })
            
        })
    
    })
    </script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved