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 相关文章推荐
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 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批量删除数据
2007/01/18 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python算术运算符实例详解
2017/05/31 Python
python爬虫基本知识
2018/03/05 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
毕业论文致谢词
2015/05/14 职场文书
联谊会开场白
2015/06/01 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
商业计划书格式、范文
2019/03/21 职场文书
python编写五子棋游戏
2021/05/25 Python
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
python实现简易自习室座位预约系统
2021/06/30 Python
node快速搭建后台的实现步骤
2022/02/18 NodeJs