Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
更新时间:2013年04月11日 15:42:56 作者:
电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢,jquery的tab切换式浏览却可以解决这个问题
我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢?
我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏。于是就有了题目说的这个问题。
其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结。
这里我想到了两种方法,给大家分享一下。
好了不多说,下面看代码:
第一种,是常规的方法:
[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]
复制代码 代码如下:
$(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属性。
下面是效果图:(待补充)
相关文章
jQuery获取Radio,CheckBox选择的Value值(示例代码)
这篇文章主要是对jQuery获取Radio,CheckBox选择的Value值进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12jquery ui resize 中border-box的bug修正
本文给大家分享的是jQuery ui resize中的一个样式的小bug的解决方法,官方并没有修复,这里推荐给大家,有需要的小伙伴可以参考下。2015-04-04jquery imgareaselect 使用利用js与程序结合实现图片剪切
当前在ff3下,用jquery的 width()与height()函数,在不设置图片的宽度与高度的时候,不能取到 需要在图片load函数里面初始化才可以2009-07-07
最新评论