面向对象的封装
来源：互联网 发布：图书信息管理vb表格 编辑：程序博客网 时间：2024/06/04 18:16
Banner的例子
基本banner
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box{width: 800px;height: 500px;position: relative;margin: 30px auto;} #imgList li{width: 800px;height: 500px;position: absolute;display: none;} #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;} #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;} #btn li.active{background: #E837B3;color: #fff;} </style></head><body> <div id="box"> <ul id="imgList"> <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li> <li><img src="images/2.jpg" height="500" width="800" alt=""></li> <li><img src="images/3.jpg" height="500" width="800" alt=""></li> <li><img src="images/4.jpg" height="500" width="800" alt=""></li> <li><img src="images/5.jpg" height="500" width="800" alt=""></li> </ul> <ul id="btn"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script type="text/javascript"> /* 面向对象 应用的最多的地方就是h5中 游戏开发 运动 面向对象的封装 1.构造函数 2.扩展属性或者方法(公用,并且在内存地址只有一个) */ var imgDoms = document.getElementById("imgList").children; var btnDoms = document.getElementById("btn").children; for(var i=0;i<btnDoms.length;i++){ btnDoms[i].index = i; btnDoms[i].onclick = function(){ for(var j=0;j<btnDoms.length;j++){ imgDoms[j].style.display = "none"; btnDoms[j].className = ""; } this.className = "active"; imgDoms[this.index].style.display = "block"; }; }; </script></body></html>开始提取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box{width: 800px;height: 500px;position: relative;margin: 30px auto;} #imgList li{width: 800px;height: 500px;position: absolute;display: none;} #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;} #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;} #btn li.active{background: #E837B3;color: #fff;} </style></head><body> <div id="box"> <ul id="imgList"> <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li> <li><img src="images/2.jpg" height="500" width="800" alt=""></li> <li><img src="images/3.jpg" height="500" width="800" alt=""></li> <li><img src="images/4.jpg" height="500" width="800" alt=""></li> <li><img src="images/5.jpg" height="500" width="800" alt=""></li> </ul> <ul id="btn"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script type="text/javascript"> /* 面向对象 应用的最多的地方就是h5中 游戏开发 运动 面向对象的封装 1.构造函数 2.扩展属性或者方法(公用,并且在内存地址只有一个) */ // var imgDoms = document.getElementById("imgList").children; // var btnDoms = document.getElementById("btn").children; var imgDoms,btnDoms; window.onload = function(){ imgDoms = document.getElementById("imgList").children; btnDoms = document.getElementById("btn").children; init(); }; function init(){ for(var i=0;i<btnDoms.length;i++){ btnDoms[i].index = i; btnDoms[i].onclick = toggle; }; }; function toggle(){ for(var j=0;j<btnDoms.length;j++){ imgDoms[j].style.display = "none"; btnDoms[j].className = ""; } this.className = "active"; imgDoms[this.index].style.display = "block"; }; </script></body></html>封装在Banner构造函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>面向对象Banner封装</title> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} body{font-size: 14px;font-family: "微软雅黑";} #box{width: 800px;height: 500px;position: relative;margin: 30px auto;} #imgList li{width: 800px;height: 500px;position: absolute;display: none;} #btn{width: 200px;height: 30px;position: absolute;left: 50%;margin-left: -100px;bottom: 10px;} #btn li{width: 20px;height: 20px;padding: 5px;margin: 5px;text-align: center;line-height: 20px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;} #btn li.active{background: #E837B3;color: #fff;} #btnbox {position: absolute; top: 50%; margin-top: -35px;left: 0; right: 0; height: 70px; opacity: 0; transition: all .3s;} .btn {width: 40px; height: 70px; font-size: 22px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; line-height: 70px; text-align: center; } #next {float: right;} #prev {float: left;} </style></head><body> <div id="box"> <ul id="imgList"> <li style="display:block"><img src="images/1.jpg" height="500" width="800" alt=""></li> <li><img src="images/2.jpg" height="500" width="800" alt=""></li> <li><img src="images/3.jpg" height="500" width="800" alt=""></li> <li><img src="images/4.jpg" height="500" width="800" alt=""></li> <li><img src="images/5.jpg" height="500" width="800" alt=""></li> </ul> <ul id="btn"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div id="btnbox" onselectstart = "return false"> <div id="prev" class="btn"><</div> <div id="next" class="btn">></div> </div> </div> <script type="text/javascript"> /* 面向对象 应用的最多的地方就是h5中 游戏开发 运动 面向对象的封装 1.构造函数 2.扩展属性或者方法(公用,并且在内存地址只有一个) */ // var banner2 = new Banner(); window.onload = function(){ var banner1 = new Banner("box","imgList","btn","btnbox"); banner1.init(); }; // 构造函数 function Banner(boxDom,imgDom,btnDom,aboutDom){ // 自有 this.boxDom = document.getElementById(boxDom); this.index = 0; this.imgDoms = document.getElementById(imgDom).children; this.btnDoms = document.getElementById(btnDom).children; this.about = document.getElementById(aboutDom); this.timer = null; } //公用 Banner.prototype.init = function(){ // alert(this) // 第一种 var This = this; for(var i=0;i<this.btnDoms.length;i++){ // this.btnDoms[i].index = i; // 第二种 this.btnDoms[i].onclick = this.toggle.bind(this,i); //将this指向LI 改为Banner // this.btnDoms[i].onclick = function(){ // This.toggle(this); //this => this.btnDoms[i] // }; }; // 暂停 this.boxDom.onmouseenter = function(){ // console.log(This.about); This.about.style.opacity = 1; clearInterval(This.timer); This.timer = null; }; this.boxDom.onmouseleave = function(){ // console.log(This.about); This.about.style.opacity = 0; This.timer = setInterval(function(){ This.auto.call(This); },2000); }; // 轮播 this.timer = setInterval(function(){ This.auto.call(This); },2000); // 左右 for(var j=0;j<this.about.children.length;j++){ this.about.children[j].index = j; this.about.children[j].onclick = function(){ //this指向改变 if(this.index == 0){ This.prev(); }else{ This.auto(); } } } }; Banner.prototype.toggle = function(i){ //this==> LI || Banner // alert(i); for(var j=0;j<this.btnDoms.length;j++){ this.imgDoms[j].style.display = "none"; this.btnDoms[j].className = ""; } this.btnDoms[i].className = "active"; this.imgDoms[i].style.display = "block"; this.index = i; }; Banner.prototype.prev = function(){ this.index--; if(this.index<0)this.index = this.btnDoms.length-1; this.toggle.call(this,this.index); //直接执行 }; // Banner.prototype.next = function(){ // this.index++; // this.index %= this.btnDoms.length; // }; Banner.prototype.auto = function(){ // this -> window // alert(this.toggle); this.index++; this.index %= this.btnDoms.length; this.toggle.call(this,this.index); //直接执行 }; </script></body></html> 0 0
- 面向对象的封装
- 面向对象的封装
- 谈面向对象的封装
- 面向对象的Javascript：封装
- 面向对象的特性:封装
- Lua的面向对象封装
- 面向对象封装的特性
- js面向对象的封装
- 面向对象的特征 封装
- 面向对象的特征--封装
- 面向对象之封装的成本价值
- 面向对象 之 封装带来的好处
- 面向对象的封装和继承
- 面向对象的分页封装操作
- 1.面向对象的封装,构造函数!
- 关于面向对象方法封装的体会
- libevent C++面向对象的封装
- 面向对象的特征：封装、继承、多态
- js给KindEditor的textarea框赋值
- HDU 4596 J
- Android 按住录音 松手停止，根据声音来更换图片 播放短声
- 【优秀】前端学习网站
- 02-线性结构2 一元多项式的乘法与加法运算 (20分)
- 面向对象的封装
- 面向对象实验
- 硬币排成线
- 网络编程
- Android Fragment的使用
- MyBatis--查询缓存--内置二级缓存配置
- MFC Windows程序设计--视图扩展
- 二分图染色问题
- V4L2框架分析
