jQuery fadeTo方法調(diào)整圖片的透明度使用介紹

更新時(shí)間：2013年05月06日 17:49:46 作者：

利用jquery的fadeTo方法可以簡(jiǎn)單的制作一些很不錯(cuò)的動(dòng)畫效果.可以使圖片或者文字或者區(qū)塊以不同的透明度效果出現(xiàn).例如以下練習(xí)實(shí)例，感興趣的朋友可以參考下哈

 
<head> 
<title></title> 
<style type="text/css"> 
.imgclass{ width:300px; height:300px; border:solid 1px red;} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#Select1').change(function () { 
var thevalue = $(this).val(); 
$('img').fadeTo(2000, thevalue); 
}) 
}) 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
透明度: 
<select id="Select1"> 
<option value="0">0</option> 
<option value="0.2">0.2</option> 
<option value="0.4">0.4</option> 
<option value="0.6">0.6</option> 
<option value="0.8">0.8</option> 
<option value="1">1</option> 
</select> 
</td> 
<td> 
<img src="images/淚奔1.gif" class="imgclass" /> 
</td> 
</tr> 
</table> 
</body> 

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)很酷的網(wǎng)頁(yè)頂部圖標(biāo)下拉菜單效果,效果非常美觀大方,通過鼠標(biāo)hover事件及頁(yè)面元素的遍歷與樣式操作實(shí)現(xiàn)該功能,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)返回頂部功能適合不支持js的瀏覽器
a標(biāo)簽指向錨點(diǎn)top，可以在頂部防止一個(gè)a name=top的錨點(diǎn)，這樣在瀏覽器不支持js時(shí)也可以實(shí)現(xiàn)返回頂部的效果了
2014-08-08
jQuery 文本框模擬下拉列表效果
學(xué)校作業(yè)的問題，就在網(wǎng)搜了一下，找不到文本框模擬的（可能本人RP問題），看到的都是用div的，結(jié)果就自己弄了一個(gè)，主要就是改變背景圖片的位置，讓div的位置放到文本框上面，沒什么其它的東西，呵呵，見笑了
2010-02-02
jquery ui resizable bug解決方法
其實(shí)這個(gè)也不算是 resizable 的BUG,但從官網(wǎng)下載下來(lái)的確實(shí)存在問題
2010-10-10
jQuery實(shí)現(xiàn)菜單欄導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單菜單欄導(dǎo)航效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
jQuery插件-jRating評(píng)分插件源碼分析及使用方法
該插件被廣泛應(yīng)用于各種需要評(píng)分的頁(yè)面當(dāng)中，今天作為學(xué)習(xí)，把源碼拿出來(lái)分析一下，順便學(xué)習(xí)其使用方法,需要了解的朋友可以研究下
2012-12-12
jQuery實(shí)現(xiàn)定位滾動(dòng)條位置
基于jQuery實(shí)現(xiàn)滾動(dòng)條滾動(dòng)到子元素位置以此來(lái)定位滾動(dòng)條位置，下面是小編給大家?guī)?lái)的實(shí)現(xiàn)代碼，代碼比較簡(jiǎn)單，需要的朋友可以參考下
2016-08-08
精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
今天這篇文章向大家分享15款精心挑選的優(yōu)秀 jQuery 文本特效插件，都帶有詳細(xì)的使用教程。jQuery 是最流行和使用最廣泛的 JavaScript 框架，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及Ajax交互，幫助 Web 開發(fā)人員更快速的實(shí)現(xiàn)各種精美的界面效果
2012-08-08
淺析jQuery操作select控件的取值和設(shè)值
本文主要實(shí)例淺析jQuery操作select控件取值和設(shè)值。有需要的朋友可以看下，希望會(huì)對(duì)大家有所幫助
2016-12-12
jquery 應(yīng)用代碼方便的排序功能
點(diǎn)擊后可以輸入排序的數(shù)字編號(hào)，移開后自動(dòng)更新數(shù)據(jù)庫(kù)。
2010-02-02