JavaScript 网页背景图片随机化

最新推荐文章于 2024-03-16 17:51:24 发布

DNN-2017

最新推荐文章于 2024-03-16 17:51:24 发布

阅读量2.3k

点赞数

分类专栏： CSS JavaScript 文章标签： javascript class url features wrapper xhtml

本文链接：https://blog.youkuaiyun.com/jjjjj102310253/article/details/3993467

版权

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

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

下面是JavaScript代码：

<mce:script type="text/javascript"></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"></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"></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); }

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