目录

一、history与location练习

1.1、案例一

二、open练习

2.3、open.html

三、Date对象练习

2.1、setFullYear

4.2、div实现的时钟

四、窗口练习

4.1、close关闭窗口

五、拖拽效果

一、history与location练习

1.1、案例一

二、open练习
2.1、Google.html









2.2、logo.html








2.3、open.html









三、Date对象练习
2.1、setFullYear








4.2、div实现的时钟






 
四、窗口练习
4.1、close关闭窗口















五、拖拽效果


      
样例- 拖拽页面元素
   Item #1 Item #2 Item #3 Item #4  Item #5 Item #6 Item #7 Item #8  Item #9 Item #10 Item #11 Item #12
  
var Demos       = [];
var nDemos      = 8;// Demo variables
// iMouseDown represents the current mouse button state: up or down
/*
lMouseState represents the previous mouse button state so that we can
check for button clicks and button releases:if(iMouseDown && !lMouseState) // button just clicked!
if(!iMouseDown && lMouseState) // button just released!
*/
var mouseOffset = null;
var iMouseDown  = false;
var lMouseState = false;
var dragObject  = null;// Demo 0 variables
var DragDrops   = [];
var curTarget   = null;
var lastTarget  = null;
var dragHelper  = null;
var tempDiv     = null;
var rootParent  = null;
var rootSibling = null;
var nImg        = new Image();nImg.src        = 'images/drag_drop_poof.gif';// Demo1 variables
var D1Target    = null;Number.prototype.NaN0=function(){return isNaN(this)?0:this;}function CreateDragContainer(){/*Create a new "Container Instance" so that items from one "Set" can notbe dragged into items from another "Set"*/var cDrag        = DragDrops.length;DragDrops[cDrag] = [];/*Each item passed to this function should be a "container".  Store eachof these items in our current container*/for(var i=0; i xPos) &&((parseInt(getAttribute('startTop'))  + parseInt(getAttribute('startHeight'))) > yPos)){/*our target is inside of our container so save the container intothe activeCont variable and then exit the loop since we no longerneed to check the rest of the containers*/activeCont = dragConts[i];// exit the for loopbreak;}}}// Our target object is in one of our containers.  Check to see where our div belongsif(activeCont){if(activeCont!=curTarget.parentNode){writeHistory(curTarget, 'Moved into '+activeCont.id);}// beforeNode will hold the first node AFTER where our div belongsvar beforeNode = null;// loop through each child node (skipping text nodes).for(var i=activeCont.childNodes.length-1; i>=0; i--){with(activeCont.childNodes[i]){if(nodeName=='#text') continue;// if the current item is "After" the item being draggedif(curTarget != activeCont.childNodes[i]                                                  &&((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth')))  > xPos) &&((parseInt(getAttribute('startTop'))  + parseInt(getAttribute('startHeight'))) > yPos)){beforeNode = activeCont.childNodes[i];}}}// the item being dragged belongs before another itemif(beforeNode){if(beforeNode!=curTarget.nextSibling){writeHistory(curTarget, 'Inserted Before '+beforeNode.id);activeCont.insertBefore(curTarget, beforeNode);}// the item being dragged belongs at the end of the current container} else {if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){writeHistory(curTarget, 'Inserted at end of '+activeCont.id);activeCont.appendChild(curTarget);}}// the timeout is here because the container doesn't "immediately" resizesetTimeout(function(){var contPos = getPosition(activeCont);activeCont.setAttribute('startWidth',  parseInt(activeCont.offsetWidth));activeCont.setAttribute('startHeight', parseInt(activeCont.offsetHeight));activeCont.setAttribute('startLeft',   contPos.x);activeCont.setAttribute('startTop',    contPos.y);}, 5);// make our drag item visibleif(curTarget.style.display!=''){writeHistory(curTarget, 'Made Visible');curTarget.style.display    = '';curTarget.style.visibility = 'hidden';}} else {// our drag item is not in a container, so hide it.if(curTarget.style.display!='none'){writeHistory(curTarget, 'Hidden');curTarget.style.display  = 'none';}}}// track the current mouse state so we can compare against it next timelMouseState = iMouseDown;// mouseMove targetlastTarget  = target;}if(Demos[2]){document.getElementById('MouseXPosition').value = mousePos.x;document.getElementById('MouseYPosition').value = mousePos.y;}if(dragObject){dragObject.style.position = 'absolute';dragObject.style.top      = mousePos.y - mouseOffset.y;dragObject.style.left     = mousePos.x - mouseOffset.x;}// track the current mouse state so we can compare against it next timelMouseState = iMouseDown;// this prevents items on the page from being highlighted while draggingif(curTarget || dragObject) return false;
}function mouseUp(ev){if(Demos[0] || Demos[4]){if(curTarget){writeHistory(curTarget, 'Mouse Up Fired');dragHelper.style.display = 'none';if(curTarget.style.display == 'none'){if(rootSibling){rootParent.insertBefore(curTarget, rootSibling);} else {rootParent.appendChild(curTarget);}}curTarget.style.display    = '';curTarget.style.visibility = 'visible';}curTarget  = null;}if(Demos[6] && dragObject){ev           = ev || window.event;var mousePos = mouseCoords(ev);var dT = dragObject.getAttribute('droptarget');if(dT){var targObj = document.getElementById(dT);var objPos  = getPosition(targObj);if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){var nSrc = targObj.getAttribute('newSrc');if(nSrc){dragObject.src = nSrc;setTimeout(function(){if(!dragObject || !dragObject.parentNode) return;dragObject.parentNode.removeChild(dragObject);dragObject = null;}, parseInt(targObj.getAttribute('timeout')));} else {dragObject.parentNode.removeChild(dragObject);}}}}dragObject = null;iMouseDown = false;
}function mouseDown(ev){ev         = ev || window.event;var target = ev.target || ev.srcElement;iMouseDown = true;if(Demos[0] || Demos[4]){if(lastTarget){writeHistory(lastTarget, 'Mouse Down Fired');}}if(target.onmousedown || target.getAttribute('DragObj')){return false;}
}function makeDraggable(item){if(!item) return;item.onmousedown = function(ev){dragObject  = this;mouseOffset = getMouseOffset(this, ev);return false;}
}function makeClickable(item){if(!item) return;item.onmousedown = function(ev){document.getElementById('ClickImage').value = this.name;}
}function addDropTarget(item, target){item.setAttribute('droptarget', target);
}document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup   = mouseUp;window.onload = function(){for(var i=0; i
 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

    收藏
    

    

        
        
标签：技术
        
    

    

        
                

            上一篇 >
            【Cadecne skill自学堂】——第一节：什么是skill？
        
                

            下一篇 >
            JavaScript WebAPI 实战
        
                
    

    

        
        

            
相关文章
        
                

            
Duilib中list控件支持ctrl和shif多行选中的实现
        
                

            
[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif
        
                

            
win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法
        
                

            
Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif
        
                

            
读LDD3，内存映射与DMA--PAGE_SHIF…
        
                

            
VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】
        
                

            
更换iBus五笔的左与右Shif
        
                

            
sublime ctrl+shif+f 没用解决办法
        
                

            
idea 对 ctrl + z 的撤销 是 ctrl + shif + z
        
                

            
计算机最早的设计师应用于,计算机应用基础选择题doc.doc
        
                

            
win10自带截图神器：Win+Shift+S
        
                

            
Python基础之文件目录操作
        
                

            
python简述目录_Python基础之文件目录操作(示例代码)
        
                

            
tp5 如何做数据采集
        
                

            
任务2-7(服务器字体+阿里巴巴矢量库)
        
                

            
html标签（1)：h1~h6,p,br,pre,hr
        
                

            
TI 电量计介绍与芯片选型指南
        
                

            
几款TI电源芯片简介
        
                

            
TI DSP芯片C2000系列读取FLASH数据
        
                

            
德州仪器(Ti)平台嵌入式开发基础
        
                

            
TI三相电机智能栅极驱动芯片特点分类
        
                

            
省选模拟（12.08） T3 圈圈圈圈圈圈圈圈
        
                

            
Hadoop生态圈技术栈（上）
        
                

            
大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询
        
                

            
小猿圈之Linux下Mysql 操作命令
        
                

            
大数据Hadoop生态圈常用面试题
        
                

            
大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作
        
                

            
备战Noip2018模拟赛11（B组）T3 Monogatari 物语
        
                

            
【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码
        
                

            
NYOJ 78 圈水池
        
                

            
递归问题 跑道 汽车 绕圈问题 Python实现
        
                

            
Hadoop生态圈（三）：MapReduce
        
                
    

    

        
        
        立即
投稿
    
    
    

        
        

            

                
                
                
                
            
        
    

        
        
        

            

            
微信公众账号
            
微信扫一扫加关注
        
    
    
    
        
        返回
顶部
    
    
 
1 2 3 4 5 6 下一页 
返回 
前进
刷新
首页
跳转到其他版块新闻贴图网上谈兵IT茶馆教育大家谈