CSS3在背景图方面新增了很多有趣的特性,其中一个就是随机背景图。随机背景图可以让网站看起来更加有活力和新鲜感,下面我们来了解一下如何实现随机背景图。
/* 随机背景图 */ function getRandomImage(){ var images = ['bg1.jpg','bg2.jpg','bg3.jpg']; // 存储背景图的文件名 var size = images.length; var x = Math.floor(size * Math.random()); var element = document.getElementById('background'); //获取要设置背景的元素 element.style.backgroundImage = "url('img/" + images[x] + "')"; // 设置随机背景图 }
以上代码是一个简单的JavaScript函数,其中包含三张背景图文件名。我们首先获取这些文件名的大小,然后使用JavaScript中的Math.random()方法来获取0到1之间的随机数,再用Math.floor()方法将其转换为整数。然后我们将获取到的整数作为数组索引,从背景图文件名数组中获取一个随机元素,最后将其设置为背景图。
接下来我们可以为元素添加一个事件监听器,使其在页面加载时调用'getRandomImage()'函数:
window.onload = function(){ getRandomImage(); }
现在我们已经成功地实现了CSS3随机背景图。如果你想要改变背景图,请将images数组中的文件名修改为你自己的文件名,然后尽情享受随机背景图带来的乐趣吧!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。