js实现照片墙功能实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

本文实例讲述了js实现照片墙功能的方法。分享给大家供大家参考。具体实现方法如下:

<title>图片拖拽</title>
<style type="text/css">
body,ul{
margin:0px;
padding:0px;
}
.box{
position:relative;
width:380px;
height:380px;
margin:100px auto;
border:1px solid black;
}
.box ul li{
margin:20px 0 0 20px;
width:100px;
height:100px;
list-style:none;
float:left;
}
.box ul li img{
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<ul class="imgWrapper">
<li><img src="1.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="2.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="3.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="4.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="5.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="6.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="7.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="8.jpg" alt="" width="100px" height="100px" /></li>
<li><img src="9.jpg" alt="" width="100px" height="100px" /></li>
</ul>
</div>

复制代码 代码如下:

<script type="text/javascript">

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml"&gt;
    <head>
        <meta charset="utf-8">
        <title>js照片墙</title>
        <meta http-equiv="X-UA-Compatible" content="edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="Keywords" content="js照片墙">
        <meta name="description" content="js照片墙">
        <link href="css/style.css" rel="stylesheet">
        <script src="move.js"></script>
        <style>
            *{padding: 0; margin: 0;}
            li{list-style: none;}
            ul{width: 660px; height:510px; background:#ccc;margin: 20px auto;}
            li{width:200px; height: 150px; margin: 10px; float: left; }
        </style>
        <script>
        /*
            var arr=['a','b','c','d','e','d','f'];
            var pos = arr.lastIndexOf('d');
            alert(pos);
            */
            window.onload=function(){
                var aLi = document.querySelectorAll('li');
                var oInput =  document.querySelector('#btn');
                var pos = [];
                var len= aLi.length;
                var izIndex= 2;
                //布局转换

//全局变量一定要少定义
//容易出错 还占内存

                for(var i=0;i<len;i ){
                    pos.push([aLi[i].offsetLeft,aLi[i].offsetTop]);
                }
                for(var i=0;i<len;i ){
                    aLi[i].style.left=pos[i][0] 'px';
                    aLi[i].style.top=pos[i][1] 'px';
                    aLi[i].style.position = 'absolute';
                    aLi[i].style.margin = '0px';
                }
                for(var i=0;i<len;i ){
                     aLi[i].index = i;
                     setDrag(aLi[i]);
                }
                oInput.onclick=function(){
                    var randomArr = [0,1,2,3,4,5,6,7,8];
                    randomArr.sort(function(num1,num2){
                        return Math.random()-0.5;
                    })
                    for(var i=0;i<len;i ){
                        //增加随机位置的情况
                       startMove(aLi[i],{left:pos[randomArr[i]][0],top:pos[randomArr[i]][1]});
                       //修正索引
                       aLi[i].index = randomArr[i];
                    }
                }
                //拖拽
                function setDrag(obj){
                    obj.onmousedown =function(ev){
                        izIndex ;
                        obj.style.zIndex= izIndex;
                        var ev = ev || event;
                        var disX = ev.clientX - obj.offsetLeft;
                        var disY = ev.clientY - obj.offsetTop;
                        document.onmousemove=function(ev){
                            var ev = ev || event;
                            obj.style.left =  ev.clientX- disX 'px';
                            obj.style.top =  ev.clientY - disY 'px';
                            for(var i=0; i<len; i ){
                                aLi[i].style.border='none';
                            }
                            var nL = nearLi(obj);
                            if(nL){
                                nL.style.border='2px solid red';
                            }                         
                        }
                        document.onmouseup= function(){
                            document.onmousemove = null;
                            document.onmouseup = null;
                            var nL = nearLi(obj);
                            if(nL){
                                nL.style.border='2px solid red';
                                startMove(obj,{left:pos[nL.index][0],top:pos[nL.index][1]});
                                startMove(nL,{left:pos[obj.index][0],top:pos[obj.index][1]});
                                var tmp =nL.index;
                                nL.index = obj.index;
                                obj.index = tmp;
                                nL.style.border='';
                            }else{
                                startMove(obj,{left:pos[obj.index][0],top:pos[obj.index][1]});
                            }
                        }
                        return false;
                    }
                }
                //检测是否有碰撞
                function isDump(obj1,obj2){
                    var l1= obj1.offsetLeft;
                    var r1= l1 obj1.offsetWidth;
                    var t1= obj1.offsetTop;
                    var b1 =obj1.offsetHeight t1;

/*图标拖拽
1.如果想让图标移动 那就得把浮动布局改为浮动布局
1.1

                    var l2= obj2.offsetLeft;
                    var r2= l2 obj2.offsetWidth;
                    var t2= obj2.offsetTop;
                    var b2 =obj2.offsetHeight t2;
                    if(b2<t1 || l2>r1 || r2<l1 || t2>b1){
                        return false;
                    }else{
                        return true;
                    }
                }
                //寻找最近的节点
                function nearLi(obj){
                    var index= -1;
                    var value =9999;
                   for(var i=0; i<len; i ){
                        if(isDump(obj,aLi[i]) && obj !=aLi[i]){
                            var c = getDis(obj,aLi[i]);
                            if(c <value){
                                value = c;
                                index = i;
                            }
                        }
                    }
                    if(index !=-1){
                        return aLi[index];
                    }else{
                        return false;
                    }
                }
                function getDis(obj1,obj2){
                    var x = obj1.offsetLeft - obj2.offsetLeft;
                    var y = obj1.offsetTop - obj2.offsetTop;
                    return  Math.sqrt(Math.pow(x,2) Math.pow(y,2));
                }
            }
        </script>
    </head>
    <body>
    <button id="btn">click</button>
        <ul>
            <li><img src="1l.jpg" width="200px" height="150px"></li>
            <li><img src="2l.jpg" width="200px" height="150px"></li>
            <li><img src="3l.jpg" width="200px" height="150px"></li>
            <li><img src="4l.jpg" width="200px" height="150px"></li>
            <li><img src="5l.jpg" width="200px" height="150px"></li>
            <li><img src="6l.jpg" width="200px" height="150px"></li>
            <li><img src="1l.jpg" width="200px" height="150px"></li>
            <li><img src="2l.jpg" width="200px" height="150px"></li>
            <li><img src="4l.jpg" width="200px" height="150px"></li>
        </ul>
    </body> 
</html>

操作系统和浏览器是多线程(伪多线程)

希望本文所述对大家的javascript程序设计有所帮助。

是在非常短的时间内执行单个线程比如1um
比如一秒内就可以完成多个单线程
而JS是单线程
当四个任务让浏览器执行的时候
因为是单线程 谁执行快返回谁
所以 写的代码有的时候和返回的而结果不一样

您可能感兴趣的文章:

2.当鼠标点住一张图片的时候 图片可以拖动(鼠标移动)
2.1事件代理 点击事件 //有点行不通
2.1 onmousedown onmousemove onmouseup
循环给每个li元素加上
2.2 记录点击的那个位置 两次鼠标位置相减 加上自身偏移量 都会改变left top值
让图片跟着鼠标走

3.在拖动图片的时候碰撞检测

3.1 计算与周围的图标的距离 距离最短的那个图片添加border
3.2如果没有检测到 则松开鼠标的时候 图片回到原始位置
3.3当松开鼠标的时候 图片位置平滑交换

3.4
*/

//获取元素的时候 不是数组 要转化为数组 或者 把所需要的内容添加到自定义数组中
var liList=document.querySelectorAll(".box ul li ");//伪数组
var imgWrapper=document.querySelector(".imgWrapper");
var nearElement=null;
var arr=Array.prototype.slice.call(liList);
var liPos=[];
var sign=[];
var num=1;
var control=false;

function deleteBorder(arr){

for(var i=0,item;item=arr[i ];){

arr[i-1].style.border="";

}

}

function pos(){

/*设置比获取速度要快

如果想让设置之在获取之后就要让他的执行速度变慢
可以用定时器 定时器 要注意闭包作用域的问题

函数立执行
*/

for( var j=0,len=arr.length;j<len;j ){

liPos.push([arr[j].offsetLeft,arr[j].offsetTop]);

//函数自执行
(function(n){
setTimeout(function(){
arr[n].style.position="absolute"; //把浮动改成定位

arr[n].style.left=liPos[n][0] "px"; //重新设置位置

arr[n].style.top=liPos[n][1] "px";

arr[n].style.margin="0";//margin设置为0 不然会有两个margin距离
},0);
})(j);

}
}
pos();

//mousedown mouseover mouseup

//给每个li添加事件
for(var i=0,item;item=arr[i ];){

//给元素添加index属性
arr[i-1].index=i-1;
drag(arr[i-1]);

}

//拖拽
function drag(obj){

obj.onmousedown=function(e){
e.preventDefault();
var oldX=e.offsetX;
var oldY=e.offsetY;
num;
obj.style.zIndex=num;

obj.onmousemove=function(e){

var newX=e.offsetX;
var newY=e.offsetY;

obj.style.left=(newX-oldX obj.offsetLeft) "px";

obj.style.top=(newY-oldY obj.offsetTop) "px";
for(var i=0,len=arr.length;i<len;i ){

if(!impact(obj,arr[i])&&obj!=arr[i]){
if(!impact(obj,arr[i])){

//记录下碰撞成功的元素
sign.push(arr[i]);
}
else{

//没有碰撞的话元素边框消失
arr[i].style.border="";
}

本文由美洲杯赌球发布于计算机教程,转载请注明出处:js实现照片墙功能实例

TAG标签: 美洲杯赌球
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。