用鼠标与指尖
让互联网更加有趣

利用js实现随机背景显示,每次访问背景图都不一样

这篇文章主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现网页随机切换背景图片的方法。分享给大家供大家参考。具体实现方法如下:

首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量。

把准备好的图像全部放到一个目录下,且格式统一,名字前缀也要统一,名字后缀用数字按照图片总数量按顺序一个一个的命名,参考我的:

推荐格式:前缀名_数字.jpg
利用js实现随机背景显示,每次访问背景图都不一样-小伟博客这些图片在网站指定的一个目录下喔,推荐新建一个目录存储。

然后参考你网站页面的背景图css样式,用js输出你网站相同的css样式,并集成到以下js代码中:

//<!CDATA[
        var randomBgIndex =  parseInt(121*Math.random());
		document.write('<style> body.login{background: rgba(255, 255, 255, 0.0) url("图片目录路径/前缀名'+ randomBgIndex +'.jpg"); background-size:100% 100%; background-repeat:no-repeat;}</style>');
    //]]>

注明:121是图片总数量,randomBgIndex是取得0到总数量之间的随机数,<style>到</style>是输出的css背景样式,请根据你网站背景css样式修改。

然后把修改好的js代码添加到页面底部Body之前就OK了。

注意合理调节图片尺寸和质量避免网页加载过慢。建议单个图片500kb以内,尺寸1920*1080,且css定义背景图完全拉伸不平铺。

小伟博客网原创,转载请注明出处,谢谢。

小伟博客网 http://www.mlwei.com

支付宝扫码打赏 微信扫码打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

未经允许不得转载:小伟博客 » 利用js实现随机背景显示,每次访问背景图都不一样

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小伟博客 · 给你感兴趣的内容

联系我们官方交流群