JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串,所以需要单引号!!!
move_elem = setTimeout(repeat,interval); //复制给一个变量,当我们想取消一个正在排队等待执行的函数,可以用clearTimeout(move_elem); interval参数表示在多少秒之后执行函数(单位是毫秒)
var xpos = parseInt(elem.style.left); //parseInt提取整数,比如50px,使用这个函数后返回的就是50 当然还有parseFloat
CSS overflow属性,可以对内容进行裁剪,只让一部分内容显示,他可以有四种取值
1:visible 不可裁剪一出内容,浏览器将溢出内容显示在容器之外,内容全部可见
2:hidden 隐藏溢出内容,溢出容器区域的内容被隐藏,只有一部分可见
3:scroll 类似于hidden 但是多出了一个滚动条,可以滚动看到隐藏内容
4:auto 类似于scroll 但只有容器发生溢出是才自动显示出一个滚动条,如果内容没有溢出,不显示滚动条
position设置为relative (0,0)坐标将会重新定义 相对定位,参照父级原始点
javascript 允许我们为元素创建属性,比如
var elem = document.getElementById(elementID); elem.movement = setTimeout(repeat,interval); //elem.movement 这很像创建一个变量 但是这个变量只是专属于元素elementID
抽象的通用函数moveElement如下
function moveElement(elementID,final_x,final_y,interval) { if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false; var elem = document.getElementById(elementID);
if(elem.movement) //有的时候会出现第一个函数还没执行完,我们又跑去执行第二个函数,这种情况下 可能出错 所以我们价格判断 然后clearTimeout
{
clearTimeout(elem.movement);
} if(!elem.style.left) elem.style.left = "0px";
if(!elem.style.top) elem.style.top = "0px"; var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0; if(xpos == final_x && ypos == final_y) return true;
/*
Math对象 ceil方法,向大于方向舍入为最接近的整数
floor方法,向小宇方向舍入为最接近的整数
round方法,将任意浮点数舍入为与之最接近的整数
*/
if(xpos < final_x)
{
dist = Math.ceil((final_x - xpos)/10); //每次移动十分之一,加快移动速度 xpos += dist;
}
else if(xpos > final_x)
{
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
} if(ypos < final_y)
{
dist = Math.ceil((final_y - ypos)/10);
ypos += dist;
}
else if(ypos > final_y)
{
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
} elem.style.left = xpos + "px";
elem.style.top = ypos + "px"; var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
<div id="slideshow">
<img src="topics.gif" alt="building blocks of web design" id="preview">
</div>
这一段只是为了javascript而存在的,可以在js中实现这段 需要注意的是: #preview{
position:absolute;
}
这一段在CSS中不可以缺少,否则实现不了动画效果!!
第十一章 HTML5
创建灰度图片,但是在IE中可以执行,在Chome中却不行,getImageData报错
function convertToGS(img) {
//Modernizr是一个Javascript库,检测浏览器是否支持canvas
if(!Modernizr.canvas) return; //保存原始的彩色版
img.color = img.src; //创建灰度版
img.grayscale = createGSCanvas(img); img.onmouseover = function () {
this.src = this.color;
} img.onmouseout = function () {
this.src = this.grayscale;
} img.onmouseout();
} function createGSCanvas(img) { var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img,0,0); //获取图片区域的数据,data属性返回一个对象,包含了image对象的图片数据 即r g b A(alpha通道)
var img_data = ctx.getImageData(0,0,img.width,img.height); for(var i =0; i < img_data.data.length; i += 4)
{
var r = img_data.data[i];
var g = img_data.data[i + 1];
var b = img_data.data[i + 2]; img_data.data[i] = img_data.data[i + 1] = img_data.data[i + 2] = (r + g +b)/3;
} ctx.putImageData(img_data,0,0);
//返回图片内容作为新的灰度图片的源
return canvas.toDataURL();
}
HTML5 video 自定义控件 部分js代码
function addControls(vid) { vid.removeAttribute("controls"); //移除浏览器默认的控件 var controls = document.createElement("div");
controls.setAttribute("class","controls"); var play = document.createElement("button");
play.setAttribute("title","play");
// play.innerHTML = 'BA;';
play.innerHTML = '►'; //note!!! controls.appendChild(play); vid.parentNode.insertBefore(controls,vid); play.onclick = function () {if(vid.ended)
vid.currentTime = ; if(vid.paused)
{
vid.play();
}
else
{
vid.pause();
}
} //利用play pasue ended事件来监控
vid.addEventListener("play",function () { //当视频正在播放时 会触发play事件 跑这个函数
play.innerHTML = '▐▐';
play.setAttribute('paused', true); },false); //第三个参数为false 说明由外往里获取 true的话说明是由里王外获取 vid.addEventListener("pause",function () { //当视频暂停时 会触发pause事件 跑这个函数
play.removeAttribute('paused');
play.innerHTML = '►'; },false); vid.addEventListener("ended",function () {
vid.pause();
},false); }
HTML5 表单
为了应对不兼容浏览器,可以进行兼容性检查 可以使用inputtypes.type属性 比如 if(!Modernizr.inputtypes.date) --检查生成日期的脚本 if(!Modernizr.inputtypes.placeholder) --检查生成占位符的脚本
onFocus事件就是当光标落在文本框中时发生的事件。
onBlur事件是光标失去焦点时发生的事件。
JavaScript DOM编程艺术读书笔记(四)的更多相关文章
- JavaScript DOM编程艺术读书笔记(一)
第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...
- JavaScript DOM编程艺术读书笔记(三)
第七章 动态创建标记 在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- JavaScript DOM编程艺术 - 读书笔记1-3章
1.JavaScript语法 准备工作 一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head& ...
- JavaScript DOM编程艺术 读书笔记
2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"< ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- JavaScript DOM编程艺术学习笔记(一)
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...
- JavaScript DOM编程艺术-学习笔记
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(201 ...
- JavaScript DOM编程艺术-学习笔记(第三章、第四章)
第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...
随机推荐
- vue.js 2.0开发(2)
如果我们想实时的显示我们todos的长度这个业务逻辑可以这样: <h1>{{message}} ({{todos.length}})</h1> 直接展示todos的length ...
- React组件的分类
* 1.statelessComponent 不包含任何state的组件 例如:AntDesign的 :Button,Input组件 * 2.viewComponent 包含少量ui state的组件 ...
- 118、通过solid来定义不同边框的颜色,可以只定义一个边框的颜色
以下是设置按钮的右边框和底边框颜色为红色,边框大小为3dp,如下图: 在drawable新建一个 buttonstyle.xml的文件,内容如下: <?xml version="1.0 ...
- [C#常用代码]类库中读取解决方案web.Config字符串
对于类库里读取解决方案web.config文件里字符串的方法一.读取键值对的方法:1.添加引用using System.Configuration;2.web.Config配置节<appSett ...
- LeetCode 374. Guess Number Higher or Lower
We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...
- [转载]反无人机企业DroneShield利用声音识别侦测无人机
原文:http://www.cnbeta.com/articles/495071.htm 无人机产业正在蓬勃发展,受益的不仅仅是那些生产小型飞行设备的企业.专家估计仅在澳大利亚就有5万架商用无人机以及 ...
- 关于ORACLE中配置文件的问题
关于windows服务和oracle的问题的解决 <?xml version="1.0" encoding="utf-8"?><configu ...
- css3动画3
1.transition过渡动画 2.@keyframes关键帧动画,配合transform.animation使用
- Mongodb集群搭建过程及常见错误
Replica Sets MongoDB 支持在多个机器中通过异步复制达到故障转移和实现冗余.多机器中同一时刻只 有一台是用于写操作.正是由于这个情况,为 MongoDB 提供了数据一致性的保障.担当 ...
- 谈谈Ruby中的类变量
Ruby中的类变量,很多文章都是不太建议使用的,主要原因在于他的一些特性容易导致犯一些错误,尤其在广泛使用元编程的时候. 初步接触类变量可能觉得他跟C++的类静态成员和Java中的静态变量没什么区别, ...