使用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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
phpmyadmin操作流程
2006/10/09 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
js实现日期级联效果
2014/01/23 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python3 拼接字符串的7种方法
2018/09/12 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
爱国主义教育演讲稿
2014/08/26 职场文书
停水通知
2015/04/16 职场文书
公司回复函格式
2015/07/14 职场文书
求职自我评价参考范文
2019/05/16 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫
Oracle使用别名的好处
2022/04/19 Oracle