我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它,按钮说“展开”。它是功能性的,除了我需要按钮改变为“折叠”时,它被点击,然后当然回到“展开”时,再次点击。按钮上的文字是背景图像。
所以基本上我所需要的是改变一个div的背景图像时,它被点击,除了有点像一个切换。
当前回答
这是一个相当简单的响应,使用项目列表更改网站的背景
function randomToN(maxVal) {
var randVal = Math.random() * maxVal;
return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
其他回答
$('#divID').css("background-image", "url(/myimage.jpg)");
应该这样做,只是在元素上的点击事件中连接它吗
$('#divID').click(function()
{
// do my image switching logic here.
});
一种方法是把两个图像放在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>
CSS精灵效果最好。我尝试切换类和使用jQuery操纵'background-image'属性,没有工作。我认为这是因为浏览器(至少是最新的稳定Chrome)不能“重新加载”已经加载的图像。
好处:CSS精灵下载和显示速度更快。更少的HTTP请求意味着更快的页面加载。减少HTTP的数量是提高前端性能的最佳方法,所以我建议一直走这条路。
我的是动画:
$(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)
});
});
我是这样做的:
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');
});