jQuery实现简单的图片半透明效果教程
- 作者：我爱模版网
- 类型：图文教程
- 点击次数：
- 发布时间：2014-01-15 13:48
jQuery实现简单的图片半透明效果教程，先看下效果：
首先，引入jquery库：
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>第二步，写jquery代码：
<script>
$(function(){
/*选择索引为偶数的图片，添加hover鼠标移上去事件。even为偶数，odd为奇数*/
$("img:even").hover(function(){
/*为选中的img添加行内样式，opacity透明度为0.618，鼠标样式为手型*/
$(this).css({"opacity":0.618,"cursor":"pointer"});
},
function(){
/*为选中img添加鼠标移出效果，即，透明度为1，即不透明*/
$(this).css("opacity",1);
}
);
})
</script>
第三步：编写html代码：
<div>
<img src="./demo1.jpg" />
<img src="./demo1.jpg" /><br />
<img src="./demo2.jpg" style="width:530px" />
<img src="./demo2.jpg" style="width:530px" />
</div>
(责任编辑：网页模板)
- 本文标签：
- jQuery半透明,jq图片半透明
