微信小程序实现点击页面出现文字


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了微信小程序实现点击页面地方出现文字的具体代码,供大家参考,具体内容如下

效果图如下所示

微信小程序实现点击页面出现文字

.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_bx}}px;top: {{text_by}}px;opacity: {{opacity_b}};" wx:if="{{text_b}}">
 {{text_b}}
</text>
<text class="text" style="left: {{text_cx}}px;top: {{text_cy}}px;opacity: {{opacity_c}};" wx:if="{{text_c}}">
 {{text_c}}
</text>
<text class="text" style="left: {{text_dx}}px;top: {{text_dy}}px;opacity: {{opacity_d}};" wx:if="{{text_d}}">
 {{text_d}}
</text>
<text class="text" style="left: {{text_ex}}px;top: {{text_ey}}px;opacity: {{opacity_e}};" wx:if="{{text_e}}">
 {{text_e}}
</text>
<text class="text" style="left: {{text_fx}}px;top: {{text_fy}}px;opacity: {{opacity_f}};" wx:if="{{text_f}}">
 {{text_f}}
</text>
<text class="text" style="left: {{text_gx}}px;top: {{text_gy}}px;opacity: {{opacity_g}};" wx:if="{{text_g}}">
 {{text_g}}
</text>
<text class="text" style="left: {{text_hx}}px;top: {{text_hy}}px;opacity: {{opacity_h}};" wx:if="{{text_h}}">
 {{text_h}}
</text>
<text class="text" style="left: {{text_ix}}px;top: {{text_iy}}px;opacity: {{opacity_i}};" wx:if="{{text_i}}">
 {{text_i}}
</text>
<text class="text" style="left: {{text_jx}}px;top: {{text_jy}}px;opacity: {{opacity_j}};" wx:if="{{text_j}}">
 {{text_j}}
</text>

.wxss

.index{
 width: 100%;
 float: left;
 height: 100vh;
 background-color: #ffcccc;
}
.text{
 position: absolute;
 transition: all 1s;
 font-size: 26rpx;
 z-index: 9999;
}

.js

Page({
 data: {
 index:0,
 },
 index:function(e){
 let that = this
 let array = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业"]
 that.data.index = array.length == that.data.index ? 0 :that.data.index
 that.setData({
 index: that.data.index + 1,
 })
 let x = e.detail.x + 8
 let y = e.detail.y - 40
 if (that.data.index == 1 && !that.data.text_a){
 that.setData({
 text_a: array[that.data.index - 1],
 text_ax: x,
 text_ay: y,
 opacity_a: 1,
 })
 let timer_a = setInterval(function () {
 that.setData({
  opacity_a: 0,
  text_ay: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_a: '',
  })
 }, 1000)
 clearInterval(timer_a);
 }, 200)
 return false;
 }
 if (that.data.index == 2 && !that.data.text_b) {
 that.setData({
 text_b: array[that.data.index - 1],
 text_bx: x,
 text_by: y,
 opacity_b: 1,
 })
 let timer_b = setInterval(function () {
 that.setData({
  opacity_b: 0,
  text_by: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_b: '',
  })
 }, 1000)
 clearInterval(timer_b);
 }, 200)
 return false
 }
 if (that.data.index == 3 && !that.data.text_c) {
 that.setData({
 text_c: array[that.data.index - 1],
 text_cx: x,
 text_cy: y,
 opacity_c: 1,
 })
 let timer_c = setInterval(function () {
 that.setData({
  opacity_c: 0,
  text_cy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_c: '',
  })
 }, 1000)
 clearInterval(timer_c);
 }, 200)
 return false
 }
 if (that.data.index == 4 && !that.data.text_d) {
 that.setData({
 text_d: array[that.data.index - 1],
 text_dx: x,
 text_dy: y,
 opacity_d: 1,
 })
 let timer_d = setInterval(function () {
 that.setData({
  opacity_d: 0,
  text_dy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_d: '',
  })
 }, 1000)
 clearInterval(timer_d);
 }, 200)
 return false
 }
 if (that.data.index == 5 && !that.data.text_e) {
 that.setData({
 text_e: array[that.data.index - 1],
 text_ex: x,
 text_ey: y,
 opacity_e: 1,
 })
 let timer_e = setInterval(function () {
 that.setData({
  opacity_e: 0,
  text_ey: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_e: '',
  })
 }, 1000)
 clearInterval(timer_e);
 }, 200)
 return false
 }
 if (that.data.index == 6 && !that.data.text_f) {
 that.setData({
 text_f: array[that.data.index - 1],
 text_fx: x,
 text_fy: y,
 opacity_f: 1,
 })
 let timer_f = setInterval(function () {
 that.setData({
  opacity_f: 0,
  text_fy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_f: '',
  })
 }, 1000)
 clearInterval(timer_f);
 }, 200)
 return false
 }
 if (that.data.index == 7 && !that.data.text_g) {
 that.setData({
 text_g: array[that.data.index - 1],
 text_gx: x,
 text_gy: y,
 opacity_g: 1,
 })
 let timer_g = setInterval(function () {
 that.setData({
  opacity_g: 0,
  text_gy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_g: '',
  })
 }, 1000)
 clearInterval(timer_g);
 }, 200)
 return false
 }
 if (that.data.index == 8 && !that.data.text_h) {
 that.setData({
 text_h: array[that.data.index - 1],
 text_hx: x,
 text_hy: y,
 opacity_h: 1,
 })
 let timer_h = setInterval(function () {
 that.setData({
  opacity_h: 0,
  text_hy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_h: '',
  })
 }, 1000)
 clearInterval(timer_h);
 }, 200)
 return false
 }
 if (that.data.index == 9 && !that.data.text_i) {
 that.setData({
 text_i: array[that.data.index - 1],
 text_ix: x,
 text_iy: y,
 opacity_i: 1,
 })
 let timer_i = setInterval(function () {
 that.setData({
  opacity_i: 0,
  text_iy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_i: '',
  })
 }, 1000)
 clearInterval(timer_i);
 }, 200)
 return false
 }
 if (that.data.index == 10 && !that.data.text_j) {
 that.setData({
 text_j: array[that.data.index - 1],
 text_jx: x,
 text_jy: y,
 opacity_j: 1,
 })
 let timer_j = setInterval(function () {
 that.setData({
  opacity_j: 0,
  text_jy: y - 60,
 })
 setTimeout(function () {
  that.setData({
  text_j: '',
  })
 }, 1000)
 clearInterval(timer_j );
 }, 200)
 return false
 }
 },
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 #Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 #Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 #Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 #Javascript
微信小程序实现翻牌抽奖动画
Sep 21 #Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 #Javascript
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP反射机制用法实例
2014/08/28 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
js常用代码段收集
2011/10/28 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
JavaScript中的闭包
2016/02/24 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python列表的常用操作方法小结
2016/05/21 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
python实现验证码识别功能
2018/06/07 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python下载微信公众号相关文章
2019/02/26 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
毕业生幼师求职自荐信
2013/10/01 职场文书
打架检讨书100字
2014/01/19 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
五年级数学教学反思
2014/02/11 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
财产分割协议书范本
2014/11/03 职场文书
《打电话》教学反思
2016/02/22 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android