53 jQuery-使用fadeTo()方法改變圖片透明度
阿新 • • 發佈：2019-01-03
1.效果圖
2.HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>53 jQuery-使用fadeTo()方法改變圖片透明度</title> <style type="text/css"> .divFrame{border:solid 1px #666; width:197px;text-align:center;} .divFrame .divTitle{background-color:#eee; padding:5px 0px 5px 0px} .divFrame .divContent{padding:5px 0px 5px 0px} .divFrame .divContent img{border:solid 1px #eee; padding:2px;width: 193px;} </style> </head> <body> <div class="divFrame"> <div class="divTitle"> <select id="Select1"> <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.0" selected="selected">1.0</option> </select> </div> <div class="divContent"> <img src="../img/pig.jpg" alt="" title="我是一隻小笨豬" /> </div> </div> <script src="../jquery.min.js"></script> <script type="text/javascript"> $(function(){ //獲取圖片元素物件 $img = $("img"); //獲取下拉列表框物件 var $sel = $("select"); //下拉列表框選項改變事件 $sel.change(function(){ //獲取選中的值 var fltValue = $sel.val(); //改變圖片的透明度 $img.fadeTo(3000, fltValue); }) }) </script> </body> </html>