预览模式: 普通 | 列表

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

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

查看更多...

Tags: swiper

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

 最近的项目有用到特别中文字体,最终效果如下图:

红线标记处均为字体,可选中,交互起来,比图片方便太多了。
解决思路就是将体积巨大的中文字库,取子集,只包涵要使用的那部分文字,因此体积就很小了(包含100字左右的中文字,也只有50K左右,如下图:)。英文字库因为本身就小,就没必要再这么做了。
 
为了实现以上“取子集”的目标,实际要解决的问题:
1、把字库由TTF格式自动转化为woff、eot、svg等兼容格式,并放到相应路径下。
2、自动分析并提取网站中用到特殊字体的文字-----这一点很重要,否则每次还要去人工整理,很麻烦。
 
以上是理论解释,解决方式主要有两条途径:
1、通过网站,国内目前只有:http://www.youziku.com/这一个站。我之前转化成功过,但前阵子出现问题,目前正在恢复中。上传个性化字体,要提请站长人工审核。站长服务意识不错,就是很忙。
2、本地用软件转化。我找到了一个很好用的软件:font-spider(字蛛)
 
使用方法网上有详细介绍。需要用node.js的npm方式安装。安装成功后,转化就很方便了,基本步骤是:
1、原始字库文件,必须是ttf格式的,如果没有ttf,要自己想办法转化好。
2、写好html+Css---举例:h2{font-family: 'xzst';}注意尽量把font-family写在最前面
3、一句代码就转化成功,太方便了!转化过程如图:
从此再也不用图片去实现个性字体了!
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1215

阿里图标库iconfont的一个协作功能Bug

 据我了解,长沙很多前端团队还没有使用图标字体(font-face)。

但我已经在两个移动端项目中使用了,好处很多--比如图标都是矢量的,大小、颜色、效果都可以任意控制。相比之下,使用图片缺点就太多了:比如变个颜色都要准备2张图,做响应式设计还要准备大小各一套等。图标字体的查询和管理,国内可能使用这个阿里的网站www.iconfont.cn。国外有一个名声很大的www.icomoon.io,我还没有仔细研究过。
iconfont提供了简单实用的协作功能,常用图标你可以考虑到这里找现成的。个性图标,可以自己做成SVG格式上传。团队成员可以互相使用、管理图标。比如可以由设计师专门负责查找、绘制、命名、上传图标,其它前端组成员,只需要使用即可。图标全部有名称、有简图,可以分项目管理,很是方便。在没有这种协作之前,开发组内部成员要共享图标,就必须由设计师提供图稿,很不方便,还要绞尽脑汁给图标命名。
 
这里要说的是,我发现了几个不太好用、或者说是BUG的地方:
1、登录很奇怪,目前只能使用新浪微博的帐号登录(想不通为什么阿里的项目不用自己的帐号体系)。
2、网站有时很慢,但是一翻墙就快了。(难道在国外)?
3、最大的问题,是我使用chrome时,发现“协作成员”那里,无法添加成功---可以添加、搜索到其它成员的帐号(新浪微博帐号),但是选中后再点“保存修改”,浏览器无反应。只到后来,我换了一个傲游浏览器试了下,才成功了。
 
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3984

HTML中实现逐帧动画的思路-用tweenMax

逐帧动画在FLASH中是很好实现的。但在HTML世界中,并没有一个很正统的方法。前两天看scrollmagic的示例文件,意外发现他用tweenMax实现的一个逐帧动画,把代码提炼出来做了以下这个DEMO:

 http://contactu.cn/2015/test_frame/

 

知道了这个思路,那么就可以用其它的方法,比如setinterval等函数来实现了。

用timelineMax之类的强大工具,更可以实现各种播放控制,比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。

---总之,只要能实现“时间线与图像”的结合,接下来如何控制时间线,就是tween类框架的强项了。


谢谢谢佳浩同学用css的方式实现了这个效果,使逐帧的方式更加丰富,主要代码如下。

点评:js优势是可以自由控制时间线,比如各种播放控制、事件响应等。css方式优点是渲染快,简便,css定义方便。

XML/HTML代码
  1. .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}  
  2. @keyframes demo{  
  3.     0%{ background: url(img/1.png) center center no-repeat;}  
  4.     20%{ background: url(img/2.png) center center no-repeat;}  
  5.     40%{ background: url(img/3.png) center center no-repeat;}  
  6.     60%{ background: url(img/4.png) center center no-repeat;}  
  7.     80%{ background: url(img/5.png) center center no-repeat;}  
  8.     100%{ background: url(img/6.png) center center no-repeat;}  
  9. }  

 

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

