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


Posted in Javascript onApril 03, 2015

演示图

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<x.length;i++)
  {
    drag(x[i]);
    //alter(x[i].value);
  }
  //var oDrag1 = document.getElementById("photo01");
  //var oDrag2 = document.getElementById("photo02");
  //var oDrag3 = document.getElementById("photo03");
  //var oDrag4 = document.getElementById("vedio1");
  //drag(oDrag1);
  //drag(oDrag2);
  //drag(oDrag3);
  //drag(oDrag4);
};
var cengshu=0;
function drag(oDrag)
{
  var disX = dixY = 0;
  oDrag.onmousedown = function (event)
  {
    var event = event || window.event;
    disX = event.clientX - this.offsetLeft;
    disY = event.clientY - this.offsetTop;   
    oDrag.style.position='fixed';
    oDrag.style.zIndex=cengshu++;
    //var oTemp = document.createElement("div");
    //oTemp["id"] = "temp";
    //oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)["left"];
    //oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)["top"];
    //oTemp.style.zIndex = zIndex++;
    //document.body.appendChild(oTemp);
     
    document.onmousemove = function (event)
    {
      var event = event || window.event;
      var iL = event.clientX - disX;
      var iT = event.clientY - disY;
      var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
      var maxT = document.documentElement.clientHeight - oDrag.offsetHeight
       
      iL <= 0 && (iL = 0);
      iT <= 0 && (iT = 0);
      iL >= 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

<!DOCTYPE html>
<html>
<head>
  <style>
    div
    {
      cursor: move;
    }
  </style>
  <link href="styles.css" rel="stylesheet">
  <script type="text/javascript" src="drag.js"></script>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
</head>
<body class="photo_wall">
  <div name = "photo" class="photo_frame" id="photo01" name="dr">
    <img src="30554.jpg" width="350" height="200" alt="fuck you">
    <p>
      面对两侧金色的树木,内心莫名的喜悦!</p>
    <p>
      作者: 纤上陌</p>
  </div>
  <div name = "photo" class="photo_frame" id="photo02" name="dr">
    <img src="30774.jpg" width="350" height="200" alt="fuck you">
    <p>
      很遗憾两颗心画在了沙滩上</p>
    <p>
      作者: 她留我走</p>
  </div>
  <div name = "photo" class="photo_frame" id="photo03" name="dr">
    <img src="30729.jpg" width="350" height="200" alt="fuck you">
    <p>
      野花也要精彩</p>
    <p>
      作者: Love&Peace</p>
  </div>
  <div name = "photo" class="photo_frame" id="vedio1" name="dr">
    <video src="VID_20141106_145936.mp4" controls="controls" width="350" height="200" alt="fuck you">您的浏览器不支持 video 标签。</video>
    <p>嘉和秋季运动会</p>
    <p>作者:忽左忽右</p>
  </div>
</body>
</html>

所用到的图片

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

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

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

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

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

Javascript 相关文章推荐
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
JavaScript函数模式详解
Nov 07 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
Javascript代码实现仿实例化类
Apr 03 #Javascript
使用Jquery实现每日签到功能
Apr 03 #Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 #Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 #Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 #Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 #Javascript
JavaScript获取网页表单action属性的方法
Apr 02 #Javascript
You might like
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
python 串行执行和并行执行实例
2020/04/30 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
工厂总经理岗位职责
2014/02/07 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
大学生实习介绍信
2015/05/05 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书