JS实现文字打印效果（完整代码附效果图）
VUE实现文本逐字打印的动态效果完整代码
·
效果图：
完整代码：
<template>
<view class="page" @touchstart="touchstart" @touchend="touchend">
<view v-if="showTopBlock">
<view class="topBlockBg" @click="showTopBlock=false"></view>
<view class="topBlock">
<view class="pageNo">
<text style="color: #009A82;font-size: 26rpx;margin-right: 8rpx;">第{{showIdx+1}}页 </text>
<text> / 共{{topList.length}}页</text>
</view>
<scroll-view class="topImgs" :show-scrollbar="true" scroll-x="true">
<view class="p_r" style="margin-top: 100rpx;">
<view class="topItem" @click="showIdx=index" v-for="(item,index) in topList">
<image class="topImg" :style="{zoom:showIdx===index?1.2:1,top:showIdx===index?'-38rpx':'0'}"
:src="item" mode="widthFix"></image>
</view>
</view>
</scroll-view>
</view>
</view>
<swiper :current="showIdx" @change="changeSwiper">
<swiper-item v-for="(item,index) in imgList">
<view class="xialaBlock" v-if="!showTopBlock&&index!==0&&showXiala" @click="showTopBlock=true">
<image class="xiala" :src="xiala" mode="widthFix"></image>
</view>
<view class="pageItem">
<image class="pageBg" :src="item" mode="widthFix"></image>
<view class="" v-if="index==1">
<view v-show="!show2_video" @click="play2()" class="p2Video">
</view>
<video v-show="show2_video" class="p2Video" id="myVideop2" :src="page2Video"></video>
</view>
<view class="p3cBlock" v-if="index==2">
<view class="p_r">
<view class="" v-for="(itemm,idxx) in p3mune" @click="p3MIdx=idxx">
<image class="p3mItem" :src="p3MIdx===idxx?itemm.in:itemm.no" mode="widthFix">
</image>
</view>
</view>
<view class="p3centent">
<image class="p3cententImg" :src="p3mune[p3MIdx].centent" mode="widthFix"></image>
</view>
</view>
<view class="p4cBlock" v-if="index==3">
<view v-show="!show4_1_video" @click="play4_1()" class="p4Video1">
</view>
<view v-show="!show4_2_video" @click="play4_2()" class="p4Video2">
</view>
<video id="myVideo1" v-show="show4_1_video" class="p4Video1" :src="page4_1Video"></video>
<video id="myVideo2" v-show="show4_2_video" class="p4Video2" :src="page4_2Video"></video>
<image class="zan zan1" :animation="animationZan1" @click="czan1" :src="isZan1?zan1:zanNo"
mode="widthFix"></image>
<view class="zanNumBlock p_r">
<view class="shuzi1">
{{sz1}}
</view>
<view class="heng1">
</view>
<view class="heng2">
</view>
<view class="shuzi2">
{{sz2}}
</view>
</view>
<image class="zan zan2" :animation="animationZan2" @click="czan2" :src="isZan2?zan2:zanNo"
mode="widthFix"></image>
</view>
<view class="p5cBlock" v-if="index==4">
<text class="txt" v-for="(item,idx) in txts">
{{item}}
</text>
</view>
<view class="p5cName" v-if="index==4&&!showName">
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
let oss = 'https://xxx/demo-slide-h5/'
export default {
components: {
},
data() {
return {
showXiala: true,
left: '',
showName: false,
xiala: oss + 'xiala.png',
txts: [],
showIdx: 0,
showTopBlock: false,
sz1: 42,
sz2: 28,
isZan1: false,
isZan2: false,
p3MIdx: 0,
animationData: false,
animationZan1: false,
animationZan2: false,
page2Video: oss + 'page2Video.mp4?v=1',
page4_1Video: oss + 'page4_1Video.mp4?v=1',
page4_2Video: oss + 'page4_2Video.mp4?v=1',
p3mune: [{
in: oss + 'bai1In.png',
no: oss + 'bai1No.png',
centent: oss + '51.png',
}, {
in: oss + 'bai2In.png',
no: oss + 'bai2No.png',
centent: oss + '61.png',
}, {
in: oss + 'bai3In.png',
no: oss + 'bai3No.png',
centent: oss + '51.png',
}],
zan1: oss + 'zan1.png',
zan2: oss + 'zan2.png',
zanNo: oss + 'zanNo.png',
topList: [
oss + '1.jpg?v=1',
oss + '2.jpg?v=1',
oss + '31.jpg?v=1',
oss + '41.jpg?v=1',
oss + '5.jpg?v=1',
// oss + '6.jpg?v=1'
],
imgList: [
oss + '1.jpg?v=1',
oss + '2.jpg?v=1',
oss + '3.jpg?v=1',
oss + '4.jpg?v=1',
oss + '5.jpg?v=1',
// oss + '6.jpg?v=1'
],
videoContext4_1: '',
videoContext4_2: '',
videoContext2: '',
show4_1_video: false,
show4_2_video: false,
show2_video:false,
startClientY: '',
};
},
onLoad(option) {
this.$common.Init.call(this);
setTimeout(() => {
this.showXiala = false;
}, 20000)
},
onShow() {},
onHide() {},
methods: {
changeSwiper(e) {
console.log('e', e);
this.showIdx = e.detail.current
this.show4_1_video = false;
this.show4_2_video = false;
if (e.detail.current != 1) {
if (this.videoContext2) this.videoContext2.pause()
}
if (e.detail.current != 3) {
if (this.videoContext4_1) this.videoContext4_1.pause()
if (this.videoContext4_2) this.videoContext4_2.pause()
}
if (e.detail.current == 4) {
this.txts = [];
let txt = '期待针对免疫治疗为基础的治疗模式不断研发，能够为患者带来更长生存的同时进一步提升生活质量。'
let arr = txt.split('')
console.log('arr', arr);
this.addArr(arr, 0)
setTimeout(() => {
this.showName = true;
}, (arr.length + 1) * 150)
} else {
this.showName = false;
}
},
addArr(arr, idx) {
if (idx == arr.length || this.showIdx != 4) {
this.txts.pop()
return;
}
setTimeout(() => {
this.txts.pop()
this.txts.push(arr[idx])
this.txts.push('|')
this.addArr(arr, idx + 1)
}, 150)
},
anima(pageIdx, type) {
var animation = uni.createAnimation({
duration: 500,
timingFunction: 'ease',
})
let zhuan = (pageIdx + 1) * 360
if (type == 'left') {
animation.translateX(-375).step()
// animation.rotate(zhuan).step()
this.showIdx = pageIdx;
} else {
animation.translateX(375).step()
// animation.rotate(zhuan).step()
this.showIdx = pageIdx;
}
// rotate rotateX rotateY rotateZ
// animation.rotateZ(zhuan).step()
this.animationData = animation.export()
setTimeout(() => {
this.showIdx = pageIdx;
animation.translateX(0).step({
duration: 10
})
this.animationData = animation.export()
}, 500)
},
play2() {
console.log('播放视频2');
this.show2_video = true;
this.show4_1_video = false;
this.show4_2_video = false;
this.videoContext2 = uni.createVideoContext('myVideop2')
this.videoContext2.play()
},
play4_1() {
console.log('播放视频41');
this.show4_1_video = true;
this.show4_2_video = false;
this.videoContext4_1 = uni.createVideoContext('myVideo1')
if (this.videoContext4_2) this.videoContext4_2.pause()
if (this.videoContext2) this.videoContext2.pause()
this.videoContext4_1.play()
},
play4_2() {
console.log('播放视频42');
this.show4_2_video = true;
this.show4_1_video = false;
this.videoContext4_2 = uni.createVideoContext('myVideo2')
if (this.videoContext4_1) this.videoContext4_1.pause()
if (this.videoContext2) this.videoContext2.pause()
this.videoContext4_2.play()
},
czan1() {
this.isZan1 = !this.isZan1;
if (this.isZan1) {
this.sz1 = this.sz1 + 1
} else {
this.sz1 = this.sz1 - 1
}
this.zananimation(1)
},
czan2() {
this.isZan2 = !this.isZan2;
if (this.isZan2) {
this.sz2 = this.sz2 + 1
} else {
this.sz2 = this.sz2 - 1
}
this.zananimation(2)
},
zananimation(idx) {
var animation = uni.createAnimation({
duration: 200,
timingFunction: 'ease',
})
animation.scale(1.2).step()
animation.scale(1).step()
if (idx == '1') {
this.animationZan1 = animation.export()
} else {
this.animationZan2 = animation.export()
}
},
touchstart(e) {
this.left = 0
this.startClientX = e.changedTouches[0].clientX;
this.startClientY = e.changedTouches[0].clientY;
},
touchmove(e) {
this.left = e.changedTouches[0].clientX - this.startClientX;
console.log('this.left', this.left);
},
touchend(e) {
this.endClientX = e.changedTouches[0].clientX;
this.left = 0
if (e.changedTouches[0].clientY - this.startClientY > 80) {
console.log('下滑');
this.showTopBlock = true;
return
}
if (this.startClientX - this.endClientX > 80) {
console.log('左滑');
if (this.showIdx < this.imgList.length - 1) {
// this.showIdx = this.showIdx + 1
// let pageIdx = this.showIdx + 1
// this.anima(pageIdx, 'left')
} else {
// uni.showToast({
// title: '最后一页拉~',
// icon: "none"
// })
}
}
if (this.endClientX - this.startClientX > 80) {
console.log('右滑', 'right');
if (this.showIdx > 0) {
// this.showIdx = this.showIdx - 1
// let pageIdx = this.showIdx - 1
// this.anima(pageIdx)
} else {
// uni.showToast({
// title: '到第一页拉~',
// icon: "none"
// })
}
}
},
},
};
</script>
<style lang="scss" scoped>
swiper,
swiper-item,
.page {
position: absolute;
top: 0;
width: 100vw;
min-height: 100vh;
}
.xialaBlock {
position: absolute;
top: 30rpx;
width: 60rpx;
height: 60rpx;
left: 50vw;
margin-left: -30rpx;
z-index: 3;
.xiala {
width: 40rpx;
animation: mydeamon 1s infinite; //1s值一秒内完成动画
-webkit-animation: mydeamon 1s infinite;
/* Safari and Chrome */
}
}
@keyframes mydeamon {
0% {
transform: scale(2); //scale代表闪烁的体型变化，其他倾斜等样式自行搜索
opacity: 1; //透明程度
}
100% {
transform: scale(1);
opacity: 0;
}
}
.p5cName {
position: absolute;
top: 750rpx;
width: 86vw;
height: 200rpx;
left: 7vw;
z-index: 4;
background-color: #fff;
letter-spacing: 8rpx;
line-height: 80rpx;
}
.p5cBlock {
position: absolute;
top: 400rpx;
height: 250rpx;
width: 86vw;
left: 7vw;
z-index: 4;
background-color: #fff;
letter-spacing: 8rpx;
line-height: 80rpx;
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
.txt {
width: 32rpx;
height: 32rpx;
color: #009A82;
border-bottom: 1px solid #00d4ad;
padding-bottom: 4rpx;
}
}
.topBlockBg {
position: fixed;
height: 100vh;
width: 100vw;
z-index: 999;
background-color: rgba(0, 0, 0, 0.5);
}
.topBlock {
position: fixed;
top: 0;
height: 420rpx;
width: 100vw;
z-index: 999;
background-color: #fff;
.topImgs {
width: 92vw;
margin-left: 4vw;
// border-bottom: 4px solid #f0f0f0;
// padding-bottom: 20rpx;
height: 380rpx;
}
.topImg {
width: 120rpx;
margin-right: 20rpx;
border: 1px solid #f0f0f0;
position: relative;
bottom: 0;
}
.pageNo {
position: absolute;
right: 40rpx;
top: 10rpx;
font-size: 22rpx;
}
}
.zan {
width: 80rpx;
}
.zan1 {
position: absolute;
top: 630rpx;
right: 80rpx;
z-index: 2;
}
.p4Video1 {
position: absolute;
z-index: 4;
// width: 100vw;
// height: 400rpx;
// top: 400rpx;
top: 440rpx;
left: 80rpx;
width: 340rpx;
height: 230rpx;
}
.p4Video2 {
position: absolute;
z-index: 4;
// width: 100vw;
// height: 400rpx;
top: 990rpx;
right: 80rpx;
width: 340rpx;
height: 230rpx;
}
.zanNumBlock {
position: absolute;
top: 830rpx;
left: 80rpx;
z-index: 2;
.heng1 {
width: 190rpx;
height: 10rpx;
border-radius: 50rpx;
background-color: #009A82;
margin-left: 10rpx;
margin-top: 20rpx;
}
.shuzi1 {
color: #009A82;
font-weight: 600;
font-size: 40rpx;
}
.shuzi2 {
color: #E8B100;
margin-left: 10rpx;
font-weight: 600;
font-size: 40rpx;
}
.heng2 {
width: 190rpx;
height: 10rpx;
border-radius: 50rpx;
background-color: #E8B100;
margin-left: 90rpx;
margin-top: 20rpx;
}
}
.zan2 {
position: absolute;
top: 988rpx;
left: 80rpx;
z-index: 2;
}
.pageItem {
width: 100vw;
min-height: 100vh;
}
.pageBg {
position: absolute;
width: 100vw;
}
.p3cBlock {
position: relative;
top: 220rpx;
margin-left: 4vw;
width: 92vw;
.p3mItem {
position: relative;
width: 30vw;
margin-right: 10rpx;
z-index: 5;
}
}
.p3centent {
margin-top: -26rpx;
width: 92vw;
position: relative;
z-index: 4;
height: 960rpx;
overflow-x: hidden;
overflow-y: scroll;
.p3cententImg {
width: 92vw;
}
}
.p2Video {
position: absolute;
top: 224rpx;
left: 58rpx;
width: 364rpx;
height: 228rpx;
z-index: 2;
}
</style>demo-slide-h5
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献38条内容
所有评论(0)