原来要在手机上测试刚做好的页面,都是丢到服务器上去,然后用网址访问。改一次就要传一次,效率低下。

 今天跟牛人学了一小手,直接把本地电脑定义为服务器,使用node.js。总之结果就是,操作很傻瓜(几分钟搞定),要访问的网页想定在哪个目录都可以。具体操作方法见下文:http://www.cnblogs.com/wangfupeng1988/p/4143996.html

Node.js下载地址:https://nodejs.org/#download

-------------------------------------------

然后手机接入局域网wifi,用浏览器,用IP地址访问电脑IP地址即可,比如:http://172.16.6.218:8081/demo.html

分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1273

微信游戏300多套集合包-有偿分享

 从朋友那里得到的一套微信游戏资源包,需要者请往我支付宝上打50元并留言或写邮件给我(支付宝帐号258754@qq.com,杜**),我即告知网盘分享方式。

现在很多企业需要一些小游戏来丰富自己的微信平台,这套小游戏包,是非常超值的。
另外,我简单测试了一下,游戏基本可玩,但有些需要修改一下图片、资源路径等,对我来说不是啥大问题,有需要者也可以找我有偿修改..........

查看更多...

Tags: 微信游戏

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

简单css3-transform鼠标效果

 测试页地址:http://contactu.cn/2015/flower/trf.html

效果比较简单,一般基础都能写出。主要是考虑此类效果比较常用,我自己做了一下思路整理,以便于工作中快速调用

首先是把transition提炼成一个单独的class,这样调用时只要这样写就行了:

XML/HTML代码
  1. .trans  {transition: all 0.5s ease-in-out;}  
  2. .trans03{transition: all 0.3s ease-in-out;}  
  3. .trans08{transition: all 0.8s ease-in-out;}  
  4.   
  5. //调用时这样写  
  6. <div class="tit trans">变化稍慢<br />Y轴转动</div>  

接下是熟悉transform的emmet速写,不熟悉emmet的朋友请自行百度

XML/HTML代码
  1. trf  transform:;  
  2. trf:r  transform: rotate(angle);  
  3. trf:rx  transform: rotateX(angle);  
  4. trf:ry  transform: rotateY(angle);  
  5. trf:rz  transform: rotateZ(angle);  
  6. trf:sc  transform: scale(x, y);  
  7. trf:sc3  transform: scale3d(x, y, z);  
  8. trf:scx  transform: scaleX(x);  

 

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

在WIN7中,按win+pringscreen键,是可以出现选择框的,但在WIN8中,简单的拷全屏。此问题我向印象笔记的帮助中心提交了问题,答案是“修改快捷键即可”。

我照做成功了---我估计可能是win8中把pringscreen键做了特定功能,不允许其它软件程序调用。

另外说一句,印象笔记的帮助中心服务还是不错的,虽然排队用了三四天时间,但每次都正确的解决了问题,反馈表单和邮件格式的设计,也都很科学高效---证明印象产品是一个强大的体系。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1596

 基于bs版本: v3.3.4我做了一下定制,主要选择项如下:

定制后,主文件bootstrap.css由139K减少到102K

最后我决定所有的JS文件都不要了,连那仅有的三个勾都没选。

定制地址:http://v3.bootcss.com/customize/

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

六边形-蜂巢形-花瓣形导航菜单

 用于某广告公司的内页导航,在网上搜索了一下,好象没有类似的六边形导航,就自己做了一个。

最关键就是搞清六边形的坐标关系,用一张简图表述:

具体代码请移步此页面:http://www.contactu.cn/2015/flower/

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

展示我制作的一个微场景动画演示--设计是一个朋友做的,我完成前端代码。


展示地址在此:http://www.contactu.cn/2015/ffjr/iframe.html

 

在性能较差的安卓手机中,注意几点........

查看更多...

Tags: 微场景 微信场景

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4330

在知乎上看到一则回答,符合我现在的人生追求,摘抄以自勉。

XML/HTML代码
  1. 杨毅第一职场网“教练式”职业规划首席顾问

     

    权且抛砖引玉。说一说我的经历吧。  
  2. 我大学的时候对于咨询非常感兴趣,但专业又是冷门,为了进咨询公司,我大学三年的时间都泡在图书馆,把书架上关于咨询的所有相关书籍都翻了一个遍,做了足够的知识储备。找工作的时候,眼看着同学们一个接一个找到工作,而自己的期望中的工作又遥遥无期,所以很失落,但一直在固执在坚持,相信天生我材必有用,总能遇到赏识自己的那个HR,不然三年的图书馆就白泡了。果然,苍天不负有心人。在我就要绝望的时候,来了一家咨询公司招聘,听宣讲,感觉这家公司简直就是来招我的。那种感觉太棒了!最终,四轮面试,笑到了最后。虽然那个时候工资很低,但别提多高兴了,因为心里一直向往“穿西装,打领带,手提电脑穿梭于各大CEO办公室”的咨询工作。  
  3. 毕业的第一年,感觉一切充满激情。第二年,激情慢慢消退。第三年开始,各种不耐烦开始占领情绪。公司不断加薪,提为合伙人,也依然不能重燃自己的激情。虽然业务能力不断提升,提交的方案也得到客户认可,但总感觉少了点儿什么。有一次和领导说,为什么我提案之后没有成就感呢?是的,我缺少的就是成就感。另外,总得为了适应这份工作,而不得不违背自己的价值观。就如题主所说,上班很累,勾心斗角、逢场作戏,感觉这不是自己想要的生活。  
  4. 后来辞职创业,创办第一职场网,从事职业规划咨询。经过这么多年的折腾,我逐步明确了自己理想的生活是什么:按自己的想法做事,以独立客观的第三方标准,为他人提供服务;不为钱而活,不喜欢的客户(或自己不认同的客户)可以不接;有自己独立的时间,去思考自己喜欢的问题,以帮助更多的人。  
  5. 现在的工作,几乎每天加班,包括周六。曾经有一段时间,早上起来第一件事是开电脑,晚上睡觉之前的最后一件事是关电脑。不过现在学会了忙里偷闲,会抽时间放松下自己。  
  6. 我曾经在2014年底写过这样一篇文章;《在这个物欲横流的年代,还有多少信仰可以坚持? 》,里面有这样一段话:我们只是想以自己的方式活着,按照自己信仰的价值观,做自己想做的事,不掩饰、不虚伪、不强求、不讨好、不谄媚、不看别人脸色。仅此而已。  
  7. 我想,这段话就是我内心里一直在追求的价值观,而且,我也在按照这个价值观在做事。虽然每天加班,都工作到晚上11点,但依然感觉不到累。每天晚上关上电脑时,会想着如何开展第二天的工作,并希望第二天早早到来,渴望早点儿投入到工作当中。前几天还在微信上看到一篇文章,说那些每天只睡四个半小时的人是如何保持持续的激情的。虽然我做不到只睡四个半小时,但我完全理解要达到这样一种状态,需要怎样的条件。那就是:你做的事是你发自内心追求的,能够带给你成就感的,并且符合你自己的价值观。  

 

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2400

生肖抽奖动画示例-TimelineMax/staggerTo

 
谁能写出更短代码?
 

查看更多...

分类:greenSock | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 3530

 主体结构方面

  • 重点: 请大家从目前这一稿设计图中,找出觉得有困难的局部,届时我来进行实操式讲解--顺便用此方式,了解正确的代码风格及用法。
  • 重点: 由大结构到小结构,CSS如何规划、命名

代码及操作方面
  • 重点:团队中唯一的前端人员,是我重点关注对象--请提供几页作品,我了解一下他的习惯与缺点
  • 请美工现场演示一下切图操作,我了解一下他的习惯与缺点
  • 选2-3人编码人员,现场演示下自己的html+css代码书写方式,大家一起讨论。--如无更高效方式,请所有涉及编码人员学习emmet用法,以提高代码书写效率。

插件及细节--这个只讲解大概方法,具体操作由相关人员自行操作
  • 由设计稿可见,小图标比较多,请前端人员实验http://www.thinkcmf.com/font,用此方法搞定所有小图标,把各种按钮样式,包括长的、圆的,不同颜色和尺寸的--尤其是对IE7、8的兼容性测试。---已做:http://www.contactu.cn/article.asp?id=167  测试FontAwesome对于IE8的兼容性
  • 所有装饰性细节,只要对排版影响不大的,一概使用CSS3方式,比如圆角、圆形、阴影、hover、首字伪元素等
  • 重点: 把设计稿内所有用到superslide的地方,进行统一讲解。http://www.superslide2.com
  • 瀑布流用法--这个有现成的文档和例子,可自行使用:https://github.com/duitang/waterfall

如何交流与反馈
  • 请各人说一下自己是如何写工作日志--推荐用印象笔记等在线工具,直接从中导出问题转发送邮件--解决问题后,将解决方法记录,甚至写文章
  • 如何描述问题--尽量将作品上传到服务器,给出URL,便于团队通过浏览器分析
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1947