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


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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
jquery异步请求实例代码
Jun 21 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
Node.js实现简单管理系统
Sep 23 Javascript
写一个Vue loading 插件
Nov 09 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
原生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中include()与require()的区别说明
2010/03/10 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery选择符快速提取web表单数据示例
2014/03/27 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
自荐信的格式
2014/03/10 职场文书
小鞋子观后感
2015/06/05 职场文书
退休教师追悼词
2015/06/23 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS