`

jQuery实现图片变亮或变暗

 
阅读更多

 

                                         一个jQuery特效例子

 

1、建立html或其它;

 

2、页面引用

<script src="http://code.jquery.com/jquery-latest.js"></script>

 

3、页面主体代码

 <body>
    <div id="contaiter">
     <img src="1.jpg" alt="image" />
     <img src="2.jpg" alt="image" />
     <img src="1.jpg" alt="image" />
    </div>
  </body>

 

4、jQ代码

<script type="text/javascript">
  $(function(){
      $('#contaiter img').animate({
         "opacity":.5
      });
      $('#contaiter img').hover(
      function(){$(this).stop().animate({"opacity":1});},
      function(){$(this).stop().animate({"opacity":.5});
      });

  });
 </script>

 

 

5、效果图(说明 当鼠标移动到图片上,图片就会变亮;鼠标离开后,就会变暗)



 

 

6、附件为完整的例子内容;可以下载直接使用;

 

7、如有疑问,可以互相讨论;

 

  • 大小: 38.5 KB
0
8
分享到:
评论

相关推荐

    JQuery 当前图片变亮,其它变暗

    本文将深入探讨如何使用 jQuery 实现“当前图片变亮,其他图片变暗”的功能,这对于创建交互式的图像展示或焦点图组件特别有用。 首先,我们需要在页面中引入 jQuery 库。你可以通过 CDN(内容分发网络)链接来引入...

    jQuery仿京东图片变亮变暗效果

    总结,实现jQuery仿京东图片变亮变暗效果主要涉及以下几个步骤:引入jQuery库、设置图片元素、使用jQuery事件处理函数绑定鼠标进入和离开事件、通过`fadeTo`方法或CSS滤镜改变图片的视觉效果。通过灵活运用这些技术...

    基于jQuery实现的仿京东商城图片变亮变暗效果源码.zip

    例如,`.fadeTo(duration, opacity)`可以让元素在指定时间内渐变为给定的透明度,这对于实现图片变亮变暗非常适用。`duration`参数表示动画持续的时间,`opacity`则是目标透明度,0表示完全透明,1表示完全不透明。 ...

    jQuery实现鼠标经过图片变亮效果.zip

    实现图片变亮效果的核心在于CSS的`opacity`属性。`opacity`值介于0(完全透明)和1(完全不透明)之间,通过调整这个值可以改变元素的透明度。在鼠标经过图片时,我们将该图片的`opacity`值提高,使其看起来更亮;...

    jQuery天猫商城鼠标滑到商品图片上变暗变亮显示效果

    接下来,我们要实现图片变暗变亮的效果。在HTML中,为每张商品图片设置一个唯一的ID,并为它们添加一个类,例如`product-image`: ```html 商品图片1的URL"&gt; 商品图片2的URL"&gt; ``` 然后,我们可以编写jQuery代码来...

    jQuery仿京东商城图片变亮变暗效果.zip

    在本项目中,"jQuery仿京东商城图片变亮变暗效果.zip" 是一个包含JavaScript特效的资源包,主要目的是实现类似京东商城的商品图片展示效果。当你将鼠标悬停在某个图片上时,该图片会变亮,而其他图片则会变暗,这样...

    jQuery实现鼠标经过图片变亮其他变暗效果

    以下是完整源代码: &lt;!DOCTYPE ...&lt;... &lt;...jQuery实现鼠标经过图片变亮效果&lt;/title&gt;&lt;base target

    jQuery实现的鼠标经过图片变亮动态特效源码.zip

    本资源"jQuery实现的鼠标经过图片变亮动态特效源码.zip"显然提供了一种利用jQuery来创建图片鼠标悬停时变亮效果的方法。这种效果在网站设计中常见,可以增强用户体验,使用户更直观地感知到他们正在与网页元素互动。...

    jQuery图片背景墙聚光灯效果代码,鼠标悬停在某张图片上时,该图片变亮,其他图片变暗。兼容主流浏览器

    这个效果通过使用jQuery库来实现,当用户将鼠标悬停在一组平铺的图片上时,被选中的图片会变得明亮,而其他图片则相应地变暗,如同聚光灯照射的效果。这种效果在展示产品、照片墙或任何需要突出单个元素的场景中非常...

    jQuery实现鼠标经过图片变亮效果

    "jQuery实现鼠标经过图片变亮效果"就是这样一个功能,它能够使用户在鼠标悬停在图片上时,该图片变得更为醒目,而其他图片则相应变暗,从而引导用户的注意力。这个效果在产品展示、图片轮播或导航菜单等场景中尤为...

    jQuery天猫商城图片变暗效果

    在本文中,我们将深入探讨如何使用jQuery实现天猫商城图片变暗效果。这种效果通常用于创建一个视觉焦点,当用户点击或悬停在某个商品图片上时,其他图片会变暗,从而突出显示所选商品。这不仅可以提升用户体验,还能...

    jQuery仿京东商城图片变亮变暗效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿京东商城的图片变亮变暗效果。这个效果在用户鼠标悬停在某张图片上时,会使该图片变亮,同时其他图片变暗,当鼠标移开后,所有图片恢复原样。这个功能不仅提升了...

    鼠标划过 图片 由暗变亮 经典CSS代码

    在探讨“鼠标划过图片由暗变亮经典CSS代码”这一主题时,我们不仅局限于简单的代码展示,而是深入解析其背后的原理与应用技巧,旨在帮助读者掌握如何利用CSS实现图片的动态效果,提升网页设计的交互性和用户体验。...

    jQuery+CSS实现图片感应鼠标高亮显示当前图片

    在网页设计中,提升用户体验是至关重要的,而“jQuery+CSS实现图片感应鼠标高亮显示当前图片”就是一种常见的交互式设计技术。这种技术可以使用户更容易聚焦于当前操作的图片,增强视觉效果,同时提供更直观的操作...

    jQuery鼠标经过图片变亮效果

    "jQuery鼠标经过图片变亮效果"是一种常见的交互式设计,它可以使用户在鼠标悬停在图片上时,图片产生亮度变化,增强视觉反馈,吸引用户的注意力。这个效果是利用了jQuery库的事件监听和CSS样式修改功能来实现的。 ...

    jQuery实现图文开关灯交错切换特效

    开关灯效果通常是指元素在亮(可见)和暗(不可见)之间交替变化,而交错切换则意味着不同的元素会按照特定顺序或随机顺序进行显示和隐藏。在jQuery中,我们可以利用CSS控制元素的显示状态,并通过定时器实现自动...

    jquery鼠标悬停带开关灯效果的变暗突出显示特效.zip

    这个压缩包“jquery鼠标悬停带开关灯效果的变暗突出显示特效.zip”显然是一个包含jQuery实现的特殊效果示例,特别是关于鼠标悬停时的元素变暗和突出显示功能,类似于开关灯效果。这个效果通常用于吸引用户的注意力...

Global site tag (gtag.js) - Google Analytics