使用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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
js输出列表实现代码
Sep 12 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Vue封装全局过滤器Filters的步骤
Sep 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绘图之生成饼状图的方法
2015/01/24 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHPMailer发送邮件
2016/12/28 PHP
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python3将变量输入的简单实例
2020/08/19 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
python 装饰器的使用示例
2020/10/10 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
初中化学教学反思
2014/01/23 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
保护环境倡议书范文
2014/05/13 职场文书
法制演讲稿
2014/09/10 职场文书
离婚财产分配协议书
2014/10/21 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
入党宣誓大会后的感想
2015/08/10 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
windows系统安装配置nginx环境
2022/06/28 Servers