我正在为我工作的公司制作扩展/折叠通话费率表.我目前有一个桌子,下面有一个按钮来展开它,按钮显示"展开".它是有用的,除了我需要按钮在单击时更改为"折叠",然后当再次单击时更改为"展开".按钮上的书写是背景图像.
所以我基本上只需要在点击时更改div的背景图像,除了类似切换之外.
Nic*_*ick 433
$('#divID').css("background-image", "url(/myimage.jpg)");
应该做的伎俩,只需在元素上的单击事件中将其挂钩
$('#divID').click(function()
{
// do my image switching logic here.
});
小智 61
我个人只会使用JavaScript代码在两个类之间切换.
让CSS概述你在div上需要的一切MINUS背景规则,然后添加两个类(例如:展开和折叠)作为规则,每个类具有正确的背景图像(或者如果使用精灵,则为背景位置).
CSS与不同的图像
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
或者带有图像精灵的CSS
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
然后...
带图像的JavaScript代码
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
带精灵的JavaScript
注意:优雅的toggleClass在Internet Explorer 6中不起作用,但下面的addClass/ removeClass方法在这种情况下也能正常工作
最优雅的解决方案(遗憾的是Internet Explorer 6不友好)
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
据我所知,这种方法适用于浏览器,我觉得使用CSS和类比使用脚本中的URL更改更舒服.
Ecr*_*lis 42
使用jQuery更改背景图像CSS有两种不同的方法.
$('selector').css('backgroundImage','url(images/example.jpg)');$('selector').css({'background-image':'url(images/example.jpg)'});仔细看看差异.在第二种情况下,您可以将常规CSS和多个CSS属性串联起来.
Dav*_*ard 17
如果对背景图像使用CSS精灵,则可以根据您是在展开还是折叠来碰撞背景偏移+/- n像素.不是切换,而是比切换背景图像URL更接近它.
Lou*_*pax 14
我是这样做的:
CSS
#button{
background-image: url("initial_image.png");
}
#button.toggled{
background-image:url("toggled_image.png");
}
JS
$('#button').click(function(){
$('#my_content').toggle();
$(this).toggleClass('toggled');
});
ale*_*206 10
一种方法是将两个图像放在HTML中,在SPAN或DIV中,您可以使用CSS或在页面加载时使用JS隐藏默认值.然后你可以切换点击.这是我用来在列表中放置左/下图标的类似示例:
$(document).ready(function(){
$(".button").click(function () {
$(this).children(".arrow").toggle();
return false;
});
});
<a href="#" class="button">
<span class="arrow">
<img src="/images/icons/left.png" alt="+" />
</span>
<span class="arrow" style="display: none;">
<img src="/images/down.png" alt="-" />
</span>
</a>
这适用于WinXP上的所有当前浏览器.基本上只是检查当前的背景图像是什么.如果是image1,则显示image2,否则显示image1.
jsapi的东西只是从谷歌CDN加载jQuery(更容易测试桌面上的misc文件).
替换是针对跨浏览器兼容性(opera和ie添加引号到url和firefox,chrome和safari删除引号).
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';
$('.mydiv').click(function() {
if ($(this).css('background-image').replace(/"/g, '') == original_image) {
$(this).css('background-image', second_image);
} else {
$(this).css('background-image', original_image);
}
return false;
});
});
</script>
<style>
.mydiv {
background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="mydiv"> </div>
</body>
</html>
小智 5
我使用正则表达式做了我的，因为我想保留一个相对路径而不是使用 addClass 函数。我只是想让它变得复杂，哈哈。
$(".travelinfo-btn").click(
function() {
$("html, body").animate({scrollTop: $(this).offset().top}, 200);
var bgImg = $(this).css('background-image')
var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
if(bgImg.match(/collapse/)) {
$(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
} else {
$(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
$(this).next(".travelinfo-item").stop().slideToggle(400);
}
}
);
我的动画：
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
| 归档时间： |
|
| 查看次数： |
794979 次 |
| 最近记录： |