用JQuery改变图片的透明度

zlpx

浏览: 153169 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript
HTML5

jquery html5

下面的例子展示了你如何改变项目的透明度。当鼠标滑过<img>标签时，用hover()函数设置透明度样式。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script text="text/javascript">
        const OUT_OPACITY = 0.4;
        const OVER_OPACITY = 1.0;
        $(function() {
            $("div#miniGallery img").css("opacity", OUT_OPACITY)
                .hover(
                    function () {
                        $(this).animate({opacity:OVER_OPACITY});
                    },
                    function () {
                        $(this).animate({opacity:OUT_OPACITY});
                    }
                );
            });
    </script>
</head>
<body> 
    <div id="miniGallery">
        <img src="http://helpexamples.com/flash/images/image1.jpg" width="150" />
        <img src="http://helpexamples.com/flash/images/image2.jpg" width="150" />
        <img src="http://helpexamples.com/flash/images/image3.jpg" width="150" />
    </div> 
</body>
</html>

分享到：

在HTML5中利用Canvas画图 | 在JQuery 中用fadeToggle()设置动画的持续 ...

2011-10-23 16:50
浏览 9488
评论(2)
分类:Web前端
查看更多

2 楼 crackajack_zg 2014-11-03

good ，很简单的代码、

1 楼 qq184234675 2013-10-24

求jquery1.9+的

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用JQuery改变图片的透明度

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

用JQuery改变图片的透明度

评论

发表评论

相关推荐

用Javascript从一个array中删除重复的元素

用Javascript反转HTML密码框中的内容

在JS中利用arrays 排序

在HTML列表上动态改变列表位置风格

在HTML列表上改变列表位置风格

在HTML对象上应用多个class Name

使用CSS3生成一个inset盒子阴影

使用AJAX和XMLHttpRequest动态加载内容

使用CSS3生成简单的box影子

将javascript对象转换为JSON字符串

在HTML的text input控件获取焦点时设置背景颜色

在HTML5中定制数据属性

在HTML5中自动设置Form的焦点

使用CSS3建立不可选的的文字

在HTML5中使用Form新的input types

在容器内使用CSS设置背景颜色

用CSS3在一个容器中使用特定的圆角

用CSS3生成多列文本流

用HTML5的本地存储功能

用HTML5产生操作系统通知

最近访客更多访客>>