论坛首页 入门技术论坛

图片变模糊的做法

浏览 2045 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-05  

主要用到了css的滤镜的效果:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
    function c_opacity(cur, number) {
      if (number>=0&&number<=100)
        cur.filters.alpha.opacity=number
 }
  </script>
 </HEAD>

 <BODY>
<div>
   <p align="center">
     <a href="#"><img name="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)" onMouseOver=c_opacity(image1,100) onMouseOut=c_opacity(image1,35)>
     </a>
  </p>  
   <!--<p align="center" ><a href="#" onclick="changeStyle(image1);">是你要的效果么?</a></p> -->
  </div>
 </BODY>
</HTML>

 

上面的是鼠标放上去变亮,当鼠标离开时变模糊。还有一个就是:来回切换图片的使图片变亮的做法:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
    function c_opacity(curImage) {
      if (curImage=='image1') {
     document.getElementById(curImage).filters.alpha.opacity=100;
  document.getElementById("image2").filters.alpha.opacity=35;
      } else if (curImage=='image2') {
     document.getElementById(curImage).filters.alpha.opacity=100;
  document.getElementById("image1").filters.alpha.opacity=35;
      }
 }
  </script>
 </HEAD>

 <BODY>
<div>
   <p align="center">
     <a href="#" onclick="c_opacity('image1');"><img id="image1" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin_45.gif' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
     </a>
     <a href="#" onclick="c_opacity('image2');"><img id="image2" src='E:\J2EEWS\SkyAnalysis\WebRoot\images\admin.jpg' width="35" height="25" border="0" style="filter:alpha(opacity=35)">
     </a>
  </p>  
   <!--<p align="center" ><a href="#" onclick="changeStyle(image1);">是你要的效果么?</a></p> -->
  </div>
 </BODY>
</HTML>

<!--
  图片可以自己来换。
-->

 

 

论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics