面向对象写选项卡、拖拽

js:

面向对象说白了就是一个黑匣子,所谓黑匣子就是知道具体怎么弄但不了解里面运转流程。

面向对象的组成:属性、方法。

属性其实也就是js里面常用的对象,只不过换了一只叫法。

至于方法则是js里面常用的函数。

唯一两者的区别,属性和方法是被定义的,也就是它们是被束缚的,反之,函数、对象异然。

例子:

var a=12;

alert(a);               //对象是自由的

var arr=[1,2,3,4];

arr.a=14;

alert(arr.a);         //属性被束缚

function aaa()

{

  alert(123);

}

var arr=[1,2,3];

arr.aaa=function()

{

  alert(123);

}

aaa();

arr.aaa();

选项卡,拖拽用复合方式。

所谓复合方式区别于工厂方式,也就是由构造函数和原型组成。

构造函数里面大多是由方法组成。

而原型通常就相当于函数。

屏幕的宽度=document.document.Element.clientWidth.

或许鼠标的位置:

oEvent=ev||event;

oEvent.clientX;oEvent.clientY;

时间: 2024-07-29 19:25:39

面向对象写选项卡、拖拽的相关文章

用面向对象写一个拖拽,并实现继承

思路:先用面过过程的方法将要实现的效果实现出来,然后按照以下步骤将拆分成面向对象 //面向过程的程序改写成面向对象程序不能有函数嵌套 //将window.onload初始化整个程序改为构造函数初始化整个对象 //将面向过程中的变量改为属性 //将面向过程中的函数改为方法 index.html代码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

面向对象写法的拖拽

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; po

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

拖拽效果的实现原理分析2

拖拽效果的实现原理分析2 上文对html5支持的浏览器的拖拽效果进行了分析,本文不采用任何库,来分析下拖拽的过程 先想想我们平时拖拽是怎么操作的,大致可以分为几下几个步骤: 鼠标按下,鼠标移动,拖拽,被拖动的物件跟着走 鼠标松开,物件停止,无拖动了 计算距离,拖拽的距离(鼠标移动) 对应在事件上就是 onmousedown,onmousemove ,开始拖拽 onmouseup ,停止拖拽 计算相对的拖拽距离 下面我们按照这种思路,写一个拖拽效果,假设我们拖动标题,这块的内容就跟着走. 首先我们

再次改良 拖拽!!!

上一篇最后写到 拖拽物体 如果有大有小,该怎么实现? 这次我画了一张图来说明下 这个是除了1,1格子外 ,所有9,9格子的全图.不过细心的你会发现,这些都是方形图,没有不规则图.因为不规则图 网格的数据结构比较麻烦,所以懒惰下,暂时不搞. 这个是 我先做了一个 1,3的,设计图上没画,在这补充.大家可以看到拖拽的时候不是一格是三格,当然,碰撞等还没处理好,回头处理肯定要发给大家看. 设计多格子的 物体,很多人会想到用数组来搞,一开始我也是这么想,后来发现 算法比较麻烦,而且如果要搞不规则的,那基

js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽

面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特点: ? 封装 : 看不到里面的东西 , 用好表面功能. ? 继承 : 从父类继承一些方法 , 属性 , 子类又有一些新的特性. ? 多态 ? 抽象 : 抽取一个功能里面多个核心的功能模块. ? 思想: 高内聚.低耦合 ? 低耦合 :每个功能模块之间耦合度要低 ? 高内聚 :模块内部要紧密相连 面向

面向对象的拖拽

1.创建一个div,并简单设置样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type=&qu

面向对象拖拽练习题

首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML 结构: <div id="box"></div> csc 样式: #box{position: absolute;width:

面向对象实战之封装拖拽对象

面向对象实战之封装拖拽对象 利用前面几章的所涉及到的知识,封装一个拖拽对象.为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖拽对象. 本文的例子会放置于codepen.io中,供大家在阅读时直接查看.如果对于codepen不了解的同学,可以花点时间稍微了解一下. 拖拽的实现过程会涉及到非常多的实用小知识,因此为了巩固我自己的知识积累,也为了大家能够学到更多的知识,我会尽量详