Ge1doot.js超酷3D立体照片墙
查看源代码以及演示请登录:http://www.sucaihuo.com/js/447.html
HTML
<canvas id="canvas"></canvas>
引入ge1doot.js3D相册插件
<script type="text/javascript" src="js/ge1doot.js"></script>
自定义图片代码,大约在index.html第260行
imgdata:[
// north
{img: 'imgs/1.jpg', x: -1000, y: 0, z: 1500, nx: 0, nz: 1},
{img: 'imgs/2.jpg', x: 0, y: 0, z: 1500, nx: 0, nz: 1},
{img: 'imgs/3.jpg', x: 1000, y: 0, z: 1500, nx: 0, nz: 1},
]
1、插入背景图片有两种方法,一种是用html的img标签,另一种是利用css的background标签插入。具体操作是首先新建一个html文件,写入两个div,分别用来演示两种方法插入标签:
2、首先是用html标签插入图片,这里直接在img标签中使用src属性就可以插入图片路径就成功了:
3、接着是用css插入,在div中设置class属性为img2,在script标签中使用background标签插入,其中url是标签的路径,no-repeat是设置图片不重复,center是设置照片居中显示:
4、最后给这些标签都设置一些样式,让它们显得美观一些。然后打开浏览器查看效果:
5、打开浏览器,可以看到照片都显示出来了。以上就是html插入照片的方法介绍: