分类: 前端研究预览模式: 普通 | 列表

SVG滤镜的具体用法

以高斯模糊(Gaussian Blur)为例,
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜?
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写,它允许对诸如滤镜等特殊元素进行定义。
 
XML/HTML代码
  1. <defs xmlns="http://www.w3.org/2000/svg">  
  2. <filter id="Gaussian_Blur">  
  3. <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>  
  4. </filter>  
  5. </defs>  
 
 
几个注意点:
  • SVG结构代码要使用内联方式引入,否则外联CSS方式似乎不生效
  • 选择符搭配很自由,完全跟HTML一样,比如:svg#g1:hover g#gg{filter:url(#Gaussian_Blur)}
  • 如果是做按钮用途,按钮要设立一个透明的点击区域,否则鼠标只有点到有像素的位置才有效果。模糊效果要注意边缘与svg容器的边距。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3284

 很多前端小菜鸟们,还不知道啥是自动工作流。说白了,就是搭建一套自动机制,让前端码农变成无脑的流水线工人,摆脱琐碎的人工劳动。从此,你在开发环境做的东西,会自动的传送到生产环境....

查看更多...

Tags: gulp

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7261

以下 GSAP官网上的示例动画集,经过学习,我也能制作这些SVG的遮罩、形变、路径类的动画,以设计师的创作提供更大的想象空间。

MorphSVGPlugin Examples

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4386

 演示文件:http://contactu.cn/2016/svg/test_svg2.html

注意看运动轨迹与“老鹰”的交汇处的表现。


 演示文件2:http://contactu.cn/2016/svg/test_svg3.html

主要看形变动画。


我的目标就是用Svg来替代以前的FLASH,那么遮罩、矢量路径动画、形变动画这几大要素,是不可缺的。在这个演示中,可以看到前两者的解决方法。

1、遮罩就用SVG自带的clipPath标签解决。(半透明遮罩没找到办法)

2、矢量路径动画相当于FLASH的引导线动画,我用了GSAP的pathDataToBezier插件将线条变为路径 ,然后用tweenMax来实现bezier路径运动。

3、至于形变动画,用了GSAP的morphSVG,见演示2的那个音乐线条的变化 。

 

至此,几个FLASH的重点功能,都已经由SVG完美实现。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4033

纯CSS实现的菱形(斜方块)列表

DEMO地址:http://contactu.cn/2016/grid/

完全CSS3实现, 理所当然的用到了transform: rotate效果,但是真没有那么简单。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3353

 近日工作需要,每天要将一个目录下编辑过的html文件,拷贝到另一个路径下。用win自带的拷贝功能,太麻烦了,而且每次要去清点哪些文件变动了-----不如搞个小程序,自动实现。

gulp就是实现这一功能的利器,它的安装过程网上很多,就不再赘述。

gulpfile.js工作代码如下:
 
Javascript代码
  1. var gulp = require('gulp');  
  2.   
  3. // 依赖gulp-changed插件  
  4. var changed = require('gulp-changed');  
  5.   
  6. // 起始目录和目标目录,据说只支持相对路径,不过也够用了 
  7. var SRC = '*.html';  
  8. var DEST = 'dist';  
  9.   
  10. gulp.task('t'function () {  
  11.     return gulp.src(SRC)  
  12.               .pipe(changed(DEST))  
  13.               .pipe(gulp.dest(DEST));  
  14. });  
 
 
编辑完后,在当前目录下的cmd命令行模式下,运行 gulp t,即可完成拷贝过程。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5467

用Rxjs改写的的ajax函数--返回promise对象

代码如下:

