js背景图片随机切换效果实现教程
程序员文章站
2022-04-06 11:59:55
静态页面做完了,现在用js做一个背景图片随机切换的效果。
1.点击‘个人网站'这个字样,实现body背景的切换。所以,首先获取这两个节点。
var body = docume...
静态页面做完了,现在用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在查找图片时是根据包来查找的,加上‘../’反而不能正常显示图片。这点很重要。
上一篇: JS 监听回车事件的简单解决
下一篇: JS精度丢失问题记录和解决方式