您的位置：首页 > Web前端 > JavaScript

JavaScript 网页背景图片随机化

2009-03-16 09:30 501 查看

单调的网站首页背景看多了不免有写厌烦，如果用户自己每刷新一次页面背景可以更换也许能为这种单调添一丝的新奇。这只需用一个JavaScript方法就可以搞定，通过随机函数在我们的一组图片中随机的选一张作为背景。

下面是JavaScript代码：

<mce:script type="text/javascript"><!--
// Add a class to the body tag to alternate background features
var class_options = new Array( "variation1", "variation2", "variation3" );

if (Math.random) {
var choice = Math.floor(Math.random() * (class_options.length));

// Just in case javascript gets carried away...
choice = ( (choice < class_options.length) && choice >= 0) ? choice : 0;

if (document.body.className == '') {
document.body.className = class_options[choice];
} else {
document.body.className += ' '+class_options[choice];
}
}
// --></mce:script>

完整代码：（asp.net C#）

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>随机背景图片</title>

<mce:style type="text/css"><!--
body#home {
background-image: url(./img/tignish/home/background-tile.jpg);
}

body#home {
background-position: top center;
}

#wrapper {
min-width: 950px;
height:500px;
background-position: top center;
background-repeat: no-repeat;

margin:0;
padding:0;
}

body#home.variation1 #wrapper { background-image: url(./img/tignish/home/feature-background-1.jpg); }
body#home.variation2 #wrapper { background-image: url(./img/tignish/home/feature-background-2.jpg); }
body#home.variation3 #wrapper { background-image: url(./img/tignish/home/feature-background-3.jpg); }

--></mce:style><style type="text/css" mce_bogus="1">        body#home {
background-image: url(./img/tignish/home/background-tile.jpg);
}

body#home {
background-position: top center;
}

#wrapper {
min-width: 950px;
height:500px;
background-position: top center;
background-repeat: no-repeat;

margin:0;
padding:0;
}

body#home.variation1 #wrapper { background-image: url(./img/tignish/home/feature-background-1.jpg); }
body#home.variation2 #wrapper { background-image: url(./img/tignish/home/feature-background-2.jpg); }
body#home.variation3 #wrapper { background-image: url(./img/tignish/home/feature-background-3.jpg); }

</style>
</head>
<body id="home" class="js platform-windows variation2">
<mce:script type="text/javascript"><!--
// Add a class to the body tag to alternate background features
var class_options = new Array( "variation1", "variation2", "variation3" );

if (Math.random) {
var choice = Math.floor(Math.random() * (class_options.length));

// Just in case javascript gets carried away...
choice = ( (choice < class_options.length) && choice >= 0) ? choice : 0;

if (document.body.className == '') {
document.body.className = class_options[choice];
} else {
document.body.className += ' '+class_options[choice];
}
}
// --></mce:script>

<div id="wrapper">
 </div>
<%--  <form id="form1" action="">
</form>--%>
</body>
</html>

        body#home.variation1 #wrapper { background-image: url(./img/tignish/home/feature-background-1.jpg); }
        body#home.variation2 #wrapper { background-image: url(./img/tignish/home/feature-background-2.jpg); }
        body#home.variation3 #wrapper { background-image: url(./img/tignish/home/feature-background-3.jpg); }

图片路径要换成你项目中的图片路径。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript class url features wrapper xhtml

相关文章推荐

新的分享

章节导航