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

一个swiper双向移动的例子

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

飞机探测地块的一个小演示动画

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

用moment.js构造带操作区的VUE个性化日历

 

这次项目需要用到这样一个稍有点特别的日历,每一天有一个“操作区”(根据数据有不同的操作),因为这个形态有点特殊,所以无法直接使用vant的日历 组件。之前这个日历列表是由后端同事提供的。后来我自己对moment.js 的操作比较熟练了,自己构造了一个,主要代码如下。

Javascript代码
  1. initCale(){  
  2.     const NOW = moment('2021-05-16')  
  3.     let _first = _.cloneDeep(NOW).startOf('month')  //月头  
  4.     let _last = _.cloneDeep(NOW).endOf('month')     //月尾  
  5.   
  6.     // 计算本月数据  
  7.     let days = NOW.daysInMonth()    //本月天数  
  8.     let list = []   //最终日期列表,存入这个数组  
  9.     for (let ii = 0; ii < days; ii++) {  
  10.         let dd = _.cloneDeep(_first).add(ii, 'days')    //从月头开始往后推算整月  
  11.         list.push(  
  12.             {  
  13.                 date:dd.format('YYYY-MM-DD'),  
  14.                 sd:dd.format('DD'),  
  15.                 day:dd.day(),       //星期几  
  16.                 used:true,  
  17.                 today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD'//今天  
  18.             }  
  19.         )  
  20.     }  
  21.   
  22.     // 补月头(上个月剩下的几天)  
  23.     let lenHead = _first.day()-1    //本月第一天是星期几?从而推算月头天数  
  24.     for (let ii = 1; ii <= lenHead; ii++) {  
  25.         let dddd = _.cloneDeep(_first).add(-ii, 'days')  
  26.         list.unshift(  
  27.             {  
  28.                 date:dddd.format('YYYY-MM-DD'),  
  29.                 sd:dddd.format('DD'),  
  30.                 day:dddd.day(),  
  31.                 used:false  
  32.             }  
  33.         )  
  34.     }  
  35.       
  36.     // 补月尾  
  37.     let lenTail = 7 - _last.day()   //月尾天数  
  38.     for (let ii = 1; ii <= lenTail; ii++) {  
  39.         let dddd = _.cloneDeep(_last).add(ii, 'days')  
  40.         list.push(  
  41.             {  
  42.                 date:dddd.format('YYYY-MM-DD'),  
  43.                 sd:dddd.format('DD'),  
  44.                 day:dddd.day(),  
  45.                 used:false  
  46.             }  
  47.         )  
  48.     }  
  49.     this.caleList = list  //caleList是VUE中用于渲染出日历的变量  
  50. },  
  51. 主要HTML:  
  52.   
  53. <ul class="caleList">  
  54.     <li class="top">一</li>  
  55.     <li class="top">二</li>  
  56.     <li class="top">三</li>  
  57.     <li class="top">四</li>  
  58.     <li class="top">五</li>  
  59.     <li class="top">六</li>  
  60.     <li class="top">日</li>  
  61.     <li v-for="item in caleList" :key="item.date"  
  62.         :class="[{'used':item.used},{'today':item.today}]"  
  63.     >  
  64.         <div class="date">{{item.sd}}</div>  
  65.         <div class="opt" v-if="item.used">操作</div>  
  66.     </li>  
  67. </ul>  
  68. 主要CSS(LESS):  
  69.   
  70. .caleList{  
  71.     display: flex; flex-wrap: wrap;  
  72.     li{  
  73.         flex:1 0 100%/7;  
  74.         border: 1px #fff solid;  
  75.           
  76.           
  77.         background-color: #aaa;  
  78.         color: #777;  
  79.           
  80.         &.top{  
  81.             background-color: #fff; color: #900;  
  82.             border: none;  
  83.             height: 40px; display: flex; align-items: center; justify-content: center;  
  84.         }  
  85.         &.used{  
  86.             background-color: #eee;  
  87.             color: #333;  
  88.         }  
  89.         &.today{  
  90.             background-color: rgb(163, 10, 31); color: #fff;  
  91.         }  
  92.         .date{  
  93.             font-size: 24px;  
  94.             display: flex; align-items: center; justify-content: center;height: 35px;  
  95.         }  
  96.         .opt{  
  97.             font-size: 12px;  
  98.             padding: 0px 15px 10px; text-align: center;  
  99.             color: rgb(112, 11, 11);  
  100.             line-height: 120%;  
  101.         }  
  102.     }  
  103. }  

因为逻辑比较简单,此处并没有抽象成组件,有需要再说。

特别感谢知友的这篇文章:

 

Sail:moment的高频用法总结

Tags: vue 个性化日历

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

演示在此: http://258754.cn/2020/ehs/canvas_and_svg.html

技术要点:

- 异形边框,自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px,也可以使用rem。

- 边框SVG+MASK+路径动画,底部CANVAS动画。

- flexible.js,每个块的宽、高,会根据整个页面的宽度自适应变化 。

查看更多...

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

网上沙盘(jquery)

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

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

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

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

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

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

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

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

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

 应大家要求放个图:

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

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

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


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

 

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

查看更多...

Tags: 微场景 微信场景

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

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

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

主要技术点有:

查看更多...

Tags: 电子书

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

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

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

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

Tags: 砸金蛋游戏

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