分类: 我们的作品预览模式: 普通 | 列表

网上沙盘(jquery)

 http://www.contactu.cn/2017/sp/demo2.html

 
适用场景:
一个全屏背景+自适应前景点的例子。窗口尺寸随便怎么变化都行。特别适合用于制作全屏沙盘类的案例。
 
原理:
根据容器尺寸,计算背景图、前景点的位置,前景利用css的transform-scale/translate子属性进行自适应。实际使用中,是用了我熟悉的tweenMax实现了快速转换,否则要用css的Matrix矩阵滤镜,俺不熟。
 
使用方法:
在设计稿中测量背景图尺寸,所有点的位置点。按我的例子放置,即可。
 
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 284

 年后实战了两个移动端(前端)项目,都是使用的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模板使用的几种形式,有了更多选择。在多页面开发模式下,一些共性功能块,还是值得提炼成组件的。我这次提炼的组件的,就实现了“锁定长宽比的图片容器”。这个功能在页面中大量存在,写个组件能大大的提升效率。

Tags: vue2.0

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

2017年VUE2.0试手项目--奔奔算术

利用春节假期,系统的学习了VUE2.0/组件/webpack/SPA技术。正好儿子每天要做口算题,就利用这些新学的知识,花2天时间,为他写了一个移动端的小型出题软件。

 
 
 
 
功能点:
  • 随机出题,加减均可;
  • 可进行一些基础模式的配置,
  • 对加减法做了一些优化,避免出现太简单的题目;
  • 练习模式下,可进行计时、自统计错题功能
  • 一些动画效果用GSAP实现
 
技术点:
  • vue2.0组件
  • vue-cli2.0+webpack生成单页应用
  • sass、flex布局
  • localStorage读写
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 681

 演示:http://contactu.cn/2016/round/round.html

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

 此次我帮老朋友做个小项目,升级黄花机场触摸屏软件(长沙的兄弟以后有机会可以到机场大厅试用)。

 应大家要求放个图:

老程序的实现方式,是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

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

 按到朋友的一个项目,制作黄花机场的位置示意图,原来是几年前用Flash制作的。到现在就存在一些问题了,比如说代码不透明,不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。

 
制作过程有点小曲折。问题的核心当然是这个放大缩小拖动的程序。我用百度在国内范围找了半天,都没有很合适的。找到的几个都功能点小缺陷。不得已动用翻墙工具,用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+英文关键词搜索才是王道。
分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3081

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


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

 

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

查看更多...

Tags: 微场景 微信场景

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

 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这个脚本。

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

  上个月一个朋友发了一个急单给我,要在有限的2天时间内,完成一个【2013长沙年鉴】的光盘电子版。600多张图片都集中在一个PDF文件中。用了一天时间完成了。整个过程用到了6种不同的软件,为了找到批处理图片的小工具,还试用了几种。工作效率算是蛮高了。

主要技术点有:

查看更多...

Tags: 电子书

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

FLASH制作的新年砸金蛋抽奖小游戏

为老客户豪爵制作的新年砸金蛋游戏。相比网上流传的一些小游戏,界面设计更正规,抽奖步骤更完整。

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

Tags: 砸金蛋游戏

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

时钟包括指针式和液晶式两种显示方式。主要的研究点,时钟式主要是指针的角度规律,在网上找了点源码解决了。液晶式本来有点小纠结,本来想用图片替换---后来找到一种液晶字体,直接就解决了。

样样皆学问,对于时区问题 ,一查才知道,世界各地除了时区不一,还存在夏令时的问题--目前的这个作品中,是没有引入夏令时的算法的。

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

html5+css3+js行星环绕型动画演示

链接在这里,IE6/7可能不兼容,我只测试了chrome/firefox/傲游/IE8这几款。 

值得一提的技术点有两个:

1、背景画面用了一个自适应显示器的Jquery小程序

2、小球环绕大球的这个动画还是花了点功夫,用了一个圆形环绕公式,角度、速度啥的调试了我一下午,没办法,数学底子太差。


8月9号补充一句:

HTML页面的SEO性能是FLASH不能比拟的,写本文的第二天,这个动画页面本身就被GG收录了。

查看更多...

Tags: js动画

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

房地产FLASH整站项目(测试站)

这是与某朋友合作的FLASH全站,点击这里查看

完成是我自己从头到尾写的代码。全站的基本功能都实现了:

1、从封面开始的预载入、主要数据的XML外部载入;
2、栏目切换的消息系统,栏目间的切换动画、载入进度条;子SWF的管理;
3、全屏、音乐的子功能管理;
4、主导航条动画效果与栏目切换逻辑;
5、常见的图片列表(横向滚动),全屏自适应弹窗(也带内容切换);
6、类似“社区规划”这样的有独特逻辑的子动画块。
 
因为客户方某种原因,项目没有最终正式使用。我个人还是从中得到了极大的锻炼。
 

Tags: flash整站

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

在这个我以前的帖子《两套功能强大的AS3电子书翻页程序-功能点评》中,展示了我找到的两套功能比较强的翻页电子书程序。最近我们针对其中一套,进行了比较简单的商用化定义。

 

1、用ASP+ACCESS写了后台,可对电子书的参数、书页文件进行动态化管理。
2、几乎不用改任何东西,即可直接移植到我们客户的ASP(ASP.NET)网站上。
3、客户由此可以不限数量的生成--新的电子书、电子杂志、说明书手册等各种在线文档的展示。
 
以下是我们的客户--“帆之都”留学培训的电子书地址及后台拷屏:
 
 

Tags: 电子书 电子杂志 flash翻页程序 asp后台

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