`
zlpx
  • 浏览: 156865 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用JQuery改变图片的透明度

jqueryhtml5 
阅读更多

下面的例子展示了你如何改变项目的透明度。当鼠标滑过<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>

 

 

 

 

分享到：
| 在JQuery 中用fadeToggle()设置动画的持续 ...
评论
2 楼 crackajack_zg 2014-11-03  
good  ，很简单的代码、
1 楼 qq184234675 2013-10-24  
求jquery1.9+的
发表评论

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

相关推荐

    jQuery可变透明度返回顶部代码

    - `.fadeTo()`: jQuery的动画方法，用于改变元素的透明度。在这个例子中，根据滚动位置调整返回顶部按钮的透明度。 **3. CSS样式** CSS部分负责定义返回顶部按钮的样式，包括位置、大小、颜色等。通常，按钮会被...

    jQuery实现图片透明度轮播图.rar

    本教程将深入讲解如何使用jQuery库来实现一个基于图片透明度变化的轮播图效果。jQuery是一个功能强大的JavaScript库，它简化了DOM操作、事件处理以及动画效果，使得开发者能够更轻松地创建动态网页。 首先，我们...

    jQuery可变透明度返回顶部

    这个功能不仅提供了一个便利的导航工具，而且通过动态改变按钮的透明度，增加了交互的视觉吸引力。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。在这个"jQuery可变透明度返回...

    改变图片透明度和宽高

    在这个特定的主题中，“改变图片透明度和宽高”是一个常见的需求，尤其是在动态网页设计中。下面我们将深入探讨如何使用jQuery来实现这一功能。 首先，我们来理解“透明度”的概念。在网页设计中，透明度通常通过...

    JavaScript改变图片透明度，鼠标放上渐渐显示.rar

    综上所述，这个“JavaScript改变图片透明度，鼠标放上渐渐显示”的示例主要涉及了JavaScript与CSS的结合使用，实现了鼠标悬停时图片的动态透明度效果，增强了用户体验。通过学习和理解这个示例，开发者可以进一步...

    jquery高亮图片框 jquery图片展示 jquery效果很好

    首先，jQuery高亮图片框通常指的是在用户交互（如点击或鼠标悬停）时，图片框会以特定方式突出显示，例如改变边框颜色、添加阴影效果或者调整透明度。要实现这个效果，可以使用jQuery的选择器来选中图片框元素，然后...

    jQuery fadeTo方法调整图片的透明度使用介绍

    在提供的代码示例中，`fadeTo` 方法被用来改变图片的透明度，根据用户从下拉菜单中选择的值。 `fadeTo` 方法的基本语法如下： ```javascript $(selector).fadeTo(duration, opacity, [callback]); ``` - `...

    jQuery产品图片360度3D旋转展示代码.rar

    3. **动画效果**：jQuery的`.animate()`函数可以创建平滑的动画效果，如改变元素的位置、大小、透明度等。在3D旋转展示中，这个功能尤为重要，它可以使图片平滑地旋转，增加视觉吸引力。 接下来，CSS（Cascading ...

    简单的引导页jquery图片渐入效果，图片从透明到出现

    接下来，我们创建CSS样式来初始化图片的透明度。通过设置`opacity`为0，我们可以让图片在页面加载时默认不可见： ```css .fade-in { opacity: 0; transition: opacity 1s ease-in-out; /* 这里的1s是动画时长，...

    jquery 3d图片切换

    在jQuery 3D图片切换中，通常会创建多个图片层，并通过改变它们的Z轴位置和透明度来实现3D切换效果。当一个图片层处于前景时，其他层则向后移动或逐渐变透明，这样就形成了一个连续且富有立体感的过渡。 为了实现这...

    可变透明度的jQuery响应式返回顶部代码.

    - 在滚动事件处理函数中，检查页面滚动的位置，如果超过特定阈值，就改变按钮的透明度，通常使用`fadeIn()`和`fadeOut()`或调整CSS的`opacity`属性。 - 最后，添加点击事件监听器，点击按钮时触发`scrollTop()`...

    IE8下jQuery改变png图片透明度时出现的黑边

    总之，解决IE8下jQuery改变PNG图片透明度时出现黑边的问题，需要结合使用图片格式转换、容器透明度控制、背景颜色匹配以及可能的`zoom: 1`技巧。对于要求美观和兼容性的网页设计，这些方法能够帮助我们克服IE浏览器...

    jquery实现图片遮罩动画进渡提示特效

    2. **CSS样式**：定义图片和遮罩层的样式，确保遮罩层位于图片之上，并设置适当的透明度。 ```css .image-container { position: relative; } .mask { position: absolute; top: 0; left: 0; width: 100%...

    jquery抽屉式图片展示效果.rar

    jQuery提供了`.animate()`方法，可以平滑地改变元素的各种CSS属性，包括宽度、高度、透明度等，从而实现抽屉式展开和收缩的效果。在实际操作中，我们通常会为图片容器设定一个初始的较小尺寸，然后通过`.animate()`...

    jquery color颜色变化插件设置背景颜色变化透明图片变色

    // 如果透明图片需要变色，可以改变图片元素的`filter`属性 var imgElement = $('img'); // 假设图片元素的类名为'imgClass' imgElement.css('filter', 'hue-rotate(0deg)'); // 设置初始滤镜值，例如旋转0度 /...

    jquery 图片墙特效

    4. **CSS变换**：利用jQuery改变图片的CSS属性，如`width`, `height`, `opacity`等，实现放大和突出显示的效果。 5. **内容显示**：同时显示或隐藏与图片相关的信息，这可能是通过修改另一个元素的`display`属性来...

    淡化效果 jquery图片切换

    这两个方法分别用于淡入和淡出元素，使得元素的透明度逐渐变化，从而达到平滑过渡的效果。 首先，确保在页面中引入jQuery库。通常，我们会在HTML文档的`&lt;head&gt;`标签内添加以下代码来链接CDN上的jQuery库： ```html...

    jQuery半透明抽屉式手风琴

    在jQuery中，我们可以使用`.css()`方法动态改变元素的不透明度，创建出过渡或动画效果。 2. **抽屉式（Accordion）**：抽屉式布局是一种空间利用率高的设计模式，常见于导航菜单或信息展示。它允许用户点击一个标题...

    jQuery悬浮图片上13种超炫效果

    通过CSS定位和jQuery的`.hover()`方法，结合`animate()`函数调整图片的位置和透明度。 2. **3D旋转** 使用CSS3的3D转换和jQuery，可以创建一个图片在悬浮时进行3D旋转的效果，增加立体感。通过修改`transform`属性...

Magicbox
Global site tag (gtag.js) - Google Analytics