打开菜单中工具--->页面信息---->媒体
其实这个功能几个月前都实现了,但是写法有些问题,打算修改下,换个写法。
思路
提取网站下的images里的background文件夹里6张图里的随机取一张图,作为网页背景。
js直接放在了header.php尾部。
用在自己网站的代码
bg_img= ['<?php $this->options->themeUrl('images/background/1.jpg'); ?>',
'<?php $this->options->themeUrl('images/background/2.jpg'); ?>',
'<?php $this->options->themeUrl('images/background/3.jpg'); ?>',
'<?php $this->options->themeUrl('images/background/4.jpg'); ?>',
'<?php $this->options->themeUrl('images/background/5.jpg'); ?>',
'<?php $this->options->themeUrl('images/background/6.jpg'); ?>']; //调用图片路径(我网站模板是用的themeUrl函数获取当前模板路径,根据实际情况决定怎么写)
document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";
不用php也可以这样写
bg_img = ["http://xxxx/1.jpg",
"http://xxx/2.jpg",
"http://xxx/3.jpg",
"http://xxx/4.jpg",
"http://xxx/5.jpg",
"http://xxx/6.jpg"]; //调用图片地址/路径(改为自己的)
document.getElementsByTagName("body")[0].style.background = "url("+bg_img[Math.floor(Math.random()*(bg_img.length))]+")";//随机背景图
document.getElementsByTagName("body")[0].style.backgroundPosition = "center";
document.getElementsByTagName("body")[0].style.backgroundRepeat = "no-repeat";
document.getElementsByTagName("body")[0].style.backgroundAttachment = "fixed";
写的时候遇到的问题
开始错用了document.body ,发现这个除了IE,其他浏览器都不认。
改为了document.getElementsByTagName。
开始为了图方便 把JS文件放到头部了。导致执行这个js的时候,body还没有出现的情况,一般js要放在html末尾(
后)关于getElementsByTagName()
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
语法document.getElementsByTagName(tagname)
返回值
类型:NodeList 对象,描述:指定标签名的元素集合
浏览器支持
所有主要浏览器都支持 getElementsByTagName() 方法
我要左侧的背景,按下F12键,就出来一个开发者界面,找到 sources,资源一般都是在这个目录下,找到 image,逐一点开,所有图片都在,挑你要的就好了,然后右击,选择 save,轻松搞定~
打开菜单中工具--->页面信息---->媒体
转载于:https://my.oschina.net/hongjiang/blog/3074295
在最近学习JavaWeb时,总是需要获得网页上的图片,但有时候不是所有的图片都能直接右击“另存为”,比如说背景图片。在这里,不同的浏览器有不同的方式,但是大体上没什么差别。相信会了一种就会其他的了。
在这里提供两种方式(参考别人的) http://jingyan.baidu.com/article/870c6fc32f6b8fb03fe4bee9.html,分别是360和火狐浏览器获得的背景图片的方式,请参考。
我用的猎豹浏览器。方法如下:1.右击“审查元素”,在出来的网页代码中,选择<div id="banner"></div>的下面,接下来的方法估计需要保存照片的一定有能力自己找到方法,就是找到背景图片background的URL,打开URL,会在网页中显示背景图片。
在这里,就不在提供太多图片了。比较简单,可以参考我给的链接。
后来的保存图片的方法和普通方式相同,就是右击图片另存为。