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 相关文章推荐
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
使用Python封装excel操作指南
2021/01/29 Python
python 递归相关知识总结
2021/03/03 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
商场消防演习方案
2014/02/12 职场文书
技术入股合作协议书
2014/10/07 职场文书
工作会议通知
2015/04/15 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书