![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
实例
zhaoke_930325
这个作者很懒,什么都没留下…
展开
-
简单的选项卡
一个简单的选项卡的关键在于:当切换页面时,如何让所选的选项和与其对应的内容同时出现,并且在选择其他的内容时,不影响新的内容的显示。 其中用到两个很关键的思想: 1.为对象增加index属性,并通过this对index 的调用来使每个选项能显示出所对应的内容,并且属性值要设置为循环时的数值-i。 2.通过对class(类)的灵活使用,来改变当先所选中目标的样式。 3、用for循环嵌套事件对每一原创 2017-07-20 22:32:55 · 263 阅读 · 0 评论 -
面向对象的选项卡
1、面向对象的选项卡在直接书写上比较困难,咱们可以先用面向过程的方式写一个选项卡,然后按照:将变量变为属性,将函数变为方法的方式,通过构造函数替换window.onload进而初始化程序。 2.首先应该将其函数嵌套进行替换,使其不包含函数嵌套成分,然后看清楚this指向的值在对个别进行调整。<!DOCTYPE html> <html lang="en"> <head> <meta char原创 2017-07-29 00:14:59 · 653 阅读 · 0 评论 -
完美拖拽-return false的用法-事件绑定
1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu)。2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行。而为了兼容取事件方法为:var oEvent=ev||event;3.在节点中创建一个新的节原创 2017-07-28 12:47:27 · 579 阅读 · 0 评论 -
滑动条控制页面内容
1、与之前所做的拖拽原理相似,只不过去掉了Y方向的拖动。 2、在关于滑块在滑动条的位置确定时一定要记得不要被样式居中给迷惑了位置,if (l<0) { l=0; } else if (l>oParent.offsetWidth-oDiv.offsetWidth) {原创 2017-07-28 17:21:39 · 747 阅读 · 0 评论 -
侧边悬浮框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右侧悬浮框2</title> <style type="text/css"> #img1{ width: 200px; height: 200px; posi原创 2017-07-21 21:56:36 · 892 阅读 · 0 评论 -
运动框架和隐藏边框
一个完美的运动框架是经过不断地改善调整过来的,可以适合各种样式的运动。在JS运动中一下几点是至关重要的: 1.不加绝对定位的话是肯定不会动的! 2.运动框架中:在开始运动时,关闭已有定时器。把运动和停止隔开。(if、else) 3.透明度在IE中支持:filter:alpha(opacity:30),在FF和Chrome中opacity:0.3。 4.缓冲运动中,距离越远,速度越大,速度由距原创 2017-07-21 17:12:50 · 488 阅读 · 0 评论 -
表格的DOM操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格的添加和删除</title> <script type="text/javascript"> window.onload=function(){ var oTab = document.getElementBy原创 2017-07-21 16:27:49 · 242 阅读 · 0 评论 -
无缝滚动
首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝对定位 ,否则它根本无法滚动,而它相对于div1滚动 ,则div1就作为他的相对定位。 oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;这段代码是实现无缝滚动的核心,使之可以在不论左右滚动的时候都有下一步图片接上去。 在操作或者进行比较的时候,都要用offset取原创 2017-07-21 02:25:23 · 326 阅读 · 0 评论 -
数码时钟
通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。 通过for循环将数组中的每一项都赋值给img元素相对应的上面,str.charAt(i)通过i递增将str的每个数字输入到src中。 通过封装函数tick,并调用了一次,使得网页在刷新时不会出现图片变化。 通过getHours,getMinutes,getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ ’(一个原创 2017-07-21 00:21:25 · 269 阅读 · 0 评论 -
原型的继承和拖拽继承实例
继承:继承通过 ‘.call( )’方法进行,可以通过不同的参数来改变this的值:function show(a,b) { alert('this是:'+this+'\na是:'+a+'\nb是'+b); }; show(12,5); show.call('abc',12,5);//this的值可以改变现在通过原创 2017-07-29 01:03:26 · 421 阅读 · 0 评论