javascript移动的盒子效果代码

移动的盒子 练习

*{padding:0;margin:0;}

function $(obj){
return document.getElementById(obj);
}

//事件绑定通用方法
function addListener(element,e,fn){
if(element.addEventListener){
element.addEventListener(e,fn,false);
} else {
element.attachEvent("on" + e,fn);
}
}

var client_width = document.body.clientWidth + document.body.scrollLeft;//页面的宽度
var client_height = document.body.clientHeight + document.body.scrollTop;//页面的高度

//一个单击事件的过程是：keydown keypress keyup
var CodeList = new Array();

//在数组中先遍历移除keyCode，再把keyCode加到末尾
CodeList.Put = function(keyCode){
var retVal = CodeList.Remove(keyCode);
CodeList.push(keyCode);
}

//移除数组中的keyCode
CodeList.Remove = function(keyCode){
for(var i = 0;i =37 && evt.keyCode =37 && evt.keyCode

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript移动的盒子效果代码

    移动的盒子 练习 *{padding:0;margin:0;} function $(obj){ return document.getElementById(obj); } //事件绑定通用方法 function addListener(element,e,fn){ if(element.addEventListener){ element.addEventListener(e,fn,false); } else { element.attachEvent("on" + e,fn);

  • JavaScript 放大镜 移动镜片效果代码

    放大镜并不是一个难以实现的效果, 只是因为牵涉到一些精确的数值计算, 显得比较繁琐. 在未来的一段日子, 我会不定期地写关于 JavaScript 放大镜系列的文章, 每次讲一个点, 由点及面, 最后完成整个效果. 本次我们先了解如何在缩略图上移动镜片. (这是 DEMO) 缩略图和镜片组成的 DOM 结构如下. 复制代码 代码如下: <a id="thumb" href="#"> <img src="http://img.alibaba

  • javascript实现拖动层效果代码(符合标准且兼容IE,chrome,firefox)

    实例代码一见: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <style type="text/css"> #main div{position:absolute;width:220px;height:150px;border:1px solid #999;} </style> <script type="text/javascript"> var a; d

  • javascript布局查看器效果代码

    body{ margin:0 auto; width:950px; font-size:12px; text-align:center; } #wholebody{ width:950px; } .newline{/*仅应用于右侧*/ clear:both; width:700px; } #top{ height:auto; } .left_square{ } .right_square{ } #topic{ height:100px; } #left{ float:left; width:25

  • javascript图片渐显效果代码

    javascript图片渐显效果代码

    在<head>到</head>之间插入如下的JAVASCRIPT代码: nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade

  • javascript模仿msgbox提示效果代码

    复制代码 代码如下: //前任作者:http://www.moozi.net //修改:hh13774978@126.com,rayking function $(str){     return document.getElementById(str); } function _(str){     return document.getElementsByTagName(str); } function msg(boxtitle,boxtype,boxwidth,msg,url){     

  • javascript模拟的Ping效果代码 （Web Ping）

    当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21) 在线演示:http://demo.jb51.net/js/2011/ping/ 核心代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

  • javascript 无限联动菜单效果代码

    Selects *{font-size:14px;} select{height:20px;font-size:12px;} 2级联动 3级联动 4级联动 5级联动 var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([\d.]+)/)?true:false; s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; s.Chrome = ua.match(/chrome\/([

  • JS文字球状放大效果代码分享

    JS文字球状放大效果代码分享

    很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no

  • JavaScript实现拖拽盒子效果

    JavaScript实现拖拽盒子效果

    本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下 实现效果: 1.单击关闭,关闭盒子 2.点击左上方'点击注册',打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤: 1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页. 2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子

随机推荐