换日线的博客

前端按钮动画 css动画

css打字特效

边上同事看了都说帅的文字动效

一款不错的文字动画

微信小程序自带组件页面容器，弹出层

按日期分组，一维日期数组组合成二维数组

微信小程序生成小程序码，文件处理

微信小程序diy选中器

单双周快捷选择，最小字数显示

CSS文字填充、色差、填充动画有效果图

微信小程序三种裁剪动画有效果图

CSS进度条斑马纹带动画有效果图

InCheckin 选择的日期信息。IntimeCur 组件选择的日期。timeDataArr 显示的日历。peopleArr 入住人数信息。入住一次性最多选择三十天。默认获取三个月日期数组。用的是uni-app。

.js遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

效果图总共100行js代码，大于8步开始执行胜负判断，主要从落子的位置去判断，左4、右4就是横边上4、下4就是竖边左上4、右下4就是左斜右上4、左下4就是右斜下载地址：遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

效果图.wxml<view class="title"> <view wx:if="{{currindex < 9 || defeat}}"> {{defeat?'胜出方：':'轮到了：'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':'○')}}</span> </view> <view wx:else>平局</view&g

效果图.wxml<view class="block_index"> <view wx:for="{{noe_list}}" wx:key="block_list" class="block_list" style="top:{{item.top}}vh;{{!ction || item.top < -24?'':'transition: top linear 0.1s;'}}" > <view wx:for="{{item.arr}}" w

效果图仿win10拼图游戏，默认数字拼图，可以自己上传图片进行拼图，图片缓存本地，同一横同一竖可以进行移动，不需要一个一个移动。下载地址：https://download.youkuaiyun.com/download/qq_43764578/69468396遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

效果图.wxml<canvas disable-scroll="{{true}}" style="width:100%;height:400px;background-color: #fff;" type="2d" id="canvas" bindtouchstart="canstart" bindtouchmove="canvasmove"></canvas><button bindtap="save">保存画布</button><bu

效果图下载地址：https://download.youkuaiyun.com/download/qq_43764578/39637839 如果想要的效果是按指定宽度高度进行裁剪有一篇文章可以提供参考参考地址：https://blog.youkuaiyun.com/qq_43764578/article/details/121212662?spm=1001.2014.3001.5501 遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。...

效果图.wxml<button bindtap="uploadtap">上传图片</button><image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image><canvas canvas-id="myCanvas" id="myCanvas"></canvas><view class="canvas_model" wx:if="

效果图.wxml<image src="{{images}}"></image><button bindtap="onSaveToPhone" class="btn button-hover" > 保存图片到手机</button>.jsPage({ data: { images: "/images/logo.png", }, onSaveToPhone(){ var that = this getApp().o

效果图.wxml<button bindtap="visidlisd">滑动验证</button><!-- 滑动验证弹窗 --><view class="slide_model" wx:if="{{slidebel}}"> <view> <view class="canvas_img"> <canvas style="width: 300px; height: 104px;" canvas-id="fir

效果图.wxml<view wx:if="{{time.deadline > 0}}"> <view>单处理-转天时分秒 <view>{{time.down}}</view> </view> <view>单处理-转时分秒 <view>{{time.huly}}</view> </view></view><view wx:for="{{a

效果图如下是否随页面滚动 catchtouchmove true开启 return关闭.wxml<button bindtap="switch">上下滑动({{catchtouchmove?'开':'关'}})</button><button bindtap="modal">弹出层</button><view bindtap="modal" class="modal" wx:if="{{modalName}}" catchtouc

跳转事件jump:function(e){ let array = { id:1, name:'张三' } wx.navigateTo({ url: '/pages/index/index?array='+JSON.stringify(array), })}跳转页面onLoad:function(options){ console.log('跳转事件参数',JSON.parse(options.array))},遇到问题可以看我主页加

返回上级页面//在需要执行带参数返回上级页面的地方加上let pages = getCurrentPages(); // 获取页面栈let returnpage = pages[pages.length - 2]; // 上一个页面returnpage.setData({ values: '上个页面接收的参数'})wx.navigateBack({ delta: 1})上级页面onShow(){ console.log('传来的参数:',this.data.values)}

效果图如下所示不懂得可以看注释 都有说明 主要就是理解怎么用 你会用出什么效果.wxml<view class="scroll"></view><image class="borimg" src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180402/e58cbe3035f343c082557b42a00e4d2e.jpeg"></image><image

效果图如下所示.wxml<view class='gs_banner'> <view class='gs_continue'> <view>每日坚持签到</view> <view>总共签到：<text>{{continuity}}</text>天</view> </view></view> <view class='gs_si

效果图如下所示.wxml<view class="index"> <view class="xian"></view> <view class="xian"></view> <view class="xian"></view> <view class="detail">一等奖</view> <view class="detail">二等奖</view>

效果图.wxml<view class="index"> <view wx:for="{{detail}}" wx:key="index" class="center {{item.hide?'animation':''}}" id="curr{{index}}"> <view wx:if="{{item.hide}}"> {{item.name}}{{index}} </view> </view>&lt

效果图如下所示.wxml<view class="index" bindtap="index"></view><text class="text" style="left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}"> {{text_a}}</text><text class="text" style="left: {{text

效果图如下所示.wxml<view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view></view><view class="bfb">{{percen}}%</vie

官方文档如下: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html首先要自定义转发 然后才能使用朋友圈分享.jsPage({ data: { }, /**右上角转发*/ onShareAppMessage: function () { return { title: '转发标题', path: '转发路径', imageUrl: '转发图标'

效果图如下所示,正在逐渐完善。目前只完成了弹出层和加载，后续会继续更新，时间是不定时的有时间就会写一点，你需要什么样的功能可以在下方评论反馈 我可以加上去弹出层组件参数加载组件参数链接: https://pan.baidu.com/s/1kh_4jfkXyPc4fN9NACH-cA 提取码: dxe8觉得我写的还不错，对你有帮助可以微信打赏哦。有什么问题欢迎评论留言，我会及时回复你的...

效果图如下所示这里做的比较简陋，就花了一点时间实现了翻牌抽奖效果,提供思路.wxml<view class="button" bindtap="again">重新翻牌</view><view class="curin-index"> <view bindtap="{{whether?'':'tamin'}}" wx:for="{{9}}" wx:key="index" data-index="{{index+1}}" class="currin {{.

效果图如下所示.wxss<view class="holder"> <view class="preloader"> <view></view> </view></view>.wxml.holder{ width: 100%; float: left; height: 60rpx; text-align: center; position: relative; margin-to.

效果图如下所示.wxml<view class="lamp"><view class='lamp-text' style='--marqueeWidth--:{{-width_mal}}px;--speed--:{{rolltime}}s;'> <view style="margin-left：{{starspos}}rpx;font-size:{{font_size}}px"> {{text}} </view></view&.

效果图如下所示下载地址：https://download.youkuaiyun.com/download/qq_43764578/12414346有需要的小伙伴可以下载有什么问题欢迎评论留言，我会及时回复你的

效果图如下所示calendar.jslet lunar = { tg: '甲乙丙丁戊己庚辛壬癸', dz: '子丑寅卯辰巳午未申酉戌亥', number: '一二三四五六七八九十', year: '鼠牛虎兔龙蛇马羊猴鸡狗猪', month: '正二三四五六七八九十冬腊', monthadd: [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334], calendar: [0xA4B, 0x5164B, 0x6A5, .