图片鼠标透明效果
2013-12-04 09:52
120 查看
实现的思想:
1、当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明)
2、当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明)
测试代码.zip (381.5 KB)
下载次数: 0
1、当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明)
2、当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready( function(){ $("#img_id").bind("mouseover mouseenter",function(){ $(this).fadeTo("slow", 0.66); }); $("#img_id").bind("mouseleave mouseout",function(){ $(this).fadeTo("fast", 1); }); } ); </script> <title>无标题文档</title> </head> <img src="img/GB-wp1.jpg" id="img_id" height="200" width="200"/> <body> </body> </html>
测试代码.zip (381.5 KB)
下载次数: 0
相关文章推荐
- 图片与文字半透明效果 鼠标移上不透明
- 半透明图片效果,鼠标移动上去就透明,支持Firefox/IE
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- 图片与文字半透明效果 鼠标移上不透明
- C# 鼠标拖放图片透明缩略图效果实现思路
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- javaScript---图片渐显效果和文字大小变化之鼠标响应事件
- 使用WPF Resource以及Transform等技术实现鼠标控制图片缩放和移动的效果
- 图片3d轮放查看效果(V2.0):使用鼠标拖动实现图片的轮放
- 鼠标拖动虚影效果(拖动的时候使用图片蒙人,但效果不错)
- 感应鼠标的图片遮罩动画效果
- Android Gallary图片游览效果--透明的倒影,层叠的图片,渐变的颜色透明度
- [Javascript] 解决 IE6 中 png 图片背景不支持透明效果的问题
- 图片定义的title提示信息的样式以及提示信息跟随鼠标的移动而移动的效果
- 【js基础】鼠标移到图片上产生遮障效果
- 可跟随鼠标实现立体翻转的JS图片展示效果
- png图片 透明区域如何 让其不响应鼠标事件?
- 如何实现文字加透明背景显示在一张图片的底部的效果
- 顶部小图片鼠标经过效果:
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码