演示



styles.css


*清空默认边距和填充的所有元素。

}

photo_wall {。
背景：URL（jpg）；定义默认的背景墙照片。
背景尺寸：封面；填充背景照片墙照片*
宽度：1200px； / *的照片和路雪的宽度和高度。
身高：500px；
保证金：40px汽车； / *设置照片墙外。
显示：- WebKit箱；箱模型流动布局使用CSS3 / *
显示：-moz盒；
显示：框；
Webkit框对齐：中心； / *在垂直方向的中心位置，内部元件盒模型定义。
-moz盒对齐：中心；
框对齐：中心；
WebKit的纸盒包装：中心； / *在水平方向的中心位置，内部元素的盒模型的定义。
-moz包：中心；
包装盒：中心；
}

。photo_wall。photo_frame {
文本对齐：居中；文本内的图片居中。
填充：30px 10px 10px 10px； / * * /定义图片填充
背景颜色：# f2eada； / * * /设置背景颜色的照片
字体大小：。8em； / * * /图片文字大小
盒子的影子：。2em.2em.8em # 130c0e； / *添加阴影效果的图片，立体。
}

photo_frame p {。

边距：10px； / *设置图片显示文字的边缘。
}
# photo01 {
位置：固定；顶部：90px；左：50px；
WebKit的变换起源：右下； / *定义图1在旋转点右下角。
-moz变换起源：右下；
转换原点：右下角；
WebKit的旋转变换：（10度）； / *在二维空间点轴顺时针旋转10度。
-moz变换：旋转（10度）；
- o-transform：旋转（10度）；
旋转变换：（10度）；
位置：绝对；
}

# photo02 {
位置：固定；顶部：100px；左：300px；
WebKit的变换起源：右下；旋转角度定义2为照片 / * * /右下角
-moz变换起源：右下；
转换原点：右下角；
WebKit的旋转变换：（- 20deg）； / *点在二维空间轴逆时针旋转20度。
-moz变换：旋转（- 20deg）；
- o-transform：旋转（- 20deg）；
变换：旋转（- 20deg）；
位置：绝对；
}

# photo03 {
位置：固定；上：左：750px 80px；
WebKit的变换起源：左上；定义3照片 / *左上角的旋转点。
-moz变换起源：左上；
转换原点：左上角；
WebKit的变换：旋转（40deg）； / *在二维空间点轴顺时针旋转40度。
-moz变换：旋转（40deg）；
- o-transform：旋转（40deg）；
变换：旋转（40deg）；
位置：绝对；
}
# vedio1 {
位置：固定；顶部：250px；左：950px；
WebKit的变换起源：右上；定义3照片 / *左上角的旋转点。
-moz变换起源：右上；
转换原点：右上角；
WebKit的旋转变换：（- 100deg）； / *在二维空间点轴顺时针旋转40度。
-moz变换：旋转（50deg）；
- o-transform：旋转（- 50deg）；
变换：旋转（50deg）；
位置：绝对；
}

游标：移动；}
#顶
{
右：0；顶部：0；
宽度：100px；
身高：100%；
位置：固定；
填料：10px；
文本对齐：中心；
字体粗细：粗体；
背景：# f2eada；
不透明性：0.9；
}


drag.js


VaR在= 1；
在window.onload =功能（）
{
var x = document.getelementsbyname（照片）；
对于（var i = 0；i < x.length；i++）
{
拖动（x { }）；
更改（x . } . value）；
}
/ /无功odrag1 = document.getelementbyid（photo01 ）；
/ /无功odrag2 = document.getelementbyid（photo02 ）；
/ /无功odrag3 = document.getelementbyid（photo03 ）；
//var oDrag4 = document.getElementById (vedio1);
/ /阻力（odrag1）；
/ /阻力（odrag2）；
/ /阻力（odrag3）；
/ /阻力（odrag4）；
}；
无功cengshu = 0；
拖曳功能（odrag）
{
VaR disx = DIXY = 0；
odrag.onmousedown =函数（事件）
{
var =事件| | window.event事件；
event.clientx - this.offsetleft disx =；
event.clienty - this.offsettop Disy =；
ODrag。位置=固定的风格；
ODrag的风格。在cengshu + + =；
/ /无功otemp = document.createelement（div）；
/ / otemp {id=温度；
/ / otemp.style.left = this.currentstyle这。currentstyle {左}：（这getcomputedstyle，null）{左}；
/ / otemp.style.top = this.currentstyle这。currentstyle {顶}：（这getcomputedstyle，null）{顶}；
/ / otemp.style.zindex = zIndex + +；
/ / document.body.appendchild（otemp）；

document.onmousemove =函数（事件）
{
var =事件| | window.event事件；
VaR IL = event.clientx - disx；
var = event.clienty -迪西；
VaR最大值= document.documentelement.clientwidth - odrag.offsetwidth；
VaR MaxT = document.documentelement.clientheight - odrag.offsetheight

IL＝0（IL＝0）；
它< = 0（= 0）；
白细胞介素（IL = > =最大值最大值）；
> = MaxT（= MaxT）；

odrag.style.left = IL +PX；
odrag.style.top =它+PX；
返回false；
}；

document.onmouseup =功能（）
{
document.onmousemove = null；
document.onmouseup = null；
odrag.style.left = otemp.style.left；
odrag.style.top = otemp.style.top；
odrag.style.zindex = otemp.style.zindex；
document.body.removechild（otemp）；
odrag.releasecapture odrag.releasecapture（）
}；

this.setcapture this.setcapture（）；
返回false
}
}


picwall.html






DIV
{
光标移动；
}








文件





面对着金色的树，心中有着无法形容的喜悦！

作者




遗憾的是，在海滩上画了两颗心。

作者：她让我离开。




野花也很好。

作者：爱与和平


您的浏览器不支持视频标签。
嘉禾秋季运动会
作者：忽左忽右





图片使用









以上是本文的全部内容，希望能帮助您熟练掌握javaｓｃｒｉｐｔ。