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


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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
jQuery操作cookie
Aug 08 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
JS中FormData类实现文件上传
Mar 27 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
php 字符转义 注意事项
2009/05/27 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php下Memcached入门实例解析
2015/01/05 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python下载指定页面上图片的方法
2016/05/12 Python
对python生成业务报表的实例详解
2019/02/03 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python中的Cookie模块如何使用
2020/06/04 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
工业自动化专业毕业生推荐信
2013/11/18 职场文书
校三好学生主要事迹
2014/01/11 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
2014教师研修学习体会
2014/07/08 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers