1:  <html>
   2:  <title>    
   3:   
   4:  </title>
   5:      <body>
   6:       <style type="text/css">
   7:                  #block{
   8:                  background-color:green;
   9:                  font-size:9pt;
  10:                  padding:30px;
  11:                  color:white;
  12:                  width:100px;
  13:                  height:120px;
  14:                  position:absolute;
  15:                  }
  16:        </style>
  17:        <div id="block"></div>  
  18:        
  19:        <script>
  20:              function down(event){
  21:   
  22:                  var x = event.clientX;
  23:                  var y = event.clientY;  
  24:                  var oleft = document.getElementById('block').offsetLeft;
  25:                  var otop  = document.getElementById('block').offsetTop;
  26:                  offx = x - oleft;
  27:                  offy = y - otop;
  28:                   
  29:                  document.onmousemove = move;
  30:                  document.onmousemup  = up;
  31:                 
  32:              }  
  33:              function move(event){
  34:                  var x = event.clientX;
  35:                  var y = event.clientY;                
  36:                   
  37:                  document.getElementById('block').style.left = x - offx +'px';  
  38:                  document.getElementById('block').style.top  = y - offy +'px';
  39:                  
  40:                  document.onmouseup = up;
  41:              }  
  42:              function up(){
  43:                  document.onmouseup = null;
  44:                  document.onmousemove = null;
  45:              }
  46:              window.onload = function(){
  47:                  document.onmousedown = down;
  48:              }
  49:          </script>     
  50:        
  51:   
  52:      </body>
  53:      
  54:   
  55:  </html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

我的第一个javascript网页作业的更多相关文章

  1. javascript一个在网页上画线的库

    文章;安利一个绘制指引线的JS库leader-line 一个在网页上划线的库感觉很不错.

  2. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  3. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  4. 《Javascript网页经典特性300例》

    <Javascript网页经典特性300例> 基础篇 第1章:网页特性 刷新.后退.前进.关闭.标题.跳转禁止网页放入框架动态加载js避免浏览器使用缓存加载页面 第2章:DOM操作 根据n ...

  5. 《JavaScript网页特效经典300例-进阶篇》

    <Javascript网页经典特性300例> 进阶篇 第11章:导航菜单特效 二级导航菜单三级导航菜单动态加载导航菜单三级联动导航菜单树形导航菜单当网页超过一屏时导航菜单始终置顶 第12章 ...

  6. 《JavaScript网页特效经典300例-高级篇》

    <Javascript网页经典特性300例> 高级篇 第18章:ajax应用 Ajax传输JSON数据实例定义一套自己的Ajax框架 第19章:面向对象的特性 定义一个类利用prototy ...

  7. 如何成为一个javascript高手【转载】

      原文网址: http://www.cnblogs.com/keva/p/how-to-become-a-javascript-badass.html 英文网址:http://www.clientc ...

  8. javascript（作业九）

    1.javascript简介: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...

  9. Javascript网页特效开发技巧

    Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一 ...

随机推荐

  1. 【C#学习笔记】退出程序

    1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出: 2.Application.Exit();  强制所有消息中 ...

  2. poj 2184 Cow Exhibition

    // 给定n头牛,每头有属性智商和幽默感,这两个属性值有正有负,现在要从这n头牛中选出若干头使得他们的智商和与幽默感和不为负数,// 并且两者两家和最大,如果无解输出0,n<=100,-1000 ...

  3. Andorid-Fragment生命周期

    官网帮助文档链接: http://developer.android.com/guide/components/fragments.html Fragment的生命周期: Fragment与Activ ...

  4. 动态生成图片 保存到OutputStream

    #region 把图片Copy到输出流 //获得图片全路径 string path = context.Server.MapPath("~/img/158_003.jpg"); / ...

  5. 动画 -- ListView列表item逐个出来（从无到有）

    import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; publi ...

  6. Launcher2编译

    Android的源码包,压缩文件大概有3个G左右,要使用其中自带的一些源码需要很多技巧,否则会提示找不到一些库,大量的报错让人心神不定,不知所从. 我拿桌面代码举个例子吧. 桌面代码在源码包的pack ...

  7. Party at Hali-Bula

    题意: n个人参加party,给出n个人的工作关系树,一个人和他的顶头上司不能同时参加,party达到的最大人数并判断邀请的最大人数名单是否唯一. 分析: 树状dp入门 dp[i][f],以i为根的子 ...

  8. hdu5073 简单枚举+精度处理

    其实这题还是挺简单的,因为移动k个星球后,这k个星球的权值就可以变为0,所以只有剩下的本来就是连着的才是最优解,也就是说要动也是动两端的,那么就O(N)枚举一遍动哪些就好了. 我是在杭电oj题目重现的 ...

  9. 【LeetCode 215】Kth Largest Element in an Array

    Find the kth largest element in an unsorted array. Note that it is the kth largest element in the so ...

  10. （一）使用Blender导出GameMaker支持的模型脚本

    源于YOYO论坛帖子:http://gmc.yoyogames.com/index.php?showtopic=603723 既然想做3D,那就先从模型的导入开始,具体的源文件,可以在“(二)使用等高 ...