跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成
发表于2019-06-09 21:14|
次阅读|
来源网络整理|
作者session
摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果,具备肯定的参考价
跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果,具备肯定的参考价值,感兴味的小同伴们可能参考一下,宿愿能协助到大家。
效果
wxml
1 显示完后再显示
{{text}}
2 出现白边后即显示
{{text}}
{{text}}
wxss
.example {
display: block;
width: 100%;
height: 100rpx;
}
.marquee_box {
width: 100%;
position: relative;
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 0;
}
js
// pages/home/marquee/marquee.js
Page({
data: {
text: '这是一条会滚动的文字滚来滚去的文字跑马灯,哈哈哈哈哈哈哈哈',
marqueePace: 1,//滚动速度
marqueeDistance: 0,//初始滚动距离
marqueeDistance2: 0,
marquee2copy_status: false,
marquee2_margin: 60,
size: 14,
orientation: 'left',//滚动方向
interval: 20 // 工夫间隔
},
onShow: function () {
// 页面显示
var vm = this;
var length = vm.data.text.length * vm.data.size;//文字长度
var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
vm.setData({
length: length,
windowWidth: windowWidth,
marquee2_margin: length < windowWidth ? windowWidth - length : vm.data.marquee2_margin//当文字长度小于屏幕长度时,需求添加补白
});
vm.run1();// 程度一行字滚动完了再依照原来的方向滚动
vm.run2();// 第一个字隐没后立即从右边出现
},
run1: function () {
var vm = this;
var interval = setInterval(function () {
if (-vm.data.marqueeDistance < vm.data.length) {
vm.setData({
marqueeDistance: vm.data.marqueeDistance - vm.data.marqueePace,
});
} else {
clearInterval(interval);
vm.setData({
marqueeDistance: vm.data.windowWidth
});
vm.run1();
}
}, vm.data.interval);
},
run2: function () {
var vm = this;
var interval = setInterval(function () {
if (-vm.data.marqueeDistance2 < vm.data.length) {
// 假设文字滚动到出现marquee2_margin=30px的白边,就接着显示
vm.setData({
marqueeDistance2: vm.data.marqueeDistance2 - vm.data.marqueePace,
marquee2copy_status: vm.data.length + vm.data.marqueeDistance2 <= vm.data.windowWidth + vm.data.marquee2_margin,
});
} else {
if (-vm.data.marqueeDistance2 >= vm.data.marquee2_margin) { // 当第二条文字滚动到最左边时
vm.setData({
marqueeDistance2: vm.data.marquee2_margin // 间接重新滚动
});
clearInterval(interval);
vm.run2();
} else {
clearInterval(interval);
vm.setData({
marqueeDistance2: -vm.data.windowWidth
});
vm.run2();
}
}
}, vm.data.interval);
}
})
相干引荐:
js案例之跑马灯代码
小程序中完成类似天猫抽奖的大转盘和跑马灯的效果
javascript 单行文字向上跑马灯滚动显示_广告代码
以上就是文字跑马灯效果的完成的具体内容,更多请关注php中文网其它相干文章!
TAGS
小程序
跑马灯抽奖js php,文字跑马灯效果的完成相关推荐
- php实现文字向左跑马灯,js实现文字跑马灯效果
js实现文字超过显示宽度每间隔1s自动向左滚动显示 *{ margin:0; padding:0;} body{font:12px/1 '微软雅黑';} .wrapper{font-size: 0.8 ...
- 原生js 实现 文字向上翻动 效果, jquery效果实现的总是在一段时间后 速度变快
https://blog.csdn.net/yunchong_zhao/article/details/106387004 之前曾经用jquery 做过一个类似的 但是 随着时间的进行 发动翻动 ...
- js在html中加文字走马灯特效,JS实现文字的走马灯效果
北京欢迎你 // //var x = 20; // //alert(isNaN(x)); //判断其是不是数字 // function scroll() { ...
- js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
- jquery 立体走马灯_jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
- 微信小程序实现文字跑马灯
wxml: <view>1 显示完后再显示</view> <view class="example"><view class=" ...
- 手机端html跑马灯效果,jQuery实现适用于移动端的跑马灯抽奖特效示例
本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效.分享给大家供大家参考,具体如下: 图片全部隐私处理 跑马灯抽奖特效难点一:奖品位置排放,如下图 奖品1 奖品2 奖品3 奖品4 奖品5 奖品 ...
- 微信小程序教程:文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
最新文章
- [转贴]电阻电容的封装形式如何选择
- Linux系统下活用History命令
- python游戏编程入门 免费-Python游戏编程入门4
- nyoj841最高位数字
- k8s的list-watch机制和 pod调度约束
- lnp和mysql分开安装_毕业设计之LNP+DISCUZ +分离的数据库操作
- 【机器视觉学习笔记】双线性插值实现图片任意角度旋转(C++)
- 开源开放 | 熵简科技 AI Lab 开源金融领域中文预训练语言模型 FinBERT
- bowtie1和bowtie2的比较
- bootstrap css选择不同的宽度
- 简要描述安装配置apache的一个开源Hadoop集群
- linux为mysql创建gpower_系统运维|RHEL/CentOS 7中安装并配置 PowerDNS 和 PowerAdmin
- 谷歌首页被别的网站篡改
- 2021年电工杯B题附代码、附论文——光伏建筑一体化板块指数发展趋势分析及预测
- Redis设计与实现(导航)
- JavaWeb学习笔记(六)—— JSP连接数据库SQL Server
- 从校园人到职业人的转变
- Excel2003工作簿密码和工作表保护的加密和解密
- 美团运维SRE+运维开发一面面经汇总
- java 仿qq空间_仿QQ空间和微信朋友圈,高解耦高复用高灵活
热门文章
- 什么样的内容会更吸引用户?
- 浙江省南浔区家庭光伏企业规范要求
- python软件菜单翻译_制作属于自己的翻译软件(基于PyQt5+Python+实时翻译)
- 南京师范大学计算机技术研究生就业,南京师范大学计算机技术在职研究生怎么样?...
- pod sepc说明文件写法
- 绿色低碳节能无纸化办公,让企业发展更长远
- JQuery mousedown事件判断左右键
- 统计学计算机类实验报告,应用统计学实验报告.doc
- 苹果手机如何压缩文件?教你一招
- 佳明手表大数据应用_Garmin手表还有这些隐藏技能?Connect IQ应用了解一下~