小程序实现左右来回滚动字幕效果


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了小程序左右来回滚动字幕的具体代码,供大家参考,具体内容如下

小程序实现左右来回滚动字幕效果

wxml:

<!--pages/market/market.wxml-->
<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}" wx:key="unique">
 <swiper-item>
  <image src="{{item}}" class="slide-image"/>
 </swiper-item>
 </block>
</swiper>
 
<!--弹幕开关-->
<view class="barrage-Switch" style="color:{{barrageTextColor}};">
 <switch id="switch_" bindchange="barrageSwitch"/>
 <text>弹幕</text>
</view>
 
<!--弹幕输入框-->
 <view class="barrage-inputText" style="display:{{barrage_inputText}}">
  <view class="barrage-input">
  <input bindblur="bind_shoot" value="{{bind_shootValue}}"/>
  </view>
  <view class="barrage-shoot">
   <button class="shoot" size="mini" bindtap="shoot">发射</button>
  </view>
 </view>
 
<!--弹幕上单文字-->
<view class="barrage-fly" style="display:{{barragefly_display}}">
 <block wx:for="{{barrage_style}}" wx:key="unique">
 <text class="barrage-textFly" style="color:{{item.barrage_shoottextColor}};left:{{item.barrage_phoneWidth}}px;top:{{item.barrageText_height}}px;">{{item.barrage_shootText}}</text>
 </block>
</view>

wxss:

/* pages/market/market.wxss */
.slide-image{
 width: 100%;
}
 
/* 弹幕选择按钮的操作*/
.barrage-Switch{
 position: absolute;
 bottom: 10px;
 right: 10px;
 z-index: 2;
}
 
/* 弹幕输入框的操作*/
.barrage-inputText{
 position: absolute;
 display: flex;
 background-color: #BFBFBF;
 width: 100%;
 height: 40px;
 flex-direction: row;
 nav-index: 2;
 justify-content: center;
 align-items: center;
 bottom: 10%;
}
.barrage-input{
 background-color: greenyellow;
 width: 60%;
 height: 30px;
}
.barrage-shoot{
 
 margin-left: 10px;
 width: 25%;
 height: 30px;
}
.shoot{
 width: 100%;
 color: black;
}
 
/*弹幕飞飞飞*/
.barrage-fly{
 z-index: 3;
 height: 80%;
 width: 100%;
 position: absolute;
 top: 0;
}
.barrage-textFly{
 position: absolute;
 
}

market.js

// pages/market/market.js
var barrage_style_arr = [];
var barrage_style_obj = {};
var phoneWidth = 0;
var timers = [];
var timer;
Page({
 data: {
 imgUrls: [
  'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
 ],
 indicatorDots: true,
 autoplay: true,
 interval: 3000,
 duration: 500,
 barrageTextColor: "#D3D3D3",
 barrage_inputText: "none",
 barrage_shoottextColor: "black",
 bind_shootValue: "",
 barrage_style: [],
 barragefly_display: "none",
 },
 
 
 // 生命周期函数--监听页面加载
 onLoad: function (options) {
 var that = this;
 //获取屏幕的宽度
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   barrage_phoneWidth: res.windowWidth - 100,
  })
  }
 })
 phoneWidth = that.data.barrage_phoneWidth;
 console.log(phoneWidth);
 },
 
 //是否打开弹幕...
 barrageSwitch: function (e) {
 console.log(e);
 //先判断没有打开
 if (!e.detail.value) {
  //清空弹幕
  barrage_style_arr = [];
  //设置data的值
  this.setData({
  barrageTextColor: "#D3D3D3",
  barrage_inputText: "none",
  barragefly_display: "none",
  barrage_style: barrage_style_arr,
  });
  //清除定时器
  clearInterval(timer);
 } else {
  this.setData({
  barrageTextColor: "#04BE02",
  barrage_inputText: "flex",
  barragefly_display: "block",
  });
  //打开定时器
  timer = setInterval(this.barrageText_move, 800)
 }
 },
 
 //发射按钮
 shoot: function (e) {
 
 //字体颜色随机
 var textColor = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
 // //设置弹幕字体的水平位置样式
 // var textWidth = -(this.data.bind_shootValue.length*0);
 //设置弹幕字体的垂直位置样式
 var barrageText_height = (Math.random()) * 266;
 barrage_style_obj = {
  // textWidth:textWidth,
  barrageText_height: barrageText_height,
  barrage_shootText: this.data.bind_shootValue,
  barrage_shoottextColor: textColor,
  barrage_phoneWidth: phoneWidth
 };
 barrage_style_arr.push(barrage_style_obj);
 this.setData({
  barrage_style: barrage_style_arr,  //发送弹幕
  bind_shootValue: ""     //清空输入框
 })
 
 //定时器 让弹幕动起来
 // this.timer= setInterval(this.barrageText_move,800);
 
 },
 
 //定时器 让弹幕动起来
 barrageText_move: function () {
 var timerNum = barrage_style_arr.length;
 var textMove;
 for (var i = 0; i < timerNum; i++) {
  textMove = barrage_style_arr[i].barrage_phoneWidth;
  console.log("barrage_style_arr[" + i + "].barrage_phoneWidth----------:" + barrage_style_arr[i].barrage_phoneWidth);
  textMove = textMove - 20;
  barrage_style_arr[i].barrage_phoneWidth = textMove;
  //走完的移除掉
  if (textMove <= -100) {
  //   clearTimeout(this.timer);
  barrage_style_arr.splice(0, 1);
  i--;
  //全部弹幕运行完
  if (barrage_style_arr.length == 0) {
   this.setData({
   barrage_style: barrage_style_arr,
   })
   // clearInterval(this.timer);
   return;
  }
  }
  console.log("第" + i + "个定时器:", textMove);
  this.setData({
  barrage_style: barrage_style_arr,
  })
 }
 
 
 },
 
 //绑定发射输入框,将值传递给data里的bind_shootValue,发射的时候调用
 bind_shoot: function (e) {
 this.setData({
  bind_shootValue: e.detail.value
 })
 },
 
})

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

Javascript 相关文章推荐
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 #Javascript
jQuery实现的自定义轮播图功能详解
Dec 28 #jQuery
微信小程序实现简单跑马灯效果
May 26 #Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 #Javascript
详解puppeteer使用代理
Dec 27 #Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 #Javascript
详解angular2 控制视图的封装模式
Dec 27 #Javascript
You might like
Terran建筑一览
2020/03/14 星际争霸
Oracle Faq(Oracle的版本)
2006/10/09 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript event 事件解析
2011/01/31 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JavaScript运算符小结
2015/06/03 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python实现log日志的示例代码
2018/04/28 Python
详解python中的装饰器
2018/07/10 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python实现人像动漫化的示例代码
2020/05/17 Python
详解前端HTML5几种存储方式的总结
2016/12/27 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
大学生社团活动总结
2014/04/26 职场文书
档案信息化建设方案
2014/05/16 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
CentOS MySql8 远程连接实战
2022/04/19 MySQL
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android