`

图片变模糊的做法

阅读更多

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

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

 

 

分享到:
评论

相关推荐

    把图片上的内容弄到电脑上

    将图片上的内容高效地转换至电脑,这一需求在数字化办公时代变得日益迫切。尤其是在处理大量纸质文档时,如书籍、报纸或手写笔记,能够快速、准确地将这些信息电子化,不仅能够节省时间,还能提升工作效率。本文将...

    详解微信JS-SDK选择图片遇到的坑

    尽管在调用`chooseImage`方法时可以通过`sourceType`指定选择原图还是压缩后的图片,但是一旦调用了`getLocalImgData`方法获取base64串后,无论原图的实际大小如何,显示的图片都可能变得模糊。进一步的测试表明,...

    ImageUtils

    根据提供的描述,我们可以了解到 `ImageUtils` 支持的功能包括但不限于:缩放图片、裁剪图片、倾斜图片、旋转图片、将图片转换为圆形或圆角图片、添加倒影、添加文字或图片水印以及快速模糊等。接下来,我们将深入...

    js实现图片加载时候逐渐出现的杂色效果

    在本例中,我们将探讨如何使用JavaScript来实现图片在加载时先显示为杂色效果,然后逐渐变得清晰的过程。 首先,我们需要了解在网页中显示图片的HTML标签`&lt;img&gt;`,它是实现图片显示的关键元素。当图片被赋予特定的...

    2022双目标柔性作业车间调度FJSP复现 复现情况:对2022年所提基于分解的多目标进化算法IMDFA D及其对比算法共六种算

    摘要: 针对同时考虑最大模糊完工时间和总模糊机器负载的双目标模糊柔性作业车间调度问题(BFFJSP), 本文提出了一种改进的基于分解的多目标进化算法(IMOEA D), 同时最优化最大模糊完工时间和总模糊机器负载, 其主要...

    PS制作空间FASHL绕光子教程

    3. **滤镜效果**:PS的滤镜库包含了很多可以模拟光效的工具,如模糊、发光、噪点等,这些都可以用来构建光线和粒子的感觉。 4. **画笔工具**:画笔工具配合颜色混合模式,可以绘制出各种动态光束,添加细节和亮点。...

    HTML5 Canvas图片倒影波纹特效

    - 边缘模糊:在波纹边缘添加模糊效果,使其看起来更柔和。 - 光照效果:模拟光照方向,使波纹有明暗变化。 5. **优化性能**: 对于复杂或高性能需求的Canvas应用,性能优化是必不可少的。例如,可以使用离屏...

    lucky_wheel-master(幸运大转盘).zip

    这种做法在开发者社区中非常常见,通过学习和模仿他人的代码,可以快速提升自己的技能,并且便于自己以后重用或改进。上传到个人空间便于随时访问,体现了良好的代码管理习惯。 【标签】"vue"和"幸运大转盘"分别...

    好照片创意功能让足球比赛变身“玩具桌游”.docx

    2. **模拟视觉习惯**:这种做法模拟了人们在玩桌游时的习惯——专注于眼前的玩具,周围的环境则变得模糊。 #### 最终效果展示 完成以上步骤后,你将获得一张充满趣味性的“玩具桌游”风格的照片。足球队员们仿佛...

    风光摄影的后期处理技巧——色阶剪切法

    为了解决这个问题,传统的做法是使用渐变灰滤镜(GND),但这种滤镜存在过渡平直、适应性差等局限性。数字GND的出现,通过后期合成技术,改善了传统GND的局限性,但处理不当仍可能产生光晕效果。数字GND虽然在调整...

    使用python matplotlib 画图导入到word中如何保证分辨率

    2. **matplotlib生成的图片过大**:matplotlib生成的图像文件可能尺寸较大,导致在Word中缩放时变得模糊。为解决这个问题,可以使用在线工具如TinyPNG(https://tinypng.com/)来压缩图片,然后再将其插入Word。这...

    photpshop教程

    这一做法可以为画面添加一种暖色调。 **步骤7**: 将云彩素材导入图像,并将其放置于原图层上方,设置图层模式为“柔光”。之后,使用橡皮擦工具擦除除了天空部分以外的素材,确保云彩只出现在天空区域。通过`Ctrl+...

    用css filter做鼠标滑过图片效果

    在网页设计中,使用CSS来增强用户体验和页面交互性是非常常见的做法。其中一个简单而有效的方式是利用CSS `filter`属性来创建鼠标滑过图片时的效果。这种方法不仅能够提升网站的视觉吸引力,还能在不依赖JavaScript...

    VC图像处理(DIB位图特效显示)

    - 马赛克效果是将图像变得模糊,像素化的一种特效。通常做法是将大图像划分为小块,然后用每个小块内像素的平均颜色替换该块内的所有像素,达到像素化的效果。在VC++中,可以设定一个像素块大小,遍历图像,计算每...

    Brew手机测试经验总结

    在模拟器上的图像处理速度较快,不会出现游戏中移动图像变模糊的现象。但由于手机分辨率相对较低,因此在模拟器上看起来正常的图像速度,到了实际设备上可能会导致移动物体变得模糊不清。开发者应根据目标设备调整...

    淘宝开店考试答案(最全版)汇编.pdf

    正确做法是将所有变体整合到一个宝贝描述中,避免占用过多搜索资源。 2. **非重复铺货行为**:商品价格与邮费分开发布、不同组合方式在一个宝贝描述里展示、电子器械及配件类商品图片价格一致且描述相同,这些不...

    恶劣天气数据集(雨天,雪天,雾天)

    雨天图像可以用于训练模型识别雨天的特征,如水珠、模糊的视线以及雨天对物体颜色和纹理的影响。这对于自动驾驶汽车的安全行驶、气象预测系统或增强现实应用都是有价值的。例如,一个视觉检测系统需要学会区分雨滴在...

    Teahouse WordPress主题

    这个和插入音乐外链同一做法,首先写文章时选择类型为“标准”,然后勾选“显示选项”里面的“自定义栏目”,在出现的“自定义栏目”里,点击“输入新栏目”,名称区域填入“picture”,值区域输入图片的路径即可。...

    关于oracle中clob字段查询慢的问题及解决方法

    然而,由于其大数据量的特性,当涉及到CLOB字段的查询时,性能问题常常会出现,特别是进行模糊查询时。这个问题在标题和描述中已经提及,即在对CLOB字段进行“like”操作时,查询速度会变得非常缓慢。 首先,尝试将...

    新人教统编版四年级上册语文 交流平台与初试身手 教学课件.pptx

    这是叙事的基础,不明确这些元素,故事可能会变得模糊不清。 5. **结合观察与想象**:在“初试身手”环节,学生被鼓励观察图片并发挥想象力,描述画面中的场景。不仅要描述看到的(如人物的动作、表情),还要包括...

Global site tag (gtag.js) - Google Analytics