JQuery 图片的展开和伸缩实例讲解


Posted in Javascript onApril 18, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#img1 
{ 
width:400px; 
height: 400px; 
border: solid 1px #ccc; 
display:none; 
} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#Button1').click(function () { 
$('#img1').show(5000); //图片的展开 
}) 
$('#Button2').click(function () { 
$('#img1').hide(5000); //图片的伸缩 
}) 
}) 
</script> 
</head> 
<body> 
<img id="img1" src="images/1.jpg" /> 
<input id="Button1" type="button" value="展开图片"/> 
<input id="Button2" type="button" value="收缩图片"/> 
</body> 
</html>
Javascript 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
老生常谈js中的MVC
Jul 25 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
webpack4从0搭建组件库的实现
Nov 29 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 #Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 #Javascript
jQuery基本过滤选择器使用介绍
Apr 18 #Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 #Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
You might like
PHP $_FILES函数详解
2011/03/09 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
laravel自定义分页效果
2017/07/23 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python生成验证码实例
2014/08/21 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
解决Python安装cryptography报错问题
2020/09/03 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
煤矿班组长竞聘书
2014/03/31 职场文书
公司踏青活动方案
2014/08/16 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
市场部岗位职责
2015/02/12 职场文书
社区国庆节活动总结
2015/03/23 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Python语言内置数据类型
2022/02/24 Python