javascript实现了照片拖拽点击置顶的照片墙代码_javascript技巧
程序员文章站
2022-04-08 12:06:19
...
演示图
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 面对两侧金色的树木,内心莫名的喜悦!
作者: 纤上陌
很遗憾两颗心画在了沙滩上
作者: 她留我走
野花也要精彩
作者: Love&Peace
嘉和秋季运动会
作者:忽左忽右
所用到的图片
以上所述就是本文的全部内容了,希望能够对大家熟练掌握javascript有所帮助。
上一篇: mysql的锁机制_MySQL
下一篇: 关于order by的一些用法