手持彈幕（全屏文字滾動）
手持彈幕（全屏文字滾動）效果測試（如圖）
可以搜下小程式;滾屏神器
奉上小程式程式碼：
wxml：
<!--pages/02-23/demo1/newDanMu.wxml-->
<view class="textBox" style="background-color:{{backgroundColor}}">
<view class='text' style="font-size: {{fontSize}}rpx; animation: animateText {{animateTime}}s infinite linear; color:{{fontColor}}"> {{text}} </view>
</view>
<view class="inputBox">
<input class="inp" placeholder="請輸入彈幕~" bindinput="inputBlur" cursor-spacing='10'></input>
<view bindtap="sendBtn" class="iconfont icon-1huojian iconBtn1"> 傳送</view>
<view bindtap="showModal" class="iconfont icon-qita3 iconBtn1">屬性</view>
</view>
<!--螢幕背景變暗的背景 -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!-- 螢幕內容 -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
<view class="swiper-tab swiperAttr">
<view class="iconfont icon-jurassic_font-sizeadd swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">字號</view>
<view class="iconfont icon-yanse1 swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">顏色</view>
<view class="iconfont icon-Group- swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">速度</view>
<view class="iconfont icon-beijingse swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">背景</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
<!-- 字型大小 -->
<swiper-item>
<view class="swiperItem1">
<slider show-value value='{{sliderValOfFontSize}}' bindchanging='changeFontSize' selected-color='#006AFE'></slider>
</view>
</swiper-item>
<!-- 選擇顏色 -->
<swiper-item>
<view class="swiperItem2">
<view class="colorBox" bindtap="setColor">
<view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view>
</view>
</view>
</swiper-item>
<!-- 字型速度 -->
<swiper-item>
<view class="swiperItem1">
<slider show-value bindchanging='changeTextSpeend' selected-color='#006AFE' value='{{sliderValOfAnimateTime}}'></slider>
</view>
</swiper-item>
<!-- 背景顏色 -->
<swiper-item>
<view class="swiperItem2">
<view class="colorBox" bindtap="setBackGroundColor">
<view class="colorItems" wx:for='{{colorArr}}' data-index="{{index}}" style="background-color:{{item.color}}" wx:key=''></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
js：
// pages/02-23/demo1/newDanMu.js
Page({
/**
* Page initial data
*/
data: {
inputText: '',
text: '請輸入彈幕( = _ = )||',
sliderValOfFontSize:50,
fontSize: 300,
fontColor:'white',
backgroundColor:'black',
animateTime:10,
sliderValOfAnimateTime:50,
currentTab: 0,
textMoveAnimate:null,
colorArr:[
{ color: 'pink' },
{ color: "red" },
{ color: "blue" },
{ color: "yellow" },
{ color: "white" },
{ color: "aqua" },
{ color: "green" },
{ color: "skyblue" },
{ color: "hotpink" },
{ color: "black" }
]
},
//改變背景顏色
setBackGroundColor(e){
console.log(e.target.dataset.index);
let index = e.target.dataset.index;
let that = this;
let selectColor = that.data.colorArr[index].color;
that.setData({
backgroundColor: selectColor
})
},
// 選擇彈幕的字型顏色
setColor(e){
// console.log(e.target.dataset.index);
let index = e.target.dataset.index;
let that = this;
let selectColor = that.data.colorArr[index].color;
that.setData({
fontColor:selectColor
})
},
//改變彈幕滾動速度
changeTextSpeend(e){
console.log(e.detail.value);
let sliderVal = e.detail.value;
let that = this;
//50 預設 10s
//0 是 15s
//100 是 5s
that.setData({
animateTime: sliderVal * -0.1 + 15,
sliderValOfAnimateTime: sliderVal
})
},
// 改變字號
changeFontSize(e){
//獲取滑竿的值
console.log(e.detail.value);
let sliderVal = e.detail.value;
let that = this;
//運算邊界值
//50 對應 300rpx 的字號
//0 對應 150rpx
//100 對應 450rpx
that.setData({
fontSize: sliderVal * 3 + 150,
sliderValOfFontSize: sliderVal
})
},
// input失去焦點時獲取輸入的文字
inputBlur(e) {
let that = this;
let inputVal = e.detail.value;
// console.log(inputVal);
that.setData({
inputText: inputVal
})
},
sendBtn() {
let that = this;
if (that.data.inputText == '') {
wx: wx.showToast({
title: '不能為空哦',
duration: 2000
})
}
else {
that.setData({
text: that.data.inputText
})
}
},
//顯示對話方塊
showModal: function () {
// 顯示遮罩層
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
},
//隱藏對話方塊
hideModal: function () {
// 隱藏遮罩層
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(300).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
/**
* Lifecycle function--Called when page load
*/
onLoad: function (options) {
},
//滑動切換
swiperTab: function (e) {
var that = this;
// console.log(e.detail.current);
that.setData({
currentTab: e.detail.current
});
},
//點選切換
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
/**
* Lifecycle function--Called when page is initially rendered
*/
onReady: function () {
},
/**
* Lifecycle function--Called when page show
*/
onShow: function () {
},
/**
* Lifecycle function--Called when page hide
*/
onHide: function () {
},
/**
* Lifecycle function--Called when page unload
*/
onUnload: function () {
},
/**
* Page event handler function--Called when user drop down
*/
onPullDownRefresh: function () {
},
/**
* Called when page reach bottom
*/
onReachBottom: function () {
},
/**
* Called when user click on the top right corner to share
*/
onShareAppMessage: function () {
}
})
css:
/* pages/02-23/demo1/newDanMu.wxss */
@import '../css/iconfont.wxss';
page{
margin: 0;
padding: 0;
}
.textBox{
height: 100vh;
display: flex;
justify-content: center;
background-color: black;
position: relative;
}
.text{
transform:rotate(90deg);
height: 1rpx;
display: flex;
align-items: center;
white-space: nowrap;
/* background-color: salmon; */
position: fixed;
top: 280%;
color: white;
/* margin-top: -1%; */
}
@keyframes animateText{
0%{
margin-top: 0%;
}
100%{
margin-top: -700%;
}
}
.inputBox{
position: fixed;
bottom: 1%;
display: flex;
/* background-color: saddlebrown; */
}
.inp{
border: 1px #333333 solid;
border-radius: 50rpx;
margin-left: 30rpx;
padding-left: 20rpx;
color: white;
font-size: 30rpx;
width: 390rpx;
height: 63rpx;
}
.iconBtn1{
/* border: 1px white solid; */
width: 130rpx;
height: 70rpx;
border-radius: 60rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
font-weight: bold;
background-color: #333333;
color: white;
margin-left: 10rpx;
}
.swiperItem1{
padding-top: 15%;
padding-left: 5%;
}
.swiperItem2{
padding-top: 15%;
}
/* 色塊 */
.colorBox{
display: flex;
justify-content: space-evenly;
}
.colorItems{
width: 50rpx;
height: 50rpx;
}
/* .color1{
background-color: pink;
}
.color2{
background-color: red;
}
.color3{
background-color: blue;
}
.color4{
background-color: yellow;
}
.color5{
background-color: white;
}
.color6{
background-color: aqua;
}
.color7{
background-color: green;
}
.color8{
background-color: skyblue;
}
.color9{
background-color: hotpink;
}
.color10{
background-color: black;
} */
/* 彈起框的樣式 */
/*使螢幕變暗 */
.commodity_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.8;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*對話方塊 */
.commodity_attr_box {
height: 430rpx;
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #282828;
border-radius: 10rpx 10rpx 0 0;
}
/* swiper start */
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #373737;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-weight: bold;
background-color: #282828;
}
.swiper-tab-item{
display: inline-block;
width: 25%;
color:#939393;
background-color: #282828;
}
.active{
background-color: #006AFE;
color:white;
border-bottom: 4rpx solid#373737;
}
swiper{
color: white;
background-color: #282828;
}
/* swiper end */
json:
{
"usingComponents": {},
"navigationStyle": "custom",
"navigationBarTextStyle": "white"
}
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69971662/viewspace-2728204/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 文字滾動（螢幕重新整理頻率）
- 文字向上滾動
- vue文字滾動元件Vue元件
- fullPage.js全屏滾動外掛APIJSAPI
- 用 ES6 寫全屏滾動外掛
- 直播商城原始碼，vue 彈窗 慣性滾動 加速滾動原始碼Vue
- 前端實現文字滾動效果前端
- 線上直播系統原始碼，橫向無限迴圈滾動的單行彈幕效果原始碼
- vue頁面有彈層，禁止頁面滾動Vue
- OverScroll彈性滾動和慣性滾動效果的實現原理——CoordinatorLayout+Behavior
- h5單頁面彈出彈窗背景滾動問題H5
- 微信小程式之文字向上滾動效果微信小程式
- 微信小程式功能之全屏滾動效果的實現程式碼微信小程式
- 類似微信首頁彈性滾動和慣性滾動效果的實現——OverScroll
- 超出文字顯示省略號，hover效果：文字滾動顯示==》求解
- H5移動端彈幕動畫實現H5動畫
- 彈幕外掛
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- CSS 讓滾動條不佔用螢幕寬度CSS
- PPT製作電視螢幕播放圖片滾動動畫教程動畫
- 直播軟體搭建，Android實現文字滾動播放效果Android
- 移動端ios螢幕滾動時filter發生抖動閃爍bugiOSFilter
- tkinter中text文字與scroll滾動條控制元件（五）控制元件
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- CSS 技巧一則 -- 不定寬溢位文字適配滾動CSS
- JS彈幕程式碼分析JS
- jQuery彈幕效果詳解jQuery
- 直播app開發，在 Flutter 中使 Expanded 中的文字可滾動APPFlutter
- div滾動條樣式，水平滾動
- RecyclerView滾動位置，滾動速度設定View
- 隱藏滾動條保留滾動效果
- ? 鬥魚彈幕php實現PHP
- CONNMIX 開發 WebSocket 影片彈幕Web
- Swift全屏滑動返回Swift
- B站：2019年度彈幕 “妙啊”入選十大彈幕熱詞
- 修勾夜店火了之後，彈幕互動遊戲呢？遊戲
- css隱藏滾動條並可以滾動CSS
- 好程式設計師技術分享jQuery實現類似fullpage外掛的全屏滾動效果程式設計師jQuery