07 2019 档案

CSS3之transition属性
摘要：transition属性可直译为“过渡”，主要用于检索或设置对象变换的过渡。 语法： transition:property duration [timing-function] [delay]; timing-function可以省略，其默认值为ease; delay可以省略，其默认值为0; tr 阅读全文
posted @ 2019-07-31 15:11 请叫我二狗哥 阅读(292) 评论(0) 推荐(0)
CSS实现模拟百度分享侧边栏效果
摘要：在《JS模拟百度分享侧边栏效果》一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示，鼠标移出滑入隐藏的效果。其实在CSS3中通过transition属性就可以较为轻松实现。 参考代码： 阅读全文
posted @ 2019-07-31 12:51 请叫我二狗哥 阅读(422) 评论(0) 推荐(0)
JS模拟百度分享侧边栏效果
摘要：模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏，#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏，#div1分享侧边栏区块匀速滑入隐藏，直至恢复初始位置。若#div1区块未全部露出时，鼠标移出，#div1区块则开始滑入隐藏；若#div1区块未全部滑入 阅读全文
posted @ 2019-07-26 17:26 请叫我二狗哥 阅读(318) 评论(0) 推荐(0)
js匀速运动框架案例
摘要：点击“开始运动”按钮，红色的#red区块开始向右匀速运动，抵达到黑色竖线位置自动停止，再次点击“开始运动”#red区块也不会再运动。同时为了便于后期维护，要求运动速度可在代码中灵活调整。 细节要求： 1、点击开始运动按钮后，在抵达终点线前，无论再次点击多少次按钮，#red区块均维持运动速率不变。 2 阅读全文
posted @ 2019-07-24 16:46 请叫我二狗哥 阅读(252) 评论(0) 推荐(0)
JS小案例：循环间隔重复变色
摘要：在A、B、C三个区块中，有且仅有一个红色，要求红色每隔一秒即进入下一个区块，变色过程不断循环往复。 参考代码： 阅读全文
posted @ 2019-07-22 17:25 请叫我二狗哥 阅读(929) 评论(0) 推荐(1)
html的height:100%;高度是多少
摘要：html的height:100%;高度是多少 html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置： 可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在 阅读全文
posted @ 2019-07-22 13:29 请叫我二狗哥 阅读(5501) 评论(0) 推荐(0)
绝对定位元素水平居中和垂直居中的原理
摘要：通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时，通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现。下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理。 核心CSS代码： 绝对定位元素的布局由元素 阅读全文
posted @ 2019-07-17 17:41 请叫我二狗哥 阅读(6268) 评论(0) 推荐(0)
博客园修改首页title、description、favicon的代码公开
摘要：博客园的默认模板虽然受众接受率还算较高，但是对于有强迫症的同学来说，其中像title、description以及favicon显示仍然比较呆板。有没有自定义的方式呢？答案当然是肯定的。下面是我自己捣腾的博客园首页三个标签自定义的代码，喜欢的同学赶紧拿走吧。 ( ᖛ ̫ ᖛ )ʃ)上代码： 阅读全文
posted @ 2019-07-11 18:35 请叫我二狗哥 阅读(615) 评论(0) 推荐(1)
案例：简易的Div拖拽
摘要：案例：简易的Div拖拽 鼠标移入Div区域后，按下鼠标左键，可以拖动Div移动;松开鼠标左键，Div拖动停止。同时要求Div不能拖出屏幕显示区域外。 拖拽原理：距离不变、三个事件(onmousedown、onmousemove、onmouseup) 解决问题： 1、拖拽过程中，鼠标容易滑出Div区块 阅读全文
posted @ 2019-07-08 13:05 请叫我二狗哥 阅读(1236) 评论(0) 推荐(1)
JS仿贪吃蛇：一串跟着鼠标的Div
摘要：贪吃蛇是一款80后、90后比较熟悉的经典游戏，下面通过简单的JS代码来实现低仿版贪吃蛇效果：随着鼠标的移动，在页面中呈现所有Div块跟随鼠标依次移动，效果如下图所示。 参考代码： 思考：为什么采用下面递增循环代码就无法达到预期效果？ 代码： 效果： 如果递增循环设计进行修改后，可以实现其它独特效果： 阅读全文
posted @ 2019-07-03 16:13 请叫我二狗哥 阅读(487) 评论(0) 推荐(0)
仿select下拉框
摘要：默认状态下，灰色面板出现。当点击页面按钮以及灰色面板外区域时，面板消失;点击按钮，灰色面板出现;点击灰色面板区域，面板不能消失。 主要考察：事件冒泡与取消事件冒泡。 代码： 参考代码： 阅读全文
posted @ 2019-07-02 12:59 请叫我二狗哥 阅读(377) 评论(0) 推荐(0)