使用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 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Three.js基础学习之场景对象
Sep 27 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
使用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数据访问
2016/05/09 PHP
浅谈htmlentities 、htmlspecialchars、addslashes的使用方法
2016/12/09 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
给Python初学者的一些编程技巧
2015/04/03 Python
python简单的函数定义和用法实例
2015/05/07 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Oracle性能调优原则
2012/05/03 面试题
毕业生求职简历的自我评价
2013/10/23 职场文书
简历的自荐信
2013/12/19 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL