<![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> http://www.contactu.cn/ zh-cn PBlog2 v2.4 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> http://www.contactu.cn/images/logos.gif http://www.contactu.cn/ 湖南长沙前端开发与培训-通途工作室 http://www.contactu.cn/article.asp?id=237 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Thu,06 Apr 2017 20:42:55 +0800 http://www.contactu.cn/default.asp?id=237  http://www.contactu.cn/2017/sp/demo2.html

 
适用场景:
一个全屏背景+自适应前景点的例子。窗口尺寸随便怎么变化都行。特别适合用于制作全屏沙盘类的案例。
 
原理:
根据容器尺寸,计算背景图、前景点的位置,前景利用css的transform-scale/translate子属性进行自适应。实际使用中,是用了我熟悉的tweenMax实现了快速转换,否则要用css的Matrix矩阵滤镜,俺不熟。
 
使用方法:
在设计稿中测量背景图尺寸,所有点的位置点。按我的例子放置,即可。
 
]]>
http://www.contactu.cn/article.asp?id=232 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Mon,06 Mar 2017 09:04:21 +0800 http://www.contactu.cn/default.asp?id=232  年后实战了两个移动端(前端)项目,都是使用的VUE2.0,做的是多页面类型(非SPA),地址:

保姆厨房
阅读护照
 
收获:
1、让我可以熟练的运用FLEX布局。估计提升了50%的布局效率。原来的多层结构、乱七八糟的修补型代码都被淘汰了,结构、样式都更加简洁。
2、熟练使用scss。之前已经用了小半年。但是有时候没有形成自己的scss书写模式。这次两个项目,最大的收获就是,小项目,不再细致考虑重用,除了页头页尾、导航,其它的布局块,全都一个个写单独的结构。这样脑子里不用思考命名、重用这些问题,写起来极快。
3、VUE的mixins功能充分发挥。多页面模式下的“共性功能”,全部提出来放到common.js中的mixins代码中,不用再写到每个页面的vm结构中。
4、试验了多个第三方组件、库。对于vue2.0生态的众多第三方组件有了实战经验。真实使用了element-ui(饿了么开源)。
5、搞清了iscoll之类滚动插件的利弊。---这里被视频课程中的老师带着,绕了一个大圈。以后再专门说这个技术问题。
6、自己试着写了一个VUE的小组件,对于组件的template模板使用的几种形式,有了更多选择。在多页面开发模式下,一些共性功能块,还是值得提炼成组件的。我这次提炼的组件的,就实现了“锁定长宽比的图片容器”。这个功能在页面中大量存在,写个组件能大大的提升效率。
]]>
http://www.contactu.cn/article.asp?id=230 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Sun,05 Feb 2017 12:15:44 +0800 http://www.contactu.cn/default.asp?id=230 利用春节假期,系统的学习了VUE2.0/组件/webpack/SPA技术。正好儿子每天要做口算题,就利用这些新学的知识,花2天时间,为他写了一个移动端的小型出题软件。

 
点击这里试用
 
 
 
