ZVVV

只要死不了,我就还能站起来
前端交流、学习、进阶Q群:177932362

双工绑定的原理以及jq实现

"双向绑定"

“Object.defineProperty” 我们先来MDN上对 Object.defineProperty 方法的定义, The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, a...

滚动小插件的封装

"JQ滚动楼层"

“封装一个滚动楼层” var autoDirection = function(selector, timer, anim, max) { /* 主要参数说明 selector滚动区域导航的dom timer 动画运行的时间 anim滚动动画效果 ...

伪类选择器还可以这样玩

"CSS选择器"

“nth-last-child的玩法” 这东西挺有意思的,之前看过一遍文章,选择第三个到第十个可以这样玩 li:nth-child(n + 3):nth-child(-n+10) 今天一个群里有这样一个问题,3个li以下的时候li为红色,3个及其以上的时候li为蓝色,怎么玩? ul>li { background: pink; } ...

向上向下滚动小交互

"滚动"

“向上向下滚动” 滚动的交互也是越来越有趣,演变出来一系列的效果。 本文实现在浏览器窗口顶部的时候导航是样式1,向下滚动的时候隐藏导航样式2,向上滚动的时候显示样式3 我们采取优雅降级的办法写一下样式: //固定样式 .navbar-fixed-top { display: block; text-align: center; ...

vue路由配合transition过渡

"vue"

“vue路由” Vue.js的一大特色就是构建单页面应用十分方便,既然要方便构建单页面应用那么自然少不了路由,vue-router就是vue官方提供的一个路由框架。总体来说,vue-router设计得简单好用。 一个demo: <!-- html部分,省略head --> <div id="app"> <div cl...

展示项目及横竖屏

"展示项目"

“组件展示” 视觉同学定义好了一些设计规范,需要展示出来给前端同学参考。 搭建一个原型展示的网站。 用到了html5的download属性,非常方便: <a href="http://www.w3cways.com/demo/1/some-realy-crazy-file-name-389247823879472398.txt" download="test">点击...

调用腾讯视频的正确姿势

"腾讯视频"

“腾讯视频” 首先iframe可以调,但是我很不喜欢这种方式,总觉得页面里iframe多了各种不爽,不知道是不是洁癖。 首页要引入腾讯视频的库文件: <script src="http://qzs.qq.com/tencentvideo_v1/js/tvp/tvp.player.js" charset="utf-8"></script> 腾讯视频没...

原生绝对居中的简单封装

"vue分页器"

“position” 算是简单的一个控件,可以的话还可以封装一下遮罩层的,工作中都已经有封装好的组件,就不多此一举。 var setPosition = (function () { var docElem = window.document.documentElement, body = window.document.body, ...

vue过滤器、vue-resource

"vue分页器"

“vue” 过滤器和1.X有很大的变化,感觉就是越变,对原生的js要求越严格。 全局过滤: Vue.filter("fixMoney", function (value) { return "¥" + value + "元"; }); 局部过滤:自定义变量在value后面进行操作。 filters: { ...

vue初体验

"vue分页器"

“vue” 一款MVVM轻量级框架,学习一下vue的常用指令,并用这些指令和方法写一个简单的分页器。 和avalon类似,vue也自定义了很多指令,基于viewmodel的框架都是拦截动态修改了数据,从而实现view层的实时更新。 Vue.js的常用指令: v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 ...

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...