HTML5页面背景切换

使用js主要代码：

一、切换body图片

//定义一个存放照片位置的数组，可以放任意个，在这里放3个
var arr = new Array();
arr[0] = "images/1.jpg";
arr[1] = "images/2.jpg";
arr[2] = "images/3.jpg";
arr[3] = "images/4.jpg";
arr[4] = "images/5.jpg";
setInterval(changeImg, timeInterval);
function changeImg() {
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}

//设置body的背景图片
document.body.style.backgroundImage = "URL("+arr[curIndex]+")"; //显示对应的图片
}

</script>

二、切换div背景

//定义一个存放照片位置的数组，可以放任意个，在这里放3个
var arr = new Array();
arr[0] = "img/1.jpg";
arr[1] = "img/2.jpg";
arr[2] = "img/3.jpg";
setInterval(changeImg, timeInterval);
function changeImg() {

//获得id名为d1的对象
var obj = document.getElementById("d1");
if (curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
//设置d1的背景图片
obj.style.backgroundImage= "URL("+arr[curIndex]+")"; //显示对应的图片
}
</script>

HTML5页面背景切换相关推荐

【VBA自用常用模板2】WORD/WPS办公宏实现切换页面背景/切换页面视图
对接上一自用模板,为功能有切换页面护眼绿().切换页面视图.模拟快捷键点击,可以为其添加快捷键 Sub 切换页面护眼绿()If (ActiveDocument.Background.Fill.Fore ...
html5页面图片切换,HTML5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
css设置背景图片随滚动缓慢滚动_h5页面背景图很长要有滚动条滑动效果的实现...
最近做项目过程中,老大提了个很奇葩的要求背景图铺满页面,他要求有滚动条可以滑动,他给我讲的思路是用js 获取背景图片的高,在获取当前窗口的高,两者比较,当窗口的高小于背景图片的高,把窗口的高设置成背 ...
HTML5系列代码：设置页面背景图像
background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复. 提示:请设 ...
html5 猫特效,html5特效-css3页面元素切换墨水喷墨效果
css3页面元素切换墨水喷墨效果,层元素弹出关闭时超好看的墨水喷墨特效,下载:层元素弹出关闭时超好看的墨水喷墨特效完整源码下载密码: qm34 下面是预览图 CSS3墨水喷墨特效 style.cs ...
jQuery带背景切换登录注册表单
jQuery带背景切换登录注册表单原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...
html加减中间的值不能修改,在移动HTML5页面input类型采用number无法控制长度，以及右边显示难看的加减按钮...
场景: 这是之前做的移动web控件时遇到的问题.当时在我们控件的HTML5页面需要输入卡号.CV2.手机号.验证码等信息.大家都知道这些值都是数字.普通类型的输入框,当我们点击时,手机默认掉起的键盘 ...
Php点击更换封面,JavaScript_js实现点击图片改变页面背景图的方法，本文实例讲述了js实现点击图 - phpStudy...
js实现点击图片改变页面背景图的方法本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下: 点击图片即改变页面的背景图片希望本文所述对大家的javascrip ...
纯CSS3模拟iPhone X背景切换动画
尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的.今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景 ...

HTML5页面背景切换

HTML5页面背景切换相关推荐

最新文章

热门文章