欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-08 12:06:19
...
演示图

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
javascript实现了照片拖拽点击置顶的照片墙代码_javascript技巧

面对两侧金色的树木,内心莫名的喜悦!

作者: 纤上陌

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

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

作者: 她留我走

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

野花也要精彩

作者: Love&Peace

嘉和秋季运动会

作者:忽左忽右

所用到的图片

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

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

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

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

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