html php照片墙代码,javascript实现了照片拖拽点击置顶的照片墙代码_javascript技巧...

演示图

styles.css

*{ /*清空所有元素默认的外边距和内边距*/

}

.photo_wall{

background:url(bg.jpg); /*定义照片墙的默认背景*/

background-size:cover; /*使照片墙的背景填充照片墙*/

width:1200px; /*设置照片墙的宽高*/

height:500px;

margin:40px auto; /*设置照片墙的外边距*/

display:-webkit-box; /*使用CSS3的盒模型之流式布局*/

display:-moz-box;

display:box;

-webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/

-moz-box-align:center;

box-align:center;

-webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/

-moz-box-pack:center;

box-pack:center;

}

.photo_wall .photo_frame{

text-align:center; /*照片内的文字都是居中显示*/

padding:10px 10px 30px 10px; /*定义照片的内补白*/

background-color:#f2eada; /*设置照片的背景颜色*/

font-size:.8em; /*照片内文字的大小*/

box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/

}

.photo_frame p{

margin-top:10px; /*设置照片内显示文字段落的外上边距*/

}

#photo01{

position:fixed;top:90px;left:50px;

-webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/

-moz-transform-origin:right bottom;

transform-origin:right bottom;

-webkit-transform:rotate(10deg); /*以基点为轴，在2D空间内顺时针旋转10度*/

-moz-transform:rotate(10deg);

-o-transform:rotate(10deg);

transform:rotate(10deg);

position:absolute;

}

#photo02{

position:fixed;top:100px;left:300px;

-webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/

-moz-transform-origin:right bottom;

transform-origin:right bottom;

-webkit-transform:rotate(-20deg); /*以基点为轴，在2D空间内逆时针旋转20度*/

-moz-transform:rotate(-20deg);

-o-transform:rotate(-20deg);

transform:rotate(-20deg);

position:absolute;

}

#photo03{

position:fixed;top:80px;left:750px;

-webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/

-moz-transform-origin:left top;

transform-origin:left top;

-webkit-transform:rotate(40deg); /*以基点为轴，在2D空间内顺时针旋转40度*/

-moz-transform:rotate(40deg);

-o-transform:rotate(40deg);

transform:rotate(40deg);

position:absolute;

}

#vedio1{

position:fixed;top:250px;left:950px;

-webkit-transform-origin:right top; /*定义照片3的旋转基点为 左上角*/

-moz-transform-origin:right top;

transform-origin:right top;

-webkit-transform:rotate(-100deg); /*以基点为轴，在2D空间内顺时针旋转40度*/

-moz-transform:rotate(50deg);

-o-transform:rotate(-50deg);

transform:rotate(50deg);

position:absolute;

}

div{cursor:move;}

#top

{

right:0;top:0;

width:100px;

height:100%;

position:fixed;

padding:10px;

text-align:center;

font-weight:bold;

background:#f2eada;

opacity:0.9;

}

drag.js

var zIndex = 1;

window.onload = function ()

{

var x=document.getElementsByName("photo");

for(var i=0;i= maxL && (iL = maxL);

iT >= maxT && (iT = maxT);

oDrag.style.left = iL + "px";

oDrag.style.top = iT + "px";

return false;

};

document.onmouseup = function ()

{

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();

return false

}

}

picwall.html



Document

面对两侧金色的树木，内心莫名的喜悦！

作者: 纤上陌

很遗憾两颗心画在了沙滩上

作者: 她留我走

野花也要精彩

作者: Love&Peace

您的浏览器不支持 video 标签。

嘉和秋季运动会

作者:忽左忽右

所用到的图片

以上所述就是本文的全部内容了，希望能够对大家熟练掌握javascript有所帮助。

本文原创发布php中文网，转载请注明出处，感谢您的尊重！