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 相关文章推荐
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
JS数据类型判断的几种常用方法
Jul 07 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python编程中NotImplementedError的使用方法
2018/04/21 Python
对python中的pop函数和append函数详解
2018/05/04 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python如何进入交互模式
2020/07/06 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
python中的unittest框架实例详解
2021/02/05 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
个人廉洁自律承诺书
2014/03/27 职场文书
关爱留守儿童标语
2014/06/18 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年组织部工作总结
2015/04/03 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Moment的feature导致线上bug解决分析
2022/09/23 Javascript