照片各部分的彩色與黑白交替更換
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
我們先看看代碼
<style>
ul { width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url(/study/2006_12_25/2006122516414543849.jpg)}
li {list-style-type:none; width:100px; height:100px; float:left}
li a { display:block; width:100px; height:100px; text-decoration:none;
background:transparent url(/study/2006_12_25/2006122516411012132.jpg) no-repeat 500px 500px; }
a#item1:hover {background-position: 0 0; }
a#item2:hover {background-position: -100px 0;}
a#item3:hover {background-position: -200px 0;}
a#item4:hover {background-position: 0 -100px;}
a#item5:hover {background-position: -100px -100px;}
a#item6:hover {background-position: -200px -100px;}
a#item7:hover {background-position: 0 -200px;}
a#item8:hover {background-position: -100px -200px;}
a#item9:hover {background-position: -200px -200px;}
</style>
<ul>
<li><a id="item1" href="#" title="Item 1"> </a></li>
<li><a id="item2" href="#" title="Item 2"> </a></li>
<li><a id="item3" href="#" title="Item 3"> </a></li>
<li><a id="item4" href="#" title="Item 4"> </a></li>
<li><a id="item5" href="#" title="Item 5"> </a></li>
<li><a id="item6" href="#" title="Item 6"> </a></li>
<li><a id="item7" href="#" title="Item 7"> </a></li>
<li><a id="item8" href="#" title="Item 8"> </a></li>
<li><a id="item9" href="#" title="Item 9"> </a></li>
</ul>
是不是非常簡(jiǎn)單，而我們所用到的圖片也僅僅是下面的2張而已
現(xiàn)在我們來分析 background-position 的用法：A元素一開始的時(shí)候背景位置設(shè)置成 background-position:500px 500px，而它的大小僅只有100px*100px而已，所以A標(biāo)簽下的所有背景都超過了可視范圍無法顯示，我們一開始看見的黑白照片就是UL的背景圖象。接著當(dāng)鼠標(biāo)移動(dòng)到A元素上的時(shí)候，再根據(jù)每個(gè)A元素所處的位置來分別為他們?cè)O(shè)置背景的移動(dòng)大小，這樣就形成上面的黑白圖片交替效果。
相關(guān)文章
大家在使用過程中，可以參考本站的其它一些特效。2008-12-12
這篇文章主要介紹了使用html+css制作一個(gè)發(fā)光立方體特效,發(fā)光的同時(shí)立方體自動(dòng)旋轉(zhuǎn),非常炫酷的特效,來一起學(xué)習(xí)一下怎么制作吧2023-03-03
js 加載時(shí)自動(dòng)調(diào)整圖片大小
又一個(gè)javascript自動(dòng)調(diào)整圖片大小的腳本2008-05-05
就是在客戶端判斷上傳圖片的大小，尺寸，并生成預(yù)覽圖，用JavaScript實(shí)現(xiàn)的啊2008-10-10
完全用CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片并更換圖片
CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片，更換圖片，這是一個(gè)完全用CSS實(shí)現(xiàn)的效果,由此我們可以制作一些效果復(fù)雜的按鈕，比如換色按鈕2012-12-12
一個(gè)簡(jiǎn)單的javascript圖片放大效果代碼
javascript圖片放大效果多用于小圖片產(chǎn)品的展示。2010-08-08
圖片從右至左滾動(dòng)JS...2007-01-01
nVida網(wǎng)站的圖片滑動(dòng)特效，這里為了快速演示效果，去掉了原有的圖片用數(shù)字來代替，你完全可以插入你想要的圖片，本特效使用JS實(shí)現(xiàn)，用CSS配合固定圖片，以滑動(dòng)的方式切換相應(yīng)的多張圖片。2010-03-03
javascript實(shí)現(xiàn)圖片切換的幻燈片效果源代碼
網(wǎng)頁(yè)上有許多圖片切換的幻燈片效果,它們大多用flash實(shí)現(xiàn),那javascript能不能實(shí)現(xiàn)他們呢,當(dāng)然可以,我自己寫了一個(gè),需要的朋友可以參考下2012-12-12
有時(shí)候做一些圖片類型的信息，需要這個(gè)功能，好多朋友也問我要過類似的代碼2008-09-09