博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html 刷新更新背景图
阅读量:6247 次
发布时间:2019-06-22

本文共 783 字,大约阅读时间需要 2 分钟。

需求:每次刷新页面,随机获取背景图

实现方式:

1 通过js动态生成标签

    

  缺点:虽然可以满足功能要求,但是在body中插入js,无论从代码简洁性还是用户体验都不太好;

2 jquery替换参数

根据标签的不同,有两种方式可以实现功能:

  • div标签,通过css定义背景图参数

  页面标签:

  
  

  jquery实现:

  $().ready(function(){      var myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg");      var randomNum=Math.floor(Math.random()*myPix.length);      $("#imgload").css('background', 'url('+myPix[randomNum]+') no-repeat');  };

 

  • 通过attr(),替换src参数

  页面标签:

  

  jquery实现:

  $().ready(function() {      ar myPix = new Array("/cas/img/login/bg/load1.jpg","/cas/img/login/bg/load2.jpg");      var randomNum=Math.floor(Math.random()*myPix.length);      $("#imgload").attr('src', myPix[randomNum]);  });

jquery参数替换方式较好一些,js代码可以整体维护,页面也比较简洁;

转载于:https://www.cnblogs.com/chengmuyu/p/9958965.html

你可能感兴趣的文章
我的友情链接
查看>>
我的友情链接
查看>>
森森的测试
查看>>
nat 转换 vrrp热备份 端口跟踪
查看>>
Linux crontab调用脚本中的ifconfig命令返回为空
查看>>
Linux解决Device eth0 does not seem to be present
查看>>
php 冒泡排序法
查看>>
seaJs原理分析和源码解读(上)
查看>>
docker学习记录(二)--安装docker并配置镜像源
查看>>
HTML5 localStorage本地存储实际应用举例
查看>>
python之装饰器
查看>>
华为ensp实验拓扑一熟悉常用的IP相关命令拓扑
查看>>
mysql双主复制模型
查看>>
U8860 华为荣耀各种刷机教程
查看>>
Java使用"指针"快速比较字节
查看>>
Tomcat配置性能管理服务--Elastic APM Server
查看>>
这些年正Android - Traveling 第一章001
查看>>
Oracle备份与恢复(五)
查看>>
处理电脑蓝屏步骤
查看>>
虚拟桌面的备份恢复最佳实践 第二部分
查看>>