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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
jQuery学习5 jQuery事件模型
Feb 07 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
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性能的原理介绍
2012/09/05 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
读书心得体会
2013/12/28 职场文书
银行开业庆典方案
2014/02/06 职场文书
小学班主任培训方案
2014/06/04 职场文书
建筑工地质量标语
2014/06/12 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
干部考核工作总结2015
2015/07/24 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
python接口测试返回数据为字典取值方式
2022/02/12 Python