天天饱

2016年10月13日

摘要：实现效果： JQ简单选项卡实现，实现原理：当点击选项卡栏目时为当前栏目添加一个class，然后通过index()获得其为第几个栏目，然后通过eq()选择对应的内容显示。布局代码： JQ实现：最终效果  栏目1 栏目2  a b 1 2 栏目1 栏目2 栏目1 阅读全文

posted @ 2016-10-13 17:55 天天饱阅读(199) 评论(0) 推荐(0) 编辑

滚动时div的背景图片随之滚动

摘要：在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动，如下：当滚动时内容位置保持不变，但是内容后面的背景却在随着滚动。随之我通过审查元素看到了其是通过background-position来实现的，实现原理为当目标DIV出现在屏幕上时，当往下滚动时background-posi 阅读全文

posted @ 2016-10-13 17:25 天天饱阅读(5751) 评论(0) 推荐(1) 编辑

2016年10月11日

使用RGBa和Filter实现不影响子元素的CSS透明背景

摘要：点击查看原文问题如果我们想要一个元素拥有半透明的背景，我们有两个选择：使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题，一是为了适应所有的浏览器，我们要对付opacity讨厌的语法；二是opacity不仅使目标元素的背景变得半透明，阅读全文

posted @ 2016-10-11 09:17 天天饱阅读(1020) 评论(0) 推荐(0) 编辑

通过条件注释判断浏览器

摘要：有时我们会在网站头部看到：  或者  其他浏览器会将其作为注释而忽略这些语句，因为他们是IE专门提供的一种语法，如此就能根据不同的IE版本加载对应的CSS或者JS文件了。 <!--[if 阅读全文

posted @ 2016-10-11 08:47 天天饱阅读(1032) 评论(0) 推荐(0) 编辑

2016年10月10日

touchstart,touchmove判断手机中滑屏方向

摘要：滑动屏幕 touchstart:接触屏幕时触发，touchmove:活动过程触发，touchend:离开屏幕时触发首先获取手接触屏幕时的坐标X,Y 然后获取滑动的坐标，并使用后面的坐标减去前面的坐标，通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的，所以可使用Math.abs()进阅读全文

posted @ 2016-10-10 18:03 天天饱阅读(14929) 评论(2) 推荐(1) 编辑

mousewheel,DOMMouseScroll判断滚轮滚动方向

摘要： firefox使用DOMMouseScroll,其他浏览器使用mousewheel 首先绑定一个滚动事件当滚动时获取wheelDelta值，firefox使用detail:值为下滚3上滚-3,其他浏览器使用wheelDelta:值为下滚-120上滚120，通过判断其值为正或者负即可判断鼠标滚轮上滚阅读全文

posted @ 2016-10-10 17:48 天天饱阅读(6122) 评论(0) 推荐(0) 编辑

点击打开侧边栏

摘要：效果 html css jq 阅读全文

posted @ 2016-10-10 10:25 天天饱阅读(392) 评论(0) 推荐(0) 编辑

clip实现圆环进度条

摘要：效果主要通过clip和transform:rotate实现把圆环分为左右两个部分，通过角度旋转对图片剪切旋转角度<=180度的时候之旋转右边，当大于180度时右边固定旋转180度的同时旋转左边。 html css jq获取进度并算出旋转角度赋值最终实现效果 // <![CDATA[ $(func 阅读全文

posted @ 2016-10-10 10:18 天天饱阅读(298) 评论(0) 推荐(0) 编辑

点击按钮实现缓慢返回顶部

摘要：在JQ中可以直接使用animate()来实现动画，在JS中可以通过定时器setInterval()来实现。 html JQ实现方法：阅读全文

posted @ 2016-10-10 09:49 天天饱阅读(816) 评论(0) 推荐(1) 编辑

如果你只做自己能力范围之内的事情,就永远没法进步

天天饱

公告