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

演示图

styles.css

*{ /*清空所有元素默认的外边距和内边距*/} .photo _ wall {背景： URL(BG。jpg)；/*定义照片墙的默认背景*/背景尺寸：封面；/*使照片墙的背景填充照片墙*/宽度：1200 px/*设置照片墙的宽高*/高度：500 px余量：40px汽车；/*设置照片墙的外边距*/display :-web套件-盒子；/*使用CSS3的盒模型之流式布局*/显示：-moz-box；display : box-web kit-box-align : center；/*定义盒模型内部元素在垂直方向上居于中间位置*/-moz-box-align :中心；box-对齐：中心；-web套件-box-pack 3360中心；/*定义盒模型内部元素在水平方向上居于中间位置*/-moz-box-pack 3360中心；盒装3360中心；} .照片墙photo _ frame { text-align : center；/*照片内的文字都是居中显示*/padd :10 px 10px 30px 10px；/*定义照片的内补白*/底色： # F2 eada/*设置照片的背景颜色*/font-size :8 em；/*照片内文字的大小*/盒影：2 em。2em。8em # 130 c0e/*给照片添加阴影效果，富有立体感*/} .photo _ frame p { margin-top :10 px；/*设置照片内显示文字段落的外上边距*/} # photo 01 {位置：固定；top:90pxleft:50px-web套件-转换-origin :右下方；/*定义照片一的旋转基点为右下角*/-moz-transform-origin :右下方；转换原点：右下方；-web工具包-transform :旋转(10度);/*以基点为轴，在2D空间内顺时针旋转10度*/-moz-变压器：旋转(10度);表示“具有…性质的”型变压器：旋转(10度);变压器：旋转(10度);位置：绝对；} # photo 02 { position : fixed top :100 pxleft :300 px-web套件-transform-origin :右下方；/*定义照片2的旋转基点为右下角*/-moz-transform-origin :右下方；转换原点：右下方；-web套件-transform :旋转(-20)；/*以基点为轴，在2D空间内逆时针旋转20度*/-moz-transform :旋转(-20度);表示“具有…性质的”型变压器：旋转(-20度);变压器：旋转(-20度);位置：绝对；} # photo 03 { position : fixed top :80 pxleft 3360750 px-web kit-transform-origin :左上角；/*定义照片3的旋转基点为左上角*/-moz-transform-origin :左上；变换原点：左上；-网络套件-transform :旋转(40度);/*以基点为轴，在2D空间内顺时针旋转40度*/-moz-变压器：旋转(40度);表示“具有…性质的”型变压器：旋转(40度);变压器：旋转(40度);位置：绝对；} # vedio 1 { position : fixed top :250 pxleft :950 px-web套件-transform-origin :右上方；/*定义照片3的旋转基点为左上角*/-moz-transform-origin :右上方；转换原点：右上方；-web套件-transform :旋转(-100)；/*以基点为轴，在2D空间内顺时针旋转40度*/-moz-变压器：旋转(50度);表示“具有…性质的”型变压器：旋转(-50度);变压器：旋转(50度);位置：绝对；} div { cursor : move } # top { right :0 top :0宽度宽度：100像素高度：100%;位置：固定；padding:10px文本对齐：居中；字体粗细：加粗；背景# f2eadaopacity:0.9}drag.js

var zIndex=1；窗户。onload=function(){ var x=document。getelementsbyname(' photo ')；for(var I=0；九。长度；I){ drag(x[I])；//alter(x[i]).值);}//var odrag 1=文档。getelementbyid(' photo 01 ')；//var odrag 2=文档。getelementbyid(' photo 02 ')；//var odrag 3=文档。getelementbyid(' photo 03 ')；//var odrag 4=文档。getelementbyid(' vedio 1 ')；//拖动(odrag 1)；//拖动(odrag 2)；//拖动(odrag 3)；//拖动(odrag 4)；};var曾数=0；函数拖动(oDrag){ var DIsX=DIxy=0；奥德拉格。onmousedown=function(event){ var event=event | | window。事件；disX=事件。client x-这个。offsetleftdisY=事件。客户-这个。偏移顶部；' oDrag.style.position='固定；奥德拉格。风格。zindex=曾叔；//var OteMP=文档。create element(' div ')；//OTeMP[' id ']=' temp '；//otemp。风格。左=这个。当前样式？这个。current style[' left ']: getComputedStyle(this，null)[' left ']；//otemp。风格。top=这个。当前样式？这个。current style[' top ']: getComputedStyle(this，null)[' top ']；//otemp。风格。zIndex=zIndex//文档。尸体。append child(OteMP)；文件。onmousemove=function(event){ var event=event | | window。事件；var iL=事件。客户端x-DIsX；var iT=事件。client y-DIsy；var MaxL=文档。文档元素。客户端宽度-odrag。在两者之间；var maxT=文档。文档元素。客户端高度-odrag。offset thight ILl=0(ILl=0)；iT=0(iT=0)；iL=MaxL(iL=MaxL)；iT=MaxT(iT=MaxT)；奥德拉格。风格。left=iL ' px奥德拉格。风格。top=iT ' px返回false }；文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nullodrag。风格。left=OteMP。风格。向左；奥德拉格。风格。top=OteMP。风格。顶部；奥德拉格。风格。zindex=OteMP。风格。zindex文件。尸体。移除子对象(OteMP)；奥德拉格。释放捕获odrag。release capture()}；这个。设置捕获这个。setcapture()；返回false } }picwall.html

！DOCTYPE html html头部样式div {光标：移动；}/style link href=' style。CSS ' rel='样式表'脚本类型=' text/JavaScript ' src=' http :拖动。js /脚本元字符集='UTF-8 '元名称='发电机'内容='EditPlus '元名称='作者'内容=' meta名称='关键字'内容=' meta名称='描述'内容=' title文档/title/head dy class=' photo _ wall ' div名称=' photo ' class=' photo _ frame ' id=' photo 00面对两侧金色的树木，内心莫名的喜悦！/p p作者： 纤上陌/p/div div name=' photo ' class=' photo _ frame ' id=' photo 02 ' name=' dr ' img src=' http :30774。jpg ' width=' 350 ' height=' 200 ' alt='去你妈的p很遗憾两颗心画在了沙滩上/p p作者： 她留我走/p/div div name=' photo ' class=' photo _ frame ' id=' photo 03 ' name=' dr ' img src=' http :30729。jpg ' width=' 350 ' height=' 200 ' alt='去你妈的p野花也要精彩/p p作者： love peace/p/div name=' photo ' class=' photo _ frame ' id=' vedio 1 ' name=' dr ' video src=' Http : vid _ 20141106 _ 145936。MP4 ' controls=' controls ' width=' 350 ' height=' 200 ' alt='去你的'您的浏览器不支持录像标签/视频p。嘉和秋季运动会/p p作者：忽左忽右/p /div/body/html所用到的图片

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