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有所帮助。

(0)

相关推荐

  • Android瀑布流照片墙实现 体验不规则排列的美感

    传统界面的布局方式总是行列分明.坐落有序的,这种布局已是司空见惯,在不知不觉中大家都已经对它产生了审美疲劳.这个时候瀑布流布局的出现,就给人带来了耳目一新的感觉,这种布局虽然看上去貌似毫无规律,但是却有一种说不上来的美感,以至于涌现出了大批的网站和应用纷纷使用这种新颖的布局来设计界面. 记得我在之前已经写过一篇关于如何在Android上实现照片墙功能的文章了,但那个时候是使用的GridView来进行布局的,这种布局方式只适用于"墙"上的每张图片大小都相同的情况,如果图片的大小参差不齐,

  • Android照片墙应用实现 再多的图片也不怕崩溃

    照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影.它的设计思路其实也非常简单,用一个GridView控件当作"墙",然后随着GridView的滚动将一张张照片贴在"墙"上,这些照片可以是手机本地中存储的,也可以是从网上下载的.制作类似于这种的功能的应用,有一个非常重要的问题需要考虑,就是图片资源何时应该释放.因为随着GridView的滚动,加载的图片可能会越来越多,如果没有一种合理的机制对图片进行释放,那么当图片达到一定上限时,程序就必然

  • 基于jQuery实现照片墙自动播放特效

    一个动态展示图片的页面: 功能:定时从后台取数据,进行页面图片追加.对已经在页面中的图片,进行放大缩小动画展示.目前我们用于微信新关注用户头像展示. <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1

  • javascript制作照片墙及制作过程中出现的问题

    本文主要做了一个照片墙,整个制作过程,主要需要解决一下几个问题: 1.如何进行布局转换? 2.如何对图片进行拖拽处理? 3.如何检测图片碰撞问题?进行碰撞检测 4.当多个图片进行碰撞,如何取其中距离对象最小的物体? 5.如何将相互碰撞的两个物体的位置相互交换?涉及到运动的类库 代码如下: <html> <head> <style> body{background:black;margin: 0;padding: 0;color: white;font-size: 50p

  • js实现超酷的照片墙展示效果图附源码下载

    这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3

  • js实现照片墙功能实例

    本文实例讲述了js实现照片墙功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">     <head>         <meta charset="utf-8">     

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

    演示图 styles.css *{ /*清空所有元素默认的外边距和内边距*/ } .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:500px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ dis

  • Javascript实现登录框拖拽效果

    本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下 需求分析 1.点击弹出登录框 2.在登录框的特定区域可以将登录框拖拽至任意位置 3.可以关闭登录框,并且下一次点击弹出登录框归位 具体实现 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="

  • JavaScript实现简单的拖拽效果

    本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.先搭架子: * { margin: 0; padding: 0; } p { background: skyblue; text-align: center; } html, body { width: 100%; height: 100%; } .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; backgro

  • JavaScript实现模态框拖拽效果

    在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标

  • javascript实现登录框拖拽

    本文实例为大家分享了javascript实现登录框拖拽的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <title></title>     <style>         .login-header {             widt

  • JavaScript实现的简单拖拽效果

    本文实例讲述了JavaScript实现的简单拖拽效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • Android中RecyclerView拖拽、侧删功能的实现代码

    废话不多说,下面展示一下效果. 这是GridView主文件实现. public class GridViewActivity extends AppCompatActivity { RecyclerView mRecyclerView; List<String> mStringList; RecyclerAdapter mRecyAdapter; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { s

  • javascript动画之模拟拖拽效果篇

    先看看实现效果图, 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 原理介绍 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的 假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和x2.元素距离视口左上角x轴和y轴分别为x0和y0 鼠标移动的某一时刻,clientX和clientY分别为x2和y2 所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1 元素移动后,元素距离视口左上角x轴和y轴的

  • HTML+CSS+JavaScript实现j可拖拽模态框

    前言 模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的模态框.只对 JS 部分详解,HTML 和 CSS 会放在文章底部的源代码中! JavaScript详解 整体效果是由以下几个事件构成: 点击立即登录按钮,弹出遮罩层和模态框. 点击小叉号关闭模态框和遮罩层. 鼠标在模态框的标题上按下时,计算鼠标在模态框中的坐标. 给整个HTML文档添加鼠标移动事件

  • Javascript实现重力弹跳拖拽运动效果示例

    演示地址: http://www.ihuxu.com/project/gcdmove/ 调用示例: var GCDM = gcdMove(oDiv,100,0); GCDM.startMove();//开始运动 GCDM.stopMove();//结束运动 该段JS代码已经封装好了,代码如下: 简要说明 - obj为要改动的对象元素,通常为某个div:iSpeedX,iSpeedY为div出师的横向(右侧),竖向(下)的初始速度,当然也可以设为零. 复制代码 代码如下: /** * @Desc

随机推荐