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

网上沙盘(jquery)

作者:admin  日期:2017-04-06

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

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

年后实战了两个移动端(前端)项目，收获良多

作者:admin  日期:2017-03-06

 年后实战了两个移动端(前端)项目，都是使用的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 | 查看次数: 979

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

作者:admin  日期:2017-02-05

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

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

给朋友写的一个小展示动画--同心圆飞出

作者:admin  日期:2016-11-14

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

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

升级黄花机场触摸屏程序的一些技术概要

作者:admin  日期:2016-09-05

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

 应大家要求放个图：

老程序的实现方式，是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 | 查看次数: 925

用svg+d3.js制作位置示意图-鼠标滚轮放大缩小/拖动/弹窗/点标识/全屏切换

作者:admin  日期:2016-08-24

 按到朋友的一个项目，制作黄花机场的位置示意图，原来是几年前用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 | 查看次数: 2449

手机微场景制作的完整案例-swiper+TimelineMax

作者:admin  日期:2015-02-06

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


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

 

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

查看更多...

Tags: 微场景 微信场景

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

云彩无间断飘动及视差效果在网站中的应用

作者:admin  日期:2014-05-21

 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 | 查看次数: 1735

一天时间，完成600多页的2013年长沙年鉴电子书，总结

作者:admin  日期:2014-02-27

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

主要技术点有：

查看更多...

Tags: 电子书

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

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

作者:admin  日期:2014-01-17

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

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

Tags: 砸金蛋游戏

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

我制作的FLASH全球钟在黄花机场投入应用

作者:admin  日期:2013-10-12

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

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

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

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

作者:admin  日期:2013-08-07

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

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

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

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

8月9号补充一句：

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

查看更多...

Tags: js动画

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

房地产FLASH整站项目（测试站）

作者:admin  日期:2013-06-09

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

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

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

Tags: flash整站

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

翻页电子书、电子杂志在线展示程序-带ASP后台/基于国外3d-flip-book

作者:admin  日期:2013-06-02

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

 

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

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

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