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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
js实现图片无缝滚动
Dec 23 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
Vue关于组件化开发知识点详解
May 13 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读取flv文件的播放时间长度
2009/09/03 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
零基础php编程好学吗
2019/10/11 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
python 循环while和for in简单实例
2016/08/16 Python
python学习必备知识汇总
2017/09/08 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
C# .NET面试题
2015/11/28 面试题
三严三实对照检查材料
2014/09/22 职场文书
师德师风自查总结
2014/10/14 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
2015年教研员工作总结
2015/05/26 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL