jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】


Posted in Javascript onJune 16, 2016

本文实例讲述了jQuery实现响应鼠标事件的图片透明效果。分享给大家供大家参考,具体如下:

实现的思想:

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=utf-8" />
<script src="jquery-1.6.2.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="logo.gif" id="img_id" height="78" width="215"/>
<body>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
详解puppeteer使用代理
Dec 27 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
JS原型对象的创建方法详解
Jun 16 #Javascript
JS使用单链表统计英语单词出现次数
Jun 16 #Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 #Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 #Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 #Javascript
jQuery插件实现图片轮播特效
Jun 16 #Javascript
You might like
php通过ajax实现双击table修改内容
2014/04/28 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
自己动手开发jQuery插件教程
2011/08/25 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
低版本中Python除法运算小技巧
2015/04/05 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
将python代码和注释分离的方法
2018/04/21 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
任命书范本大全
2014/06/06 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
离婚答辩状范文
2015/05/22 职场文书
Win11开始菜单添加休眠选项
2022/04/19 数码科技