功能点:
  • 随机出题,加减均可;
  • 可进行一些基础模式的配置,
  • 对加减法做了一些优化,避免出现太简单的题目;
  • 练习模式下,可进行计时、自统计错题功能
  • 一些动画效果用GSAP实现
  •  
    技术点:
  • vue2.0组件
  • vue-cli2.0+webpack生成单页应用
  • sass、flex布局
  • localStorage读写
  • ]]>
    http://www.contactu.cn/article.asp?id=227 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Mon,14 Nov 2016 19:56:29 +0800 http://www.contactu.cn/default.asp?id=227  演示:http://contactu.cn/2016/round/round.html

     
    ]]>
    http://www.contactu.cn/article.asp?id=218 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Mon,05 Sep 2016 17:19:27 +0800 http://www.contactu.cn/default.asp?id=218  此次我帮老朋友做个小项目,升级黄花机场触摸屏软件(长沙的兄弟以后有机会可以到机场大厅试用)。

     应大家要求放个图:

    老程序的实现方式,是HTML+FLASH+一个exe应用程序调用IE浏览器。分工是,activeX生成EXE程序,调用IE浏览器实现全屏。所有HTML文件都部署在本机,由FLASH来实现一些复杂交互,比如“大厅地图的放大缩小与拖动”。这个方案的不便之处显而易见:

    1、必须使用一个加壳的exe程序,依赖IE6浏览器。

    2、FLASH没有源文件提供无法升级。

     

    因此,此次升级,准备采用以下方式:

    1、在网上查到,chrome可以使用快捷方式直接全屏启动,这样写:

    Javascript代码
    1. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk ‪ http://localhost:88/index.html

    此快捷方式要自动打开index.html,必须使用虚拟站点--kiosk这种方式简直就是为触摸屏量身定制的,已经屏蔽了右键!甚至光用鼠标都无法关闭,只能用键盘方式才能切出来。

     

    2、用HTML5+CSS3+JS方式完全替代FLASH。采用强大的d3.js内核实现地图功能,具体方式我在另一篇文章中有演示

    3、kiosk全屏方式只支持虚拟站点(比如localhost),我还必须在本机架设一个虚拟站点。我用node.js小程序实现了,不使用重量级的iis--当然,在这种单纯环境下,两者区别不大。

     另外,强大的node.js可以提供直接调用chrome启动的功能,写法如下:

    Javascript代码
    1. // 调用chrome全屏方式  
    2. var childProcess = require('child_process');   
    3. childProcess.exec('start chrome --kiosk http://localhost:'+PORT+'/index.html');  

    原来实现全部功能,需要点击2次,一次打开node.js的虚拟站点支持,一次打开chrome全屏方式,有了上面这个调用方式,只需要一次点击,就能完成全过程。我把这一次点击做成了一个windows的bat文件,并且采用开机自启动。

    这样,每次一开机,就自动进入到chrome全屏状态,并且切换到index.html页面!全自动化!

    chrome全屏启动方式参考:http://www.cnblogs.com/abel/p/3235839.html

    ]]>
    http://www.contactu.cn/article.asp?id=217 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Wed,24 Aug 2016 12:48:28 +0800 http://www.contactu.cn/default.asp?id=217  按到朋友的一个项目,制作黄花机场的位置示意图,原来是几年前用Flash制作的。到现在就存在一些问题了,比如说代码不透明,不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。

     
    项目地址在:http://contactu.cn/2016/d3/demo5.html
    制作过程有点小曲折。问题的核心当然是这个放大缩小拖动的程序。我用百度在国内范围找了半天,都没有很合适的。找到的几个都功能点小缺陷。不得已动用翻墙工具,用google搜索了一下,找到了一个:https://bl.ocks.org/mbostock/6123708
    此程序核心用的是svg模型,用的是著名的d3.js框架。本来我想用纯DOM结构解决问题,可是实在没找到更好的,加上之前对SVG又有点研究,于是决定使用这个。找这个东西就花了几小时。
     
    之后总体没碰到大的问题。对SVG的结构又有了更深的理解。
    另外,对于d3 zoom的初始值的设定,默认情况老是从1开始,但是要求是从我设定的值开始。花了2小时用google查资料,最后发现了:
    Javascript代码
    1. zoom.scale(ratio_init);  
    2. zoom.event(_svg.transition().duration(200));  
     
    搞定了这个问题。
     
    此次的最大收获就是:
    国外好东西真多,google+英文关键词搜索才是王道。
    ]]>
    http://www.contactu.cn/article.asp?id=171 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Fri,06 Feb 2015 12:28:08 +0800 http://www.contactu.cn/default.asp?id=171 展示我制作的一个微场景动画演示--设计是一个朋友做的,我完成前端代码。


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

     

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

    1、CSS3的box-shadow、text-shadow等尽量不要用。

    2、3D变形尽量少用-比如swiper的3D Flow插件

     

    3、其实动画都要尽量少用

     


     

    还发现如下一些事实:

    1、微信浏览器(6.1)的流畅度远弱于UC浏览器,据说QQ浏览器也够呛,但微场景很多人都是在微信中打开,所以要高度重视流畅度问题

    2、苹果5S手机表现很好。

    3、微信6.1之后更新了分享接口,原来的分享代码已经失效。目前情况是:

    分享标题:就是页面title

    分享正文:就是页面url

    分享小图:这个比较奇怪,似乎是位于可见位置的第一张宽于200像素的图片

     


     

    已实现的功能点:

    包括切换的3D变化、特效变化、擦拭效果、背景音乐控制、内部图横向滚动、时间线控制等。

     

    待实现的功能点:

    逐帧动画(比如那个著名的白云乱飞动画)

     

    相关链接:

    idangerous.swiper.js的loop循环方式带来的控制问题

    ]]>
    http://www.contactu.cn/article.asp?id=153 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Wed,21 May 2014 15:44:53 +0800 http://www.contactu.cn/default.asp?id=153  http://www.zzylfz.com/这个今天刚上线的项目中,用到了一个“白云不间断向左飞动”的效果,步骤就2个:

    1、制作一个边缘连续的“白云层”,要非常宽以适应较大的显示屏幕;

    2、以用下JS来驱动background-position-x

    XML/HTML代码
    1. TweenMax.to($('.cloud'),97,{'background-position-x':'-2392',ease:Linear.easeNone,repeat:-1});  

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

    另外还用了一个视差效果,当鼠标左右移动时,鸽子和文字会微微的左右摆动。使用的是jquery.parallax.js这个脚本。

    ]]>
    http://www.contactu.cn/article.asp?id=148 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Thu,27 Feb 2014 09:45:49 +0800 http://www.contactu.cn/default.asp?id=148  上个月一个朋友发了一个急单给我,要在有限的2天时间内,完成一个【2013长沙年鉴】的光盘电子版。600多张图片都集中在一个PDF文件中。用了一天时间完成了。整个过程用到了6种不同的软件,为了找到批处理图片的小工具,还试用了几种。工作效率算是蛮高了。主要技术点有:
     
    1、主框架,我手上有一套我们自行研发、修改核心的电子书页面框架,节省了主要时间。
     
    2、研究如何将目录批量放到xml中,并做到页码对应,使用EXCEL的CONCATENATE(A1,B1,C1)函数搞定
    3、如果从pdf中批量导图!!!Ap PDF to IMAGE可批量倒图
    4、导出的图片,有的是2个页码连在一起的版面,如何解决?===凌霄图像批处理专家 4.2.1搞定!需要手工选择要分版的图片
    5、编辑html,形成:做三级子目录、共有26个大目,按此编排
    6、标题间图文字缺失,要用PS单独处理!手工PS
    7、解决在IE浏览器中弹出警告框的问题----在光盘根目录下做了个使用须知:
     
    --在IE系列浏览器中播放时,因为程序调用FLASH,可能会引发如图所示的安全警告,请点选通知栏,并选择“允许阻止的内容”即可。
    --图片内容较多,如果在内存较小的电脑中播放时,200页之后的内容,会在30秒内持续加载,请喝杯茶稍候....
     
    忙到凌晨2点多,搞定、收工!向长沙人民献礼喽!事后自己也觉得有点惊心,因为时间紧,批量工作量大,在整个过程中,只要有一个小环节没有想好,可能就交不了工。比如实际操作中,发现由PDF工具批量导出的所有章节图片下的文字,都无法显示,最后只能PS手工,光这个就花了我近1小时的时间。
     
    因此,此类流水类工作,思路很重要,找到相应的工具,很重要!
     
     

     

    ]]>
    http://www.contactu.cn/article.asp?id=144 <![CDATA[湖南长沙前端开发与培训-通途工作室 - 我们的作品]]> dudu@258754.cn(admin) Fri,17 Jan 2014 11:37:55 +0800 http://www.contactu.cn/default.asp?id=144 为老客户豪爵制作的新年砸金蛋游戏。相比网上流传的一些小游戏,界面设计更正规,抽奖步骤更完整。

    正式版本是有正规配音的,这个发布版本,考虑到下载速度,去除了背景音乐与语音提示。
     

    ]]>