幽灵资源网 Design By www.bzswh.com

很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性。

如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制。第一种使用:hover伪类选择器,本示例使用第二种。

先看最后效果:

CSS鼠标点击改变图片透明度

第一步:放置图片 

XML/HTML Code复制内容到剪贴板
  1. <ul id="test">  
  2.       <li>  
  3.           <img class="imgopacity" src="Images/1.jpg" /></li>  
  4.       <li>  
  5.           <img class="imgopacity" src="Images/2.jpg" /></li>  
  6.       <li>  
  7.           <img class="imgopacity" src="Images/3.jpg" /></li>  
  8.   </ul>  

这里每张图片先默认设置一个class选择器imgopacity(默认图片未选中,显示为淡灰色)

第二步:设置图片

css样式如下: 

CSS Code复制内容到剪贴板
  1. .imgopacity   
  2.   {   
  3.       filter: alpha(opacity=50);   
  4.       -moz-opacity: 0.5;   
  5.       -khtml-opacity: 0.5;   
  6.       opacity: 0.5;   
  7.   }   
  8.   ul li   
  9.   {   
  10.       list-style-type: none;   
  11.   }   

上述css样式中0.5为图片透明度属性值,值范围:0—1,值越大图越清晰

此刻效果如下:

CSS鼠标点击改变图片透明度

css默认透明度(即淡灰色)

第三步:编写jquery代码点击式控制图片透明度

当鼠标点击某一张图片时,将该图片正常显示,其他图片变成淡灰色。

由于默认图片有一个class选择器imgopacity代表淡灰色,即当我们鼠标点击该图片时删除该class即可正常显示该图片,代码如下:

JavaScript Code复制内容到剪贴板
  1. $(function () {   
  2.             $("#test img").click(function () {   
  3.                 $("#test img").addClass("imgopacity");   
  4.                 $(this).removeClass("imgopacity");   
  5.             })   
  6.         });   
  7.   

最终效果如下:

CSS鼠标点击改变图片透明度

今日分享到此结束,感谢大家的阅读,小编一定会再接再厉为大家贡献更多的文章。

标签:
CSS,图片透明度

幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?