Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Nút nhấn » Nút bấm mờ ảo
URL: https://www.javascriptbank.com/opacity-index.html
Hiệu ứng làm cho một nút bấm có khả năng mờ hoặc sáng dần khi ta rê chuột đến.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Nút nhấn » Nút bấm mờ ảo
URL: https://www.javascriptbank.com/opacity-index.html
<style type="text/css">.demo {position:relative;color:#00416e;}.code{color:black;font-family:courier;}body, td{font-size:11px;font-family:verdana;color:#00416e;background-color:white;}.txt{position:absolute;top:0px;left:0px;width:100px;height:20px;color:#00416e;font-weight:bold;font-size:15px;text-align:center;font-family:sans-serif;}.outer{position:relative;width:100px;height:20px;}.img{position:absolute;left:0px;top:0px;width:100px;height:20px;filter:alpha(opacity=0);-moz-Opacity:0;}.fakeBttns{width:100px;height:20px;cursor:default;color:#fff6e9;background-color:#00416e;padding-top:2px;border-width:2px;border-style:outset;border-color:#00416e;font-size:14px;font-style:sans-serif;font-weight:bold;-moz-Opacity:0;}.bttnImg{width:100px;height:20px;-moz-Opacity:0;filter:alpha(opacity=0);}textarea{font-size:10px;font-family:verdana;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="javascript" src="opacity.js"></script><div class="demo"><b>Example 1</b><br>Fade-in effect using images</div><br><div id="img1" class="bttnImg"><img src="b1.jpg" width="100" height="20"></div><div id="img2" class="bttnImg"><img src="b2.jpg" width="100" height="20"></div><div id="img3" class="bttnImg"><img src="b3.jpg" width="100" height="20"></div><div id="img4" class="bttnImg"><img src="b4.jpg" width="100" height="20"></div><div class="demo"><b>Example 2</b><br>Fade-out effect using images</div><br><div id="img5" class="bttnImg"><img src="b1.jpg" width="100" height="20"></div><div id="img6" class="bttnImg"><img src="b2.jpg" width="100" height="20"></div><div id="img7" class="bttnImg"><img src="b3.jpg" width="100" height="20"></div><div id="img8" class="bttnImg"><img src="b4.jpg" width="100" height="20"></div><div id="txt1" class="fakeBttns">Text 1</div><div id="txt2" class="fakeBttns">Text 2</div><div id="txt3" class="fakeBttns">Text 3</div><div id="txt4" class="fakeBttns">Text 4</div><div id="txt5" class="fakeBttns">Text 5</div><div id="txt6" class="fakeBttns">Text 6</div><div id="txt7" class="fakeBttns">Text 7</div><div id="txt8" class="fakeBttns">Text 8</div><div class="demo"><b>Example 4</b><br>Fade-out effect using images with underlying text</div><br><div style="width:100px; font-size:18px;"><div class="outer"><layer><div class="txt">Text 1</div></layer><layer><div id="img9" class="img"><img src="b1.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 2</div></layer><layer><div id="img10" class="img"><img src="b2.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 3</div></layer><layer><div id="img11" class="img"><img src="b3.jpg" width="100" height="20"></div></layer></div><div class="outer"><layer><div class="txt">Text 4</div></layer><layer><div id="img12" class="img"><img src="b4.jpg" width="100" height="20"></div></layer></div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/opacity/opacity.jshttp://javascriptbank.com/javascript/form/opacity/b1.jpghttp://javascriptbank.com/javascript/form/opacity/b2.jpghttp://javascriptbank.com/javascript/form/opacity/b3.jpghttp://javascriptbank.com/javascript/form/opacity/b4.jpg