请叫我二狗哥

摘要： 绝对定位元素若无已定位的祖先元素，它是相对于什么进行定位的? 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 在CSS中，有事一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称作包含块。包含块是一个相对的概念，比如子元素的初始化布 阅读全文

摘要： 点击“向右”按钮，红色的#red区块开始向右缓冲运动，抵达到黑色竖线位置自动停止，再次点击“向右”#red区块也不会再运动。点击“向左”按钮，红色的#red区块开始向左缓冲运动，抵达到蓝色竖线位置自动停止，再次点击“向左”#red区块也不会再运动。 参考代码： 阅读全文

摘要： transition属性可直译为“过渡”，主要用于检索或设置对象变换的过渡。 语法： transition:property duration [timing-function] [delay]; timing-function可以省略，其默认值为ease; delay可以省略，其默认值为0; tr 阅读全文

摘要： 在《JS模拟百度分享侧边栏效果》一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示，鼠标移出滑入隐藏的效果。其实在CSS3中通过transition属性就可以较为轻松实现。 参考代码： 阅读全文

摘要： 模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入 阅读全文

摘要： 点击“开始运动”按钮，红色的#red区块开始向右匀速运动，抵达到黑色竖线位置自动停止，再次点击“开始运动”#red区块也不会再运动。同时为了便于后期维护，要求运动速度可在代码中灵活调整。 细节要求： 1、点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。 2 阅读全文

摘要： 在A、B、C三个区块中，有且仅有一个红色，要求红色每隔一秒即进入下一个区块，变色过程不断循环往复。 参考代码： 阅读全文

摘要： html的height:100%;高度是多少 html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置： 可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在 阅读全文

摘要： 通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时，通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现。下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理。 核心CSS代码： 绝对定位元素的布局由元素 阅读全文

摘要： 博客园的默认模板虽然受众接受率还算较高，但是对于有强迫症的同学来说，其中像title、description以及favicon显示仍然比较呆板。有没有自定义的方式呢？答案当然是肯定的。下面是我自己捣腾的博客园首页三个标签自定义的代码，喜欢的同学赶紧拿走吧。 ( ᖛ ̫ ᖛ )ʃ)上代码： 阅读全文

摘要： 案例：简易的Div拖拽 鼠标移入Div区域后，按下鼠标左键，可以拖动Div移动;松开鼠标左键，Div拖动停止。同时要求Div不能拖出屏幕显示区域外。 拖拽原理：距离不变、三个事件(onmousedown、onmousemove、onmouseup) 解决问题： 1、拖拽过程中，鼠标容易滑出Div区块 阅读全文

摘要： 贪吃蛇是一款80后、90后比较熟悉的经典游戏，下面通过简单的JS代码来实现低仿版贪吃蛇效果：随着鼠标的移动，在页面中呈现所有Div块跟随鼠标依次移动，效果如下图所示。 参考代码： 思考：为什么采用下面递增循环代码就无法达到预期效果？ 代码： 效果： 如果递增循环设计进行修改后，可以实现其它独特效果： 阅读全文

摘要： 默认状态下，灰色面板出现。当点击页面按钮以及灰色面板外区域时，面板消失;点击按钮，灰色面板出现;点击灰色面板区域，面板不能消失。 主要考察：事件冒泡与取消事件冒泡。 代码： 参考代码： 阅读全文

摘要： ready(fn)当DOM载入就绪可以查询及操作时，绑定一个要执行的函数。 resize([[data],fn])当调整浏览器窗口的大小时，发生resize事件。它属于BOM中的window对象。 focus([[data],fn])、blur([[data],fn])当元素获得（失去）焦点时触发f 阅读全文

摘要： 通过补充代码，实现时钟实时显示当前时间：年、月、日、时、分、秒、日期。 参考答案： 阅读全文

摘要： 通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下：由数字化的卡通形象图片取代常规的数字显示当前实时北京时间。具体效果示例： 核心重点： (1)Date方法的初步了解 (2)构建模型，从特殊到一般。 //对数字进行双数判断，并且转换为字符串。函数很巧妙的应用了JS中的隐式类型转换 阅读全文

摘要： 阅读全文

摘要： 定时器会返回一个数字值id，可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除。 setInterval()/setTimeout()BOM中的Window对象方法，以返回数字值id来清除定时器的排序位置存在一定的兼容性问题。通常采用一个变量接受定时器 阅读全文

摘要： 函数作用域和声明提前 《JavaScript权威指南》P57 函数作用域(function scope):变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。 JavaScript的函数作用域是指在函数内声明的所有变量在函数体内始终是可见的。JavaScript这个特性被称为声明提前 阅读全文

摘要： 要求：点击页面鼠标右键，阻止默认右键菜单的弹出，并弹出自定义右键菜单。 效果示例： 参考代码： 阅读全文