javascript写元素的拖拽，毫无卡顿

发布者: superzhang | 发布时间:2017-11-25

一、HTML

</div>

二、CSS

padding:0px;

margin: 0px;

}

#div1{

position:absolute;

width:100px;

height: 100px;

}

img{

width:100px;

height: 100px;

display: block;

position:absolute;

left: 0px;

top:0px;

}

#img1{

display:none;

}

三、script

想读更多 ->

JavaScript基础知识

发布者: superzhang | 发布时间:2017-11-25

JavaScript

JavaScript简介：

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

一、JS常用语句：

1.输出语句：document.write("");

2.JS中的注释为//

3.传统的HTML文档顺序是:document->html->(head,body)

4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)

5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)

6.一个小写转大写的JS: document.getElementById("output").value = document.getElem

想读更多 ->

JavaScript == 和 ===

发布者: superzhang | 发布时间:2017-11-25

== 操作符（Equality，相等操作符）

相等操作符会做类型转换。

我们先来看看什么是类型转换（type coercion）

当操作符两边的操作数是不同类型时，其中一个操作数将转换为另一个操作数同类型的“等效”值。比如：

12 - '3' // 9, 将 string 类型转换成 number 类型，相当于 12 - Number('3') 12 - 'hello' // NaN, 因为 Number('hello') 为 NaN，12 - NaN 为 NaN '3' - 12 // -9, 同样转成 number 类型 12 - true // 11, Number(true) 为 1 false - 12 // -12, Number(false) 为 0 12 + '3' // 123, 将 12 转换成 string 类型，再连接 '3'

看上去很简单对不对？减法将非 number 类型的转换成 number 类型的，加法将 number 类型转换成 string 类型的，真的这样吗？看下面：

12 + true // 13，这里将布尔类型 true 转换成数值类型 1，相当于 12 + Number(true)

从上面可以看出，“加法将 number 类型转换成 string

想读更多 ->

第二天： javascript函数与javascript对象

发布者: superzhang | 发布时间:2017-11-25

今天是javascript教程的第二课，李书记今天为大家讲解的是javascript函数和javascript对象，针对此总结如下：

函数的定义

方法一:通过function语句定义函数

function 函数名 (参数1，参数2……)

{

<语句块>

return 返回值

}

注意:在函数里，可以有0个或者多个参数。如果有多个参数，参数与参数之间要用逗号隔开。无论函数是否有参数，小括号必需。a.如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined； b.如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。

方法二:通过Function方法构造函数

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

var sum= new Function(‘x”,”y”,”var z=x+y;return z;”);

该构造方法可以有N个参数,但是最后一个一定是函数体字符串.Function的第一个字母一定要大写,而且每次调用该对象都会从新编译次函数,而另外两种方法不会,不推荐此方法

方法三:在表达式中

想读更多 ->

javascript写图片从中心放大

发布者: superzhang | 发布时间:2017-11-25

一、HTML

二、CSS

#img { display:block;

width:100px;

height:100px;

position:absolute;

left:200px;

top:200px;

margin:0;

}

三、script

window.onload=function ()

{

var oImg=document.getElementById('img');

oImg.onmouseover=function ()

{

startMove(oImg, {width: 400, height: 400, marginLeft: -100, marginTop: -100});

};

oImg.onmouseout=function ()

{

startMove(oImg, {width: 100, height: 100, marginLeft: 0, marginTop: 0});

想读更多 ->

Javascript之选项卡

发布者: superzhang | 发布时间:2017-11-25

选项卡

选项卡在js中是一个重要的知识点。他没有那么难，但在工作中却有重要的位置。几乎在每一个网站都能看到选项卡的实例。所以今天写一下选项卡的实现。我们设想有四个按钮分别来控制四个盒子当我们点击当前的按钮的时候，让对应的盒子显示，让其余的盒子隐藏。

Javascript之选项卡

点击选项后变换不同的内容

代码部分

Javascript之选项卡

第一部分

Javascript之选项卡

想读更多 ->

网页有弹层时禁止弹层底部页面滚动做法

发布者: superzhang | 发布时间:2017-11-25

有时在工作中会遇到的需求

弹层弹出时需要禁止页面滚动。

查了下网上最好的方法是给 body 加 height: 100%; overflow: hidden; ，加上发现没有生效，又发现需要加 position: fixed; ，加上后确实可以禁止滚动，但是页面会回到页首。

然后就想着禁止后滚到禁止前滚动到的位置，但是页面滚动 IE、新版谷歌和火狐是 document.documentElement.scrollTop 生效，而不是 body.scrollTop 生效，body高已经为屏幕高了，html不能滚动。然后就把 height: 100%; overflow: hidden; 加到了 html 上，就可以设置 scrollTop 了，测试最起码可以兼容到IE7。

但是老版本chrome 是 body.scrollTop 滚动页面，所以我就加了个 #container 的最外层的盒子来承担这个实现页面滚动的任务，以确保所有的浏览器都可以完美的兼容。希望对有需要的同学会有所帮助。

网页有弹层时禁止弹层底部页面滚动做法