jQuery使用一个按钮控制图片的伸缩实现思路


Posted in Javascript onApril 19, 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"> 
var count = 0; 
$(function () { 
$('#Button1').click(function () { 
if (count % 2 != 0) { 
$('#img1').hide(5000); 
} 
else { 
$('#img1').show(5000); 
} 
count++; 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<img id="img1" src="images/1.jpg" /> 
<input id="Button1" type="button" value="点我看看" /> 
</div> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
Javascript实现的类似Google的Div拖动效果代码
Aug 09 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 #Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 #Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 #Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 #Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 #Javascript
jQuery阻止同类型事件小结
Apr 19 #Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
You might like
PHP多文件上传实例
2015/07/09 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
基于jquery实现左右上下移动效果
2018/05/02 jQuery
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
python实现socket客户端和服务端简单示例
2014/02/24 Python
深入理解python try异常处理机制
2016/06/01 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
基于Django实现日志记录报错信息
2019/12/17 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
python实现canny边缘检测
2020/09/14 Python
python中pickle模块浅析
2020/12/29 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
总账会计岗位职责
2014/03/13 职场文书
工程部岗位职责范本
2015/04/11 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android