CSS鼠标点击改变图片透明度
发布时间：2016-03-08 14:49:12 作者：佚名 
我要评论
我要评论这篇文章主要为大家详细介绍了CSS鼠标点击改变图片透明度，为大家提供改变图片css透明度属性的简单方法，感兴趣的小伙伴们可以参考一下
很多时候在网站图片处理上需要实现一些辅助效果，比如鼠标在图片上滑动时或点击时改变图片颜色（变灰或者其他），其实一个简单的办法就是改变图片css透明度属性。
如何改变呢？一种是纯css，一种使用jquery或者javascript代码控制。第一种使用:hover伪类选择器，本示例使用第二种。
先看最后效果：
第一步：放置图片
XML/HTML Code复制内容到剪贴板
- <ul id="test">
- <li>
- <img class="imgopacity" src="Images/1.jpg" /></li>
- <li>
- <img class="imgopacity" src="Images/2.jpg" /></li>
- <li>
- <img class="imgopacity" src="Images/3.jpg" /></li>
- </ul>
这里每张图片先默认设置一个class选择器imgopacity（默认图片未选中，显示为淡灰色）
第二步：设置图片
css样式如下：
CSS Code复制内容到剪贴板
- .imgopacity
- {
- filter: alpha(opacity=50);
- -moz-opacity: 0.5;
- -khtml-opacity: 0.5;
- opacity: 0.5;
- }
- ul li
- {
- list-style-type: none;
- }
上述css样式中0.5为图片透明度属性值，值范围：0—1，值越大图越清晰
此刻效果如下：
css默认透明度（即淡灰色）
第三步：编写jquery代码点击式控制图片透明度
当鼠标点击某一张图片时，将该图片正常显示，其他图片变成淡灰色。
由于默认图片有一个class选择器imgopacity代表淡灰色，即当我们鼠标点击该图片时删除该class即可正常显示该图片，代码如下：
JavaScript Code复制内容到剪贴板
- $(function () {
- $("#test img").click(function () {
- $("#test img").addClass("imgopacity");
- $(this).removeClass("imgopacity");
- })
- });
最终效果如下：
今日分享到此结束，感谢大家的阅读，小编一定会再接再厉为大家贡献更多的文章。
相关文章
- 这篇文章主要介绍了详解CSS3的opacity属性设置透明效果的用法,同时还讲到了opacity透明度带有的继承性影响子集元素的问题,值得初学者注意,需要的朋友可以参考下2016-05-09
- 这篇文章主要介绍了CSS3中使用RGBa来调节透明度的教程,RGBA是RGB色彩模型的一个扩展,这个缩写词代表红绿蓝三原色的首字母,Alpha值代表颜色的透明度或者说不透明度,需要的朋2016-05-09
- 这篇文章主要为大家详细介绍了CSS3不透明度实例，以设计灯箱广告背景布的透明度为例，为大家介绍CSS3不透明度的调节方法，感兴趣的小伙伴们可以参考一下2016-04-26
CSS3实现透明白块向上漂浮动画特效源码是一款半透明方块向上飘动CSS3动画效果，需要的朋友前来下载源码2016-03-28- 这篇文章主要教大家使用css绘制透明三角形，css绘制三角形很简单，如何绘制透明的三角形，本文为大家解决这个问题，感兴趣的小伙伴们可以参考一下2016-03-10
- 这篇文章主要介绍了CSS中文字镂空、透明值、阴影效果设置示例小结,其中通过text-stroke-color透明值的设置可以让文字在某些程度上更加柔和,需要的朋友可以参考下2016-03-07
- 用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持，不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari2015-11-09
- 下面小编就为大家带来一篇兼容主流浏览器的CSS透明代码(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-18
最新评论