jQuery图片的展开和收缩实现代码


Posted in Javascript onApril 16, 2013
<!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> 
<title></title> 
<style type="text/css"> 
#img1 
{ 
width: 500px; 
height: 400px; 
border: solid 1px #ccc; 
display:none; 
} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('#Button1').click(function () { 
$('#img1').show(5000); 
}); 
$('#Button2').click(function () { 
$('#img1').hide(5000); 
}) 
$('#Button3').click(function () { 
$('#img1').fadeIn(2000); 
}) 
$('#Button4').click(function () { 
$('#img1').fadeOut(1000); 
}) 
}) 
</script> 
</head> 
<body> 
<img id="img1" src="images/1.jpg" /> 
<input id="Button1" type="button" value="展开图片" /> 
<input id="Button2" type="button" value="收缩图片" /> 
<input id="Button3" type="button" value="图片" /> 
<input id="Button4" type="button" value="图片1" /> 
</body> 
</html>
Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
jQuery UI Autocomplete 体验分享
Feb 14 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
javascript 中的继承实例详解
May 05 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
js变换显示图片的实例
Apr 16 #Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 #Javascript
You might like
php横向重复区域显示二法
2008/09/25 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
详解a++和++a的区别
2017/08/30 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Python实现自动装机功能案例分析
2020/10/22 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
数学教研活动总结
2014/07/02 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
活动费用申请报告
2015/05/15 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python