需求:每次刷新頁面,隨機獲取背景圖
實現方式:
1 通過js動態生成標簽
<body>
<script type="text/javascript">
var bodyBgs = [];
bodyBgs[0] = "/cas/img/login/bg/load1.jpg";
bodyBgs[1] = "/cas/img/login/bg/load2.jpg";
var randomBgIndex = Math.round( Math.random() * 1 );
document.write('<div class="col-left" style="background: url(' + bodyBgs[randomBgIndex] + ') no-repeat"></div>');
</script>
</body>
缺點:雖然可以滿足功能要求,但是在body中插入js,無論從代碼簡潔性還是用戶體驗都不太好;
2 jquery替換參數
根據標簽的不同,有兩種方式可以實現功能:
- div標簽,通過css定義背景圖參數
頁面標簽:
<div id="imgload" class="col-left"></div>
jquery實現:
$().ready(function(){ var myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg"); var randomNum=Math.floor(Math.random()*myPix.length); $("#imgload").css('background', 'url('+myPix[randomNum]+') no-repeat'); };
- 通過attr(),替換src參數
頁面標簽:
<img id="imgload">
jquery實現:
$().ready(function() { ar myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg"); var randomNum=Math.floor(Math.random()*myPix.length); $("#imgload").attr('src', myPix[randomNum]); });
jquery參數替換方式較好一些,js代碼可以整體維護,頁面也比較簡潔;