使用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"> 
.imgclass 
{ 
height:200px; 
width:200px; 
} 
.imgclass1 
{ 
width:210px; height:210px; 
} 
table tr td 
{ 
width:250px; height:250px; 
} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#Button1').click(function () { 
// 获取的是所有类型(tagname)为img的元素 
// $('img').show(3000); 
// $('img').hide(3000); 
// //获取的是所有class属性的值为“imgclass”的元素 
// $('.imgclass').hide(3000); 
// $('.imgclass').show(3000); 
// $("#img1, #img2, #Button1").hide(2000); 
// $("#img1, #img2, #Button1").show(2000); //一定是将所有id用一对''括起来,而不能每个id分别用引号括起来 
// //多个选择器既可以是id,也可以是id,tagname和classname的混合体 
// $("#img1, #img2, input").hide(2000); 
// $("#img1, #img2, input").show(2000); 
//改变图片样式 
$('#Button2').click(function () { 
// $('#img2').removeClass();//删除Id为img2的class样式 
$('#img2').addClass('imgclass1');//然后再添加一个样式,再次点击按钮操作图片时,由于此图片的样式已改,所以不发生变化 
}) 
}) 
}) 
</script> 
</head> 
<body> 
<table> 
<tr><td><img alt="" id="img1" src="images/1.jpg" class="imgclass" /></td><td><img alt="" id="img2" src="images/2.jpg" class="imgclass" /></td></tr> 
<tr><td><img alt="" id="img3" src="images/3.jpg" class="imgclass" /></td><td><img alt="" id="img4" src="images/4.jpg" class="imgclass" /></td></tr> 
<tr><td></td><td> 
<input id="Button1" type="button" value="点我啊" /></td></tr> 
<tr><td></td><td> <input id="Button2" type="button" value="改变控件样式" /></td></tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
Feb 28 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
JavaScript实现简单的计算器
Jan 16 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
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
删除节点的jquery代码
2014/01/13 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
微信小程序云开发之新手环境配置
2019/05/16 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
pandas string转dataframe的方法
2018/04/11 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
Sony C++笔试题
2013/03/10 面试题
什么是索引指示器
2012/08/20 面试题
学雷锋活动倡议书
2014/08/30 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
实习指导教师评语
2014/12/30 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
基层工作经历证明
2015/06/19 职场文书
读书笔记怎么写
2015/07/01 职场文书