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


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 相关文章推荐
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Vue数据双向绑定的深入探究
2018/11/27 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python实现简单http服务器功能
2018/09/17 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
keras K.function获取某层的输出操作
2020/06/29 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
BrandAlley英国:法国折扣奢侈品网上零售商
2017/07/03 全球购物
文秘自荐信
2013/10/20 职场文书
法学专业自我鉴定
2014/02/05 职场文书
装修施工安全责任书
2014/07/24 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers