Jquery实现点击切换图片并隐藏显示内容(2种方法实现)


Posted in Javascript onApril 11, 2013

我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢?
我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏。于是就有了题目说的这个问题。

其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结。

这里我想到了两种方法,给大家分享一下。
好了不多说,下面看代码:

第一种,是常规的方法
[javascript]

$(function(){ 
var images = ['images/up.png', 'images/down.png'] 
$(img).onClick(function(){ 
if($(img).attr("class")=="up"){ 
$(img).attr("src",images[1]); 
$(img).removeClass(); 
}else{ 
$(img).attr("src",images[0]); 
$(img).addClass("up"); 
} 
}); 
}) 
<img src="images/up.png" class="up"> 
$(function(){ 
var images = ['images/up.png', 'images/down.png'] 
$(img).onClick(function(){ 
if($(img).attr("class")=="up"){ 
$(img).attr("src",images[1]); 
$(img).removeClass(); 
}else{ 
$(img).attr("src",images[0]); 
$(img).addClass("up"); 
} 
}); 
}) 
<img src="images/up.png" class="up">

这里主要是给图片控件注册一个点击事件,点击的时候添加CSS控制(css主要设置是否显示某部分内容),同时更换图片。

第二种方法:使用arguments.callee.em ^= 1自动选择数组参数
[javascript]

functionchangeimg() { 
//换图片 
var images = ['images/up.png','images/down.png'] 
var imgupdown =document.getElementById("hideimg"); 
imgupdown.src = images[arguments.callee.em^= 1]; 
//隐藏下方的div 
var content =$(".hidecontent"); 
//根据display属性判断该进行的操作 
if (content.css("display")!= "none") { 
content.slideUp("slow"); 
} else { 
content.slideDown("slow"); ; 
} 
} 
functionchangeimg() { 
//换图片 
var images = ['images/up.png','images/down.png'] 
var imgupdown =document.getElementById("hideimg"); 
imgupdown.src = images[arguments.callee.em^= 1]; 
//隐藏下方的div 
var content =$(".hidecontent"); 
//根据display属性判断该进行的操作 
if (content.css("display")!= "none") { 
content.slideUp("slow"); 
} else { 
content.slideDown("slow"); ; 
} 
}

这里将图片地址放到了一个数组中,异或运算,自动选择数组参数,实现图片的切换。
内容的隐藏显示,则使用了.css属性。
下面是效果图:(待补充)
Javascript 相关文章推荐
JQueryEasyUI datagrid框架的基本使用
Apr 08 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
在javascript中关于节点内容加强
Apr 11 #Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 #Javascript
jQuery实用基础超详细介绍
Apr 11 #Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 #Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 #Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 #Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 #Javascript
You might like
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
js实现抽奖功能
2020/11/24 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
python 调试冷知识(小结)
2019/11/11 Python
python dataframe NaN处理方式
2019/12/26 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
保研推荐信
2014/05/09 职场文书
安全横幅标语
2014/06/09 职场文书
工会积极分子个人总结
2015/03/03 职场文书
实习证明格式范文
2015/06/16 职场文书
新郎结婚感言
2015/07/31 职场文书
Go 语言结构实例分析
2021/07/04 Golang
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL