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 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
jQuery动态添加
Apr 07 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php中Socket创建与监听实现方法
2015/01/05 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
python温度转换华氏温度实现代码
2020/12/06 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
食堂员工工作职责
2013/12/18 职场文书
物流仓管员工作职责
2014/01/06 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
民主生活会发言材料
2014/10/20 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python