编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE iframe的onload方法分析小结

Jan 07 Javascript

简单的前端js+ajax 购物车框架(入门篇)

Oct 29 Javascript

js 遍历对象的属性的代码

Dec 29 Javascript

jquery对ajax的支持介绍

Dec 10 Javascript

JS+CSS实现的蓝色table选项卡效果

Oct 08 Javascript

JavaScript动态设置div的样式的方法

Dec 26 Javascript

利用策略模式与装饰模式扩展JavaScript表单验证功能

Feb 14 Javascript

基于Bootstrap实现城市三级联动

Nov 23 Javascript

Express下采用bcryptjs进行密码加密的方法

Feb 07 Javascript

React key值的作用和使用详解

Aug 23 Javascript

webpack 如何同时输出压缩和未压缩的文件的实现步骤

Jun 05 Javascript

Vue如何实现监听组件原生事件

Jul 03 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中养成7个面向对象的好习惯

2010/01/28 PHP

PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)

2012/04/02 PHP

js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

2013/07/18 PHP

PHP管理依赖(dependency)关系工具 Composer 安装与使用

2014/08/18 PHP

推荐一款PHP+jQuery制作的列表分页的功能模块

2014/10/14 PHP

php判断两个浮点数是否相等的方法

2015/03/14 PHP

PHP的APC模块实现上传进度条

2015/10/27 PHP

php图片裁剪函数

2018/10/31 PHP

function foo的原型与prototype属性解惑

2010/11/19 Javascript

写JQuery插件的基本知识

2013/11/25 Javascript

JavaScript获取XML数据附示例截图

2014/03/05 Javascript

JavaScript检查数字是否为整数或浮点数的方法

2015/06/09 Javascript

jQuery实现网页顶部固定导航效果代码

2015/12/24 Javascript

javascript实现右侧弹出“分享到”窗口效果

2016/02/01 Javascript

微信小程序获取二维码实例详解

2017/06/23 Javascript

详解vue项目接入微信JSSDK的坑

2018/12/14 Javascript

vue element-ui之怎么封装一个自己的组件的详解

2019/05/20 Javascript

layer更改皮肤的实现方法

2019/09/11 Javascript

Python压缩和解压缩zip文件

2015/02/14 Python

Python编程实现的图片识别功能示例

2017/08/03 Python

python OpenCV学习笔记实现二维直方图

2018/02/08 Python

django数据库migrate失败的解决方法解析

2018/02/08 Python

Python实现二叉树的最小深度的两种方法

2019/09/30 Python

python打印n位数“水仙花数”(实例代码)

2019/12/25 Python

Python递归调用实现数字累加的代码

2020/02/25 Python

python正则表达式的懒惰匹配和贪婪匹配说明

2020/07/13 Python

免费获得微软MCSD证书赶快行动吧！

2012/11/13 HTML / CSS

Under Armour美国官网：美国知名高端功能性运动品牌

2016/09/05 全球购物

全球性的女装店：storets

2019/06/12 全球购物

应届专科生个人的自我评价

2014/01/05 职场文书

养殖项目策划书范文

2014/01/13 职场文书

美发店5.1活动方案

2014/01/24 职场文书

会计实训报告范文

2014/11/04 职场文书

在 Golang 中实现 Cache::remember 方法详解

2021/03/30 Python

Pytorch中Softmax与LogSigmoid的对比分析

2021/06/05 Python

python运算符之与用户交互

2022/04/13 Python