Javascript代码
  1. function aj(url , type="GET" , data="json"){  
  2.     var final = Rx.Observable.fromPromise(  
  3.         $.ajax({  
  4.         type: type,  
  5.         url: url,  
  6.         dataType: data  
  7.         })  
  8.         .promise()  
  9.     );  
  10.     return final;  
  11. var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理 

这段代码使用了rx.js及jquery3的库,目前为止,似乎还只有jquery支持在ajax返回promise对象,我到mui论坛提了问,答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6434
改编自淘宝的lib-flexible,页面宽度任意变化。这种方式的优点是适合于团队协作,量出尺寸就可以做绝对定位。请点击:http://contactu.cn/2016/lib-flexible/
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2938

用到和准备学习的一些新工具

  • - 装一个json序列化插件--https://chrome.google.com/webstore/category/apps?hl=zh-cn
  • - 总监推荐使用的github管理工具:sourceTree,官网可直接安装中文版,接下来学习使用
  • - 总监推荐使用的leanCloud,可用于生成后端API接口数据,已经注册帐号,准备试用
  • - 2016年刚推出的微信开发者工具---已经安装,但发现做CSS调试真机时,还是手续比较麻烦,因此对于普通的调试,还是用.css?id=***的老方法,只有一些实在需要精确调试,一定要看到CSS代码对应效果的地方,再使用这个。http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2845

 以下代码实测无用。可能是针对比较老版本的微信浏览器而言的。

 

XML/HTML代码
  1. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
  2. <meta http-equiv="Pragma" content="no-cache" />  
  3. <meta http-equiv="Expires" content="0" />  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3014

ajax多信号逻辑的promise写法实现

ajax的这种多信号量情况经常遇上。比如:先从服务器得到一个信号变量A,如果A为真,再从服务器获取信号B,B为真,再......如果用传统的回调方式写,Ajax就是一大堆的callback堆叠,看得头疼,而且不好一层层用函数分开。

 解决这个问题,用到jQuery的deferred对象(参见阮一峰原文):$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

 我写了个简化后的例子: 

Javascript代码
  1. $.ajax("/api-a")  
  2.      .done(function(data){  
  3.           console.log("第1步完成");  
  4.   
  5.           // 如果第1步数据中的result允许,则第2步  
  6.           if(data.result){fun2(); }  
  7.      })  
  8.      .fail(function(){ console.log("第1步失败") });  
  9.   
  10. //第2步操作可以放到一个函数中,这样看起来代码更清晰  
  11. function fun2() {  
  12.      $.ajax("/api-b" )  
  13.           .done(function(data){  
  14.                console.log("第2步完成");  
  15.                console.log(data);  
  16.           })  
  17.           .fail(function(){ console.log("第2步失败") });  
  18. }  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2924

在vue.js的git上面提交的issue:

 
我在mui+vue.js构建一个slide-pic组件,图片数据用ajax方式获取,vm数据能获取到,dom也发生了相应的改变。但数据读入后,无法激活slide组件的滑动行为。
 
以下是我做的一些探索:
直接使用vue初始化数据(非ajax)可以激活滑动行为。
使用jquery的append方式,把数据结合到dom后,也可以激活。
我将mui的slide-pic组件换成另一个滑动图插件TouchSlide1.1后,同样的现象,用vm方式无法激活。
 
请问这是什么原因?到底是vue还是mui/TouchSlide 插件机制的问题。
 
XML/HTML代码
  1. 以下是无法激活滑动的主要代码:  
  2.   
  3. <div id="slider" class="mui-slider" >  
  4.      <div class="mui-slider-group">  
  5.        <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>  
  6.      </div>  
  7. </div>  
  8.   
  9. <script>  
  10. var vm = new Vue({  
  11.   el: '#slider',  
  12.   data: {list: [] }  
  13. });  
  14.   
  15.   
  16. // 读取图片slide  
  17. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  18.      success: function(data){  
  19.           vm.list = data.list;  
  20.           mui("#slider").slider({  
  21.                interval: 3000  
  22.           });  
  23.      }  
  24. });  
  25. </script>  
  26. ----------------------------------------------  
  27. 以下是可以成功激活的代码:  
  28.   
  29. mui.ajax({ url: "shopData/slidePic.json", dataType: "json",  
  30.      success: function(data){  
  31.           for (var i = 0; i < data.list.length; i++) {  
  32.                $(".mui-slider-group").append(  
  33.                     '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'  
  34.                );  
  35.           }  
  36.   
  37.           mui("#slider").slider({  
  38.                interval: 3000  
  39.           });  
  40.      }  
  41.   
  42. });  
  43.  
此问题由VUE及MUI的技术版主解答了,较常见,用nextTick就解决了
 
代码如下:
XML/HTML代码
  1. vm_slide.$nextTick(function () {  
  2.  // DOM 现在更新了  
  3.  mui("#slider").slider({  
  4.  interval: 3000  
  5.  });  
  6. })  
 

 

Tags: mui vue slider ajax

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 25506

 我当前面临的问题是,当一个页面,引用了几十个外部的插件库时,有时候仅凭插件名称,并不知道页面中的一个函数调用,是引用的哪一个库文件。因此要借助一些调试手段,chrome调试器有如下一些手段:

 
  • 在调试器的network面板中,能看到本页面内所有的js外部引用,但仅为“引用”,这些js不一定被实际调用了。
  • 如果是查找一个dom对象的行为,比如click,可以直接在event listeners中查到js调用。
  • 注意这里有两个重要选项:
    Events Listeners的具体使用:
    ancestors(祖先元素)这个选项,是列出所有上级元素的事件,可以用来区别,是本身触发,还是父级元素触发
    framework listeners(框架事件),是选择,是否列出调用的js框架,如果未选中,会显示jquery.js为最终框架(一般我们不需要显示这个)
  • 最复杂的情况,如果与行为无关,本页中只有一个函数钩子(比如查找上图中的aaa()定义部分 ),咱们需要查找“在其它模块的函数定义”时,则需要一步步的摸着石头过河:
1、设置断点,使用source面板中的断点调试功能。
 
  • 当知道函数调用关系,可以设置断点时,使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
  • 当不知道调用关系,只能步进调试---找到函数入口,然后用f11单步运行,shift+f11为越过当前函数(当前函数仍会执行);
2、还要注意用"blackbox script"功能,把jquery等库文件“放入黑盒”,否则执行会在这些庞大的库文件中跑很久。

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8538

idangerous.swiper.js相关的学习笔记

前阵子几个项目都用到了swiper,使用过程中遇到的一些小问题,汇总下来供大家参考:

查看更多...

Tags: swiper

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5861