失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 简洁风个人主页(3) js背景图片随机切换

简洁风个人主页(3) js背景图片随机切换

时间:2019-10-12 18:34:52

相关推荐

简洁风个人主页(3) js背景图片随机切换

静态页面做完了,现在用js做一个背景图片随机切换的效果。

1.点击‘个人网站'这个字样,实现body背景的切换。所以,首先获取这两个节点。

var body = document.body;var change_btn = document.getElementById("change_btn");

2.添加change_btn的onclick点击事件,在点击事件中 写获取随机图片路径 的方法image_url( ),代码解释见注释

change_btn.onclick = function(){var image_url = function(){//获取随机图片的路径方法var image_path = "img/images/";//定义背景图片的路径常量部分;var image_index =parseInt(Math.floor(Math.random()*75));//用random函数获取范围在0-75的随机数字并向下取整//转化成int数值类型return image_path+image_index+'.jpg';//利用字符串拼接返回图片路径};

完整js代码:

window.onload = function(){var body = document.body;var change_btn = document.getElementById("change_btn");change_btn.onclick = function(){var image_url = function(){//获取随机图片的路径方法var image_path = "img/images/";//定义背景图片的路径常量部分;var image_index =parseInt(Math.floor(Math.random()*75));//用random函数获取范围在0-75的随机数字并向下取整//转化成int数值类型return image_path+image_index+'.jpg';//利用字符串拼接返回图片路径};body.style.background = 'url('+image_url()+')';};}

注意:

1.随机图片是根据随机产生的数字来查找对应的图片路径。所以,图片以数字+图片格式命名。

2.常规访问图片用相对路径,js是外联文件,与图片不在同级目录中,需要在img文件夹前加 '../'。其实,js在查找图片时是根据包来查找的,加上‘../’反而不能正常显示图片。这点很重要。

css与js引用图片的路径问题参考文章:点击打开链接

如果觉得《简洁风个人主页(3) js背景图片随机切换》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。