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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
Python入门篇之数字
2014/10/20 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python ChainMap的使用和说明详解
2019/06/11 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
表彰先进的通报
2014/01/31 职场文书
森林防火工作方案
2014/02/14 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
学习方法演讲稿
2014/05/10 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
收入证明范本
2015/06/12 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
Python基础之Socket通信原理
2021/04/22 Python
如何用JavaScript学习算法复杂度
2021/04/30 Javascript