DDR爱好者之家 Design By 杰米

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

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

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。