Question

我想在页面加载时使用小jquery制作带有随机图像的标题。我找到了这段代码

<script type="text/javascript">
 var path = '{$base_dir}img/header/',
 imgs = ['h1.jpg', 'h2.jpg', 'h3.jpg', 'h4.jpg', 'h5.jpg'],
 i = Math.floor(Math.random()*imgs.length);
 $('.random').append("<img src='"+path+imgs[i]+"'>").hide().fadeIn(500);        
</script>

我的标题如下：

<div id="header_container">
    <div id="header_body"> 
        <a id="header_logo"></a>
    </div>
</div>

编译后，smarty模板站点源代码如下所示：

<div id="header_container">
    <div id="header_body"> 
        <a id="header_logo"></a>
    </div>
    <img src="http://xxx/img/header/h3.jpg">
</div>

它不好，因为我需要用随机图像填充“header_containter”应该是那样的

<div id="header_container" style="background: url(http://xxx/img/header/h3.jpg) no-repeat center top !important;">
    <div id="header_body"> 
        <a id="header_logo"></a>
    </div>
</div>

所以我想通过jquery或其他方式添加css样式属性？有什么想法吗？

Answer 1

是的，您可以这样使用.css方法：

$(selector).css('property', 'value');

在您的情况下，这将是：

$("#header_container").css('background', "url('http://xxx/img/header/h3.jpg') no-repeat center top;");

随意编辑，这应该指向正确的方向。

最佳。

Answer 2

您可以使用：

$('myOjbect').css('background-image', 'url(' + imageUrl + ')');

另请阅读更多http://api.jquery.com/css/

Answer 3

你的图像名称应该是1.jpg，2.jpg，3.jpg .....

然后使用jquery你可以做这样的事情。每次将图像中的一个设置为图像列表中的6个背景图像。 根据需要更改图像路径。

$( document ).ready(function() {
    var numOfImages = 6;
    var imageName = 1 + Math.floor(Math.random() * numOfImages )+ ".jpg";
    $('#divID').css("background-image", "url(/"+imageName+")"); 
});

工作小提琴：http://jsfiddle.net/cF8fQ/1/

Answer 4

您可以使用jQuery轻松设置内联css值。

$("#header_container").css({
    "background": "url('your-image.jpg') 50% 50% no-repeat",
    "background-size": "cover"
});

这也使用css3属性background-size:cover来确保图像完全覆盖标题区域。这可能不适用于旧浏览器。

通过jquery添加css样式值

4 个答案: