Javascript网页特效开发技巧

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

我总结了一下我自己,为什么看到javascript是觉得如此的简单,而自己手动去写却无从下手,为此,我写下我自己的经验,以给后人借鉴;

1、看了一百篇关于javascript的文章,每篇文章上写的都差不多。无非就是,数据类型、算法、函数(类-方法)、构造函数、原型、原型继承、对象。

而这些只是javascript的一部分ECMAScript,因为javascript包含有,第一:ECMAScript、第二:DOM、第三、BOM

Javascript的核心开发是在客户端、本地运行、浏览器(DOM)宿主、嵌入HTML、动态(DOM)开发;而我发了大量的时间在ECMAScript部分,虽然这方面有了大量知识,但关于DOMBOM部分却少得的可怜;所以我建议大家,在学习javascipt的时候,多把重心把在DOMBOM部分。原因很简单,大部份人在学习javascript的时候,其实他们已经学会了其它的高级编程语言,如果没学过其它关于面向对象的语言,相信你在学习ECMAScript部份一定转不过弯,那么本文应该没办法为你而专写;
开发asp.net的朋友都知道,语法是开C#的基础,用asp.net开发项目的时候,你一定要了解.net服务器控件,要知道控件里包含有哪些属性和方法,当然这些属性和方法是只针对.net部分;或者是安卓开发,开发安卓手机软件的时候,要必须知道安卓控件里的属性和方法;介于这种思维,当我们在开发javascript的时候,也要想到javascript的DOM部分和BOM部分,DOM控件有哪些属性和方法,DOM部分有哪些属性和方法;

2、看到别人写了很好看的demo,但自己却没有思维,不知道是怎么做出来的,如选项卡、手风琴、下拉菜单;

其实这些效果真的很简单,以下的思维你可以借鉴。

1)、不管什么样的demo效果,你先用css+images设计出实际的静态效果,然后然后用style=”none”属性隐藏,最后再写javascript特效;

2)、写javascript特效的时候,要想到DOMBOM部分的属性和方法,然后ECMAScript语法和控制过程;

3)、javascript是基本事件驱动的,所以效果的产生为无非就是事件、定时器;常用到的事件有onload、onclick、onmosehover、onmoseout只是这些事件被封装在类库里面了。

4)、写完一个特效后,再简化,把公共部分放在common.js文件,把多个模块加到一起,就成一个大型项目;

构建大型程序最大的秘密就是从来不构建大型程序,而是将程序分解成各个小的模块去做,让每个小模块都可测试,可size化,然后集成到程序里。

Javascript网页特效开发技巧的更多相关文章

  1. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

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

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

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

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

  4. Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发

      PHASERJS3 一.首先当然得有至少有二个场景sceneA.js,sceneB.js 二.从场景A传值到场景B二种方法 1)通过事件this.events.emit('event key',{ ...

  5. JavaScript网页特效5则

    动态字幕 代码:在需要处加入 < marquee onmouseover=this.stop() onmouseout=this.start()>欢迎访问JavaScript教程网 特点: ...

  6. javaScript 网页特效 输出语句

    大家好,我是小强老师,今天主要讲解 三个最为常用的输出语句.  alert() 弹出警示框 window.alert(‘继续学习’);  完整的写法 效果如下: 因为alert 属于window 对象 ...

  7. javascript的40个网页常用小技巧

    下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助.1. oncontextmenu="window.event.returnValue=false" 将 ...

  8. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  9. 《JavaScript网页经典特效300例》

    <JavaScript网页经典特效300例> 基础篇 进阶篇 高级篇

随机推荐

  1. Unity3D实践系列11, 组件的添加和访问

    当把一个脚本附加到一个GameObject上的时候,这个GameObject就有了脚本组件. 通过GameObject的属性获取组件 比如如下: [RequireComponent(typeof(Ri ...

  2. Windows Phone本地数据库(SQLCE):14、删除数据(翻译)

    这是“windows phone mango本地数据库(sqlce)”系列短片文章的最后一篇第十四篇. 为了让你开始在Windows Phone Mango中使用数据库,这一系列短片文章将覆盖所有你需 ...

  3. C#编程(十五)----------只读字段

    只读字段 当字段声明中含有 readonly 修饰符时,该声明所引入的字段为只读字段.给只读字段的直接赋值只能作为声明的组成部分出现,或在同一类中的实例构造函数或静态构造函数中出现.(在这些上下文中, ...

  4. 【CentOS】centos7上查看服务开机启动列表

    centos7上查看服务开机启动列表 命令: systemctl list-unit-files; 点击回车,可以向下翻页查询

  5. Netty之解决TCP粘包拆包(自定义协议)

    1.什么是粘包/拆包 一般所谓的TCP粘包是在一次接收数据不能完全地体现一个完整的消息数据.TCP通讯为何存在粘包呢?主要原因是TCP是以流的方式来处理数据,再加上网络上MTU的往往小于在应用处理的消 ...

  6. 设置Images.xcassets后启动仍旧黑屏的问题

    换了XCode6之后,发现以前写Icon-76.png这样很麻烦,就使用了Image.xcassets,公司所有测试机跑了一下,发现没什么问题.唯独有一台设置有问题,iphone5 ios6.0系统, ...

  7. Shape 属性解释

    本文来自:http://blog.csdn.net/brokge/article/details/9713041 简介: 作用:XML中定义的几何形状 位置:res/drawable/文件的名称.xm ...

  8. Spring Data JPA 实现多表关联查询

    本文地址:https://liuyanzhao.com/6978.html 最近抽出时间来做博客,数据库操作使用的是 JPA,相对比 Mybatis 而言,JPA 单表操作非常方便,增删改查都已经写好 ...

  9. http协议报头详解HTTP协议结构

    http协议 请求报文和响应报文都是由以下4部分组成 1.请求行 2.请求头 3.空行 4.消息主体 下图为http请求的报文结构 下图为http响应报文结构 请求行 格式为: Method Requ ...

  10. 【deep learning学习笔记】注释yusugomori的DA代码 --- dA.h

    DA就是“Denoising Autoencoders”的缩写.继续给yusugomori做注释,边注释边学习.看了一些DA的材料,基本上都在前面“转载”了.学习中间总有个疑问:DA和RBM到底啥区别 ...