摘要: 无缝滚动好像是互联网广告最大的一个载体,可以用“无处不在”来形容它。不过它比起早期的闪光字体,浮动广告算进步了。由于需求巨大,做前台迟早会遇到它。我先给出结构层部分,再慢慢讲解其实现原理。 <dl id="marquee"> <dt> <img src="http://images.cnblogs. 阅读全文
posted @ 2016-09-07 22:55 reaf 阅读(406) 评论(0) 推荐(0) 编辑
摘要: 在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论。总结下来,响应式比之前想象的要复杂得多。 1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式文件 2. 一个模块的mq样式整体放在这个模块的样式的之后,符合层叠逻辑,也同时以免被层叠。 3. 阅读全文
posted @ 2016-09-06 23:39 reaf 阅读(1813) 评论(0) 推荐(0) 编辑
摘要: 回到顶部有多种实现方式: 1.通过锚点然后定位,这个比较简单,但是效果比较生硬,就不多解释了 2.通过JavaScript实现,用到了定时器,window.onload,window.onscroll,setInterval,clearInterval,document.documentElemen 阅读全文
posted @ 2016-09-06 22:18 reaf 阅读(448) 评论(0) 推荐(0) 编辑
摘要: 今天看到一个比较有趣的效果,非常简单,就是子导航的高度不是固定的,当鼠标移上去以后导航的高度会随着子导航的内容改变而发生变化,不多说了,我做了个demo,如下 阅读全文
posted @ 2016-09-03 19:39 reaf 阅读(409) 评论(0) 推荐(0) 编辑
摘要: 有时候,我们需要大量的重复代码去实现一个非常简单的功能,这不仅浪费时间,而且效率低下,例如: <div class="aa">你好</div><div class="aa">我好</div><div class="aa">大家好</div><div class="aa">前面和后面</div> 我们 阅读全文
posted @ 2016-08-31 21:57 reaf 阅读(526) 评论(0) 推荐(0) 编辑
摘要: 突然想到以前看到当当上有个效果,当鼠标移上去,图片边框是运动添加上的,还以为是css3或者是canvas做的呢,做完幽灵按钮后,才知道,so easy,只不过是animate+position的杰作。附上代码 当然,其他的你想要的样式,不妨举一反三做一下,也很简单,只是个运动而已 阅读全文
posted @ 2016-08-31 14:40 reaf 阅读(326) 评论(0) 推荐(0) 编辑
摘要: 幽灵按钮,听名字有点不解?无碍,简单的来说就是一个按钮,移上去背景动一下,然后弹出个提示框,提示框在按钮的正上方而且居中,按钮上方有个图片,移上去有旋转360deg效果。不多说了,还是附上代码吧。由于采用了css3属性,所以,只兼容高级浏览器 主要知识点:transformtransitionbox 阅读全文
posted @ 2016-08-31 14:34 reaf 阅读(915) 评论(0) 推荐(0) 编辑
摘要: 记得曾经做过一个公交查询系统的二期开发,其中一个模块要求固定标题和左侧栏,当时不知道是哪根筋抽了,一门心思想着position:fixed;在margin:0;padding0;还是可以用的,但是当margin和padding改变值以后就不能用了,以至于弄了一天都没弄出个啥,好在当时要求不高,还是勉 阅读全文
posted @ 2016-08-27 01:24 reaf 阅读(576) 评论(0) 推荐(0) 编辑
摘要: z-index和transform是CSS中的属性,但很少同学将二者联系到一起,感觉他们八杆子打不上。事实真的是这样吗?如果你也不能确认,这篇文章就值得你花点时间阅读。因为阅读完了,你会有所收获的。 堆叠上下文(Stacking Context) 在开始今天的主题之前,先得回忆一下CSS中的Stac 阅读全文
posted @ 2016-08-19 19:13 reaf 阅读(11331) 评论(0) 推荐(3) 编辑
摘要: 最近在面试,好多都问到了有没有写过插件,仔细想想,工作快两年了,平时用到的东西也挺多的,然后总结一下,写了个自定义宽高的轮播图插件,附上地址https://github.com/hoyuet/plugins/tree/master/carousel 阅读全文
posted @ 2016-08-19 17:38 reaf 阅读(271) 评论(0) 推荐(0) 编辑