JavaScript 网页背景图片随机化
单调的网站首页背景看多了不免有写厌烦，如果用户自己每刷新一次页面背景可以更换也许能为这种单调添一丝的新奇。这只需用一个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); }
图片路径要换成你项目中的图片路径。