您好,登录后才能下订单哦!
这篇文章主要介绍“CSS实现鼠标点击改变图片透明度功能”,在日常操作中,相信很多人在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");
})
});
最终效果如下:
到此,关于“CSS实现鼠标点击改变图片透明度功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。