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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
Python中对象的引用与复制代码示例
2017/12/04 Python
matplotlib实现区域颜色填充
2019/03/18 Python
python中的列表与元组的使用
2019/08/08 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
表彰先进集体通报
2014/01/12 职场文书
干部现实表现材料
2014/02/13 职场文书
家具促销活动方案
2014/02/16 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
销售顾问岗位职责
2014/02/25 职场文书
高一新生军训感言
2014/03/02 职场文书
活动总结模板
2014/05/09 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
参观邀请函范文
2015/02/02 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书