`

图片变模糊的做法

CC++C#HTMLCSS 
阅读更多

主要用到了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>

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

 

 

分享到：
| 使用Jdom来把一棵完整的树生成XML
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics