一个swiper双向移动的例子
作者:admin 日期:2022-03-25飞机探测地块的一个小演示动画
作者:admin 日期:2022-03-25用moment.js构造带操作区的VUE个性化日历
作者:admin 日期:2021-12-01
这次项目需要用到这样一个稍有点特别的日历，每一天有一个“操作区”（根据数据有不同的操作），因为这个形态有点特殊，所以无法直接使用vant的日历组件。之前这个日历列表是由后端同事提供的。后来我自己对moment.js的操作比较熟练了，自己构造了一个，主要代码如下。
- initCale(){
- const NOW = moment('2021-05-16')
- let _first = _.cloneDeep(NOW).startOf('month') //月头
- let _last = _.cloneDeep(NOW).endOf('month') //月尾
- // 计算本月数据
- let days = NOW.daysInMonth() //本月天数
- let list = [] //最终日期列表，存入这个数组
- for (let ii = 0; ii < days; ii++) {
- let dd = _.cloneDeep(_first).add(ii, 'days') //从月头开始往后推算整月
- list.push(
- {
- date:dd.format('YYYY-MM-DD'),
- sd:dd.format('DD'),
- day:dd.day(), //星期几
- used:true,
- today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD') //今天
- }
- )
- }
- // 补月头（上个月剩下的几天）
- let lenHead = _first.day()-1 //本月第一天是星期几？从而推算月头天数
- for (let ii = 1; ii <= lenHead; ii++) {
- let dddd = _.cloneDeep(_first).add(-ii, 'days')
- list.unshift(
- {
- date:dddd.format('YYYY-MM-DD'),
- sd:dddd.format('DD'),
- day:dddd.day(),
- used:false
- }
- )
- }
- // 补月尾
- let lenTail = 7 - _last.day() //月尾天数
- for (let ii = 1; ii <= lenTail; ii++) {
- let dddd = _.cloneDeep(_last).add(ii, 'days')
- list.push(
- {
- date:dddd.format('YYYY-MM-DD'),
- sd:dddd.format('DD'),
- day:dddd.day(),
- used:false
- }
- )
- }
- this.caleList = list //caleList是VUE中用于渲染出日历的变量
- },
- 主要HTML:
- <ul class="caleList">
- <li class="top">一</li>
- <li class="top">二</li>
- <li class="top">三</li>
- <li class="top">四</li>
- <li class="top">五</li>
- <li class="top">六</li>
- <li class="top">日</li>
- <li v-for="item in caleList" :key="item.date"
- :class="[{'used':item.used},{'today':item.today}]"
- >
- <div class="date">{{item.sd}}</div>
- <div class="opt" v-if="item.used">操作</div>
- </li>
- </ul>
- 主要CSS（LESS):
- .caleList{
- display: flex; flex-wrap: wrap;
- li{
- flex:1 0 100%/7;
- border: 1px #fff solid;
- background-color: #aaa;
- color: #777;
- &.top{
- background-color: #fff; color: #900;
- border: none;
- height: 40px; display: flex; align-items: center; justify-content: center;
- }
- &.used{
- background-color: #eee;
- color: #333;
- }
- &.today{
- background-color: rgb(163, 10, 31); color: #fff;
- }
- .date{
- font-size: 24px;
- display: flex; align-items: center; justify-content: center;height: 35px;
- }
- .opt{
- font-size: 12px;
- padding: 0px 15px 10px; text-align: center;
- color: rgb(112, 11, 11);
- line-height: 120%;
- }
- }
- }
因为逻辑比较简单，此处并没有抽象成组件，有需要再说。
特别感谢知友的这篇文章：
大屏展示典型案例，SVG+CANVAS动画效果,flexible响应式尺寸
作者:admin 日期:2021-03-24演示在此： http://258754.cn/2020/ehs/canvas_and_svg.html
技术要点：
- 异形边框，自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px，也可以使用rem。
- 边框SVG+MASK+路径动画，底部CANVAS动画。
- flexible.js，每个块的宽、高，会根据整个页面的宽度自适应变化 。
网上沙盘(jquery)
作者:admin 日期:2017-04-06http://www.contactu.cn/2017/sp/demo2.html
年后实战了两个移动端(前端)项目，收获良多
作者:admin 日期:2017-03-06年后实战了两个移动端(前端)项目，都是使用的VUE2.0，做的是多页面类型（非SPA），地址：
2017年VUE2.0试手项目--奔奔算术
作者:admin 日期:2017-02-05给朋友写的一个小展示动画--同心圆飞出
作者:admin 日期:2016-11-14升级黄花机场触摸屏程序的一些技术概要
作者:admin 日期:2016-09-05此次我帮老朋友做个小项目，升级黄花机场触摸屏软件（长沙的兄弟以后有机会可以到机场大厅试用）。
应大家要求放个图：
老程序的实现方式，是HTML+FLASH+一个exe应用程序调用IE浏览器。分工是，activeX生成EXE程序，调用IE浏览器实现全屏。所有HTML文件都部署在本机，由FLASH来实现一些复杂交互，比如“大厅地图的放大缩小与拖动”。这个方案的不便之处显而易见：
1、必须使用一个加壳的exe程序，依赖IE6浏览器。
2、FLASH没有源文件提供无法升级。
因此，此次升级，准备采用以下方式：
1、在网上查到，chrome可以使用快捷方式直接全屏启动，这样写：
- "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启动的功能，写法如下：
- // 调用chrome全屏方式
- var childProcess = require('child_process');
- 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
用svg+d3.js制作位置示意图-鼠标滚轮放大缩小/拖动/弹窗/点标识/全屏切换
作者:admin 日期:2016-08-24按到朋友的一个项目，制作黄花机场的位置示意图，原来是几年前用Flash制作的。到现在就存在一些问题了，比如说代码不透明，不好进行编辑等。于是我直接用H5+Jquery+d3.js进行了一下重构。
- zoom.scale(ratio_init);
- zoom.event(_svg.transition().duration(200));
手机微场景制作的完整案例-swiper+TimelineMax
作者:admin 日期:2015-02-06展示我制作的一个微场景动画演示--设计是一个朋友做的，我完成前端代码。
展示地址在此：http://www.contactu.cn/2015/ffjr/iframe.html
在性能较差的安卓手机中，注意几点........
云彩无间断飘动及视差效果在网站中的应用
作者:admin 日期:2014-05-21http://www.zzylfz.com/这个今天刚上线的项目中，用到了一个“白云不间断向左飞动”的效果，步骤就2个：
1、制作一个边缘连续的“白云层”，要非常宽以适应较大的显示屏幕；
2、以用下JS来驱动background-position-x
- TweenMax.to($('.cloud'),97,{'background-position-x':'-2392',ease:Linear.easeNone,repeat:-1});
------------------------------------------
另外还用了一个视差效果，当鼠标左右移动时，鸽子和文字会微微的左右摆动。使用的是jquery.parallax.js这个脚本。
