ZVVV

只要死不了,我就还能站起来

dialog一应俱全

"dialog一应俱全"

“dialog” 在2.0的基础上增加了弹框出来的东校和关闭的动销 如果是ie低版本浏览器,就让弹框直接收起来,如果是高级浏览器,则加上动画的类在让它消失 if(isIE){ elements.dialogBox.style.display = 'none'; }else { elements.dialogBox.className = ...

小工具之迷你幻灯片

"迷你幻灯片"

“封装一个幻灯片函数” 准备封装成jq插件的形式,想想还是算了,包装成一个函数就足够,最关键的问题是真没玩过jq插件。哈哈 优点: 兼容到ie7,代码较小 避免css和js冲突,类名的全部为公共样式,调用幻灯id识别 参数较为完成,基本满足幻灯的各种需求 function miniSlide(imgW, slideBox, len, interval, slideTime, ...

列表两端对齐及兼容问题

"应对多种浏览器的完美解决方案"

“像编辑word一样实现两端对齐” 左对齐和右对齐都是很常见的对齐方式,但是很多时候两端对齐也是必须解决的。文本对齐的text-align:justify,大家都不陌生,它只兼容ie浏览器,然而两端对齐对于很多响应式网页和移动端的自适应有很大的用处,比如几个按钮,不管你屏幕尺寸怎么变化都要他们之间的间隙保持不变,css3对这一块也有解决方案,虽然兼容性不是很好。不失为一种好的渐进增...

如何用js操作伪元素

"动态修改伪元素的内容"

** 不知不觉又要下班了,忙了一天,刚才逛sf的时候看见有人提问怎样操作伪元素,觉得挺有意思 ** 都知道伪元素是不能直接被JavaScript选中了,那如果想修改伪元素我们通过都会用真实的dom去替换掉这种选择器,但如果非要操作他呢? 办法还是有的,我选不中伪元素,我可以选中伪元素的父亲,然后增删类别进行替换。还有一个技巧就是伪元素支持data-content属性。 <p...

avalon显示隐藏做个tab

"avalon很好的mvvm框架"

** avalon对dom的操作很强大,学习ms-visible,ms-if语句 ** visible顾名思义,就是把它隐藏了,display:none;但是dom是没有移除的。如果用if就行判断,条件不成立就直接移除了,单纯的api只是熟悉的过程,如果写一个tab控制一下,则需要引入一个变量,判断显示隐藏。 <div ms-controller="tianzi"> ...

avalon路由

"avalon很好的mvvm框架"

** 和ng一样。avalon的路由功能很强大也很方便,昨天晚上看了一下文档,今天抽空玩了一下 ** 想到了两种方法实现,原理都是差不多的。 <body ms-controller="test"> <p><a href='#!/aaa' ms-class="@className == 'aaa' ? 'ddd' : '' ">点...

avalon

"avalon很好的mvvm框架"

** 今天是17年1月8日,吉祥的日子。倒霉的2016也终究过去,不管输了多少金钱,万幸的是身体健康,平平安安。自己走错的路诡着也要走完。 ** <div class="container"> <div class="row"> <div class="col-md-5" ms-controller="todos"> ...

倒计时

"空闲写一下倒计时"

** 难道这么基础的东西不多练一下,插件用多了只能是累赘 ** function remainTime(year, month, day) { var date = new Date(), newDate = new Date(year, month - 1, day), left = newDate.getT...

非设计人ps总结

"长期更新一下ps小技巧"

** 不是专业的设计师,所以拿烂笔头记下来 ** 1,下载一个Web_Design_Actions.atn插件,放在Presets\Actions目录,然后选中任意图层ctrl+shift+F2快速切片 2,ctrl+鼠标左键选中图层不用说吧 3,替换图片背景(非psd),双击解锁图片,魔棒选中需要修改的区域,更换前景色,ctrl+delete修改 4,指向自动选择,alt+鼠标右...

前端路由,陈酒新酿

"兼容到ie7+的路由实现"

** 前端路由,老话新谈,单页面spa项目,如果页面过多,路由就是必然的 ** 现在很多框架路由都只支持到ie8及其以上,那我们有的项目要支持到ie7,怎么玩? 还有好jq,还好有sammy.js。构造了一个小小的列子: 在线测试 支持路由页面的事件及方法调用。 支持ajax 兼容性就不说了,支持一般的项目没问题。 this.get('#/test', funct...

快速排序

"数组的快速排序"

** arr.sort()如何进行快速排序 ** 前端经常对后台传过来的时间日期等就行排序,那么玩玩Array.sort(); function sortRules(x,y){ return x - y //从小到大进行排序相当于return x-y>0 return y - x //从大到小进行排序相当于return x-y<...

ie8以下的浏览器怎么适应

"给ie浏览器添加类名"

** 本文涉及的代码是以前同事写的,现在已经去了饿了么。今天偶尔看到,用来解决ie浏览器的适配问题还是挺好的 ** 具体思路就是判断ie版本,然后在html根节点注入相应的类别。 说起来简单。代码还是有那么几行 ;(function(){ // 移除字符串两侧的空白字符的函数 function trim(str) { if...

HTML5 LocalStorage 本地存储

"localStorage一练"

Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样。 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage...

[转]移动端适配之雪碧图(sprite)背景图片定位

"移动适配"

想到移动雪碧图的适配问题,网易一位同学的文章挺不错的。根据之前的移动端适配之rem找到了解决方案。我就记录一下吧。原理也就那么回事 以640px视觉稿切出来的图,如果只是适配640px的屏幕,直接使用px定位完全没有问题,但是考虑到其他的屏幕,所以我们会使用rem来等比例缩放背景图。是的,把原尺寸转换为rem就可以了 html代码结构 <div class="test-s...

滚动条到底占宽度吗

"神奇滚动条"

元素的滚动条会占据一定的内部空间的, 造成内容被挤压.原来有滚动条和没滚动条时, 元素内部的空间是有变化的 今天开组件讨论会提到一个细节,就是希望鼠标放上去的时候出现滚动的,很简单的需求。当时一个同事提出滚动条是会占据宽度的,所以鼠标放上去会出现抖动,会挤压周围的内容,细想总觉得怪怪的,查了一些资料写了个demo大跌眼镜。 demo地址 我刚开始写的时候搞了...

重新、开始

"生活"

犯过一些错,走过一些路,是时候扛起自己的责任 连续几天反思着自己,仿佛在山穷水尽之间迷失了自己。这几天脑子里出现最多的画面就是父母老了,还在为你操心。整个人都浑浑噩噩的,生活了无生机,毫无斗志。 我真的是一个赌心很重的人,反观这二十几年的生活,我始终觉得我从小就是赌心很重的人,总是觉得赌一赌运气不会那么差,小时候不管是砸金花还是遇上什么事情,总是会奋力一搏,这就像一颗定...

接上一篇文章,写个js加载器。

"js加载器"

让加载变得更有趣,不妨封装写个通用的加载器,可以加载样式,图片,脚本等文件。 开发移动端的时候。通常打开一个h5页面都会出现正在加载,这个类似于pc端发送ajax请求的过程。但是有很多不同。 对于图片的处理通常有懒加载。脚本也可以按需加载,现在很多框架都可以实现。原理就是路由然后按需加载页面需要的js和css。 那难道写一个h5还要搞这么麻烦? 为了让加载更有趣,我们就写个加载器...

木好意思,正在拼命加载中。。。

"环形进度条"

在一个群里一哥们说他去面试的时候就被这个环形进度条淘汰了,因为他没有找到合适的解决方案。好奇现在网站有很多loading效果啊,为什么还要面试写一个环形条呢? 下面是收集的一些loading: svg loading loading.io 常见效果 其实大多数在调用数据,返回ajax请求过程中,都是做一个动态的gif图片loading,这个过程就是在取值,根本没有用到这些时...

导航,我觉得可以玩玩

"几种网站常见导航"

国内的导航经过好几年的沉淀。好像就那么几种常见的样子。国外的一个网站专门写一些灵感创作的新玩意或者炫酷东西,感觉挺有才的 我总结一下无非就是商城购物网站导航,然后里面分很多二级导航,一般的企业和博客导航 1,滑动导航?没有css3怎么玩?那就用脚本呗,曾经很多公司都玩这种导航,应该在当时很风靡。 ```html <div class="nav" id="nav"&g...

全站响应-自适应手机电脑全家

"断点布局技巧"

最近做大型的营销活动,要设备全响应,坑真多,关键是他妈的活动页面图片太多了。蛋疼,真的蛋疼 静下来之后,还是静静的总结一下。因为要兼容全设备,所以全响应是必须的。怎么搞? ####1,第一步需要告知浏览器将页面宽度设置为设备宽度,并禁用缩放行为。 <meta name="viewport" content="width=device-width, initia...