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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
为什么node.js不适合大型项目
Apr 28 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
杏林同学录(四)
2006/10/09 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python装饰器深入学习
2018/04/06 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
家长对学生的评语
2014/04/18 职场文书
实验心得体会
2014/09/05 职场文书
护士工作失误检讨书
2014/09/14 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
php去除deprecated的实例方法
2021/11/17 PHP
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers