社区
HTML5
帖子详情
部分手机部分浏览器滚动抽奖效果不对齐[jquery animate()实现的滚动效果]
Healerblack
2017-12-22 09:53:07
百分比布局页面使用jquery animate()方法实现老虎机滚动抽奖,在谷歌上调试没问题,但是在安卓手机不同浏览器测试的实际情况各不相同,部分手机部分浏览器滚动异常,固定大小布局的页面在移动端就不存在这种问题(temp就是一个纵列的高度,总共四个纵列,用的是背景图实现的效果)
测试主要用的华为、魅族、小米手机,浏览器用的是QQ浏览器、手机自带浏览器和UC浏览器
【不能使用自适应布局rem和vw、vh】
...全文
439
3
打赏
收藏
部分手机部分浏览器滚动抽奖效果不对齐[jquery animate()实现的滚动效果]
百分比布局页面使用jquery animate()方法实现老虎机滚动抽奖,在谷歌上调试没问题,但是在安卓手机不同浏览器测试的实际情况各不相同,部分手机部分浏览器滚动异常,固定大小布局的页面在移动端就不存在这种问题(temp就是一个纵列的高度,总共四个纵列,用的是背景图实现的效果) 测试主要用的华为、魅族、小米手机,浏览器用的是QQ浏览器、手机自带浏览器和UC浏览器 【不能使用自适应布局rem和vw、vh】
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
3 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
Healerblack
2017-12-22
打赏
举报
回复
/* 抽奖滚动区域 */ .main_bg .main .num_box{width: 100%;height: 80%;position:absolute;left: 0;top: 0;background: url("../../images/award/draw.png");background-repeat: no-repeat;background-size: 100% 100%;} .main_bg .main .num_box .num{background:url("../../images/award/c7.png") top center repeat-y;background-size: 100% 160%;width: 21%;height: 85.8%;border: 1px solid red;}/* border: 1px solid red; */ .main_bg .main .num_box #num1{position: absolute;top: 6.7%;left: 6.8%;} .main_bg .main .num_box #num2{position: absolute;top: 6.7%;left: 28.8%;} .main_bg .main .num_box #num3{position: absolute;top: 6.7%;left: 50.7%;} .main_bg .main .num_box #num4{position: absolute;top: 6.7%;left: 72.6%;} 带边框的div是 .num_box 四个滚动条对应的是#num1、2、3、4
Healerblack
2017-12-22
打赏
举报
回复
Healerblack
2017-12-22
打赏
举报
回复
抽奖
动画 - lao虎机
抽奖
,手把手教你做一个
抽奖
机软件
本文介绍一个lao虎机
抽奖
动画的
实现
,lao虎机
抽奖
在各类商家营销活动中非常常见,这里主要介绍动画的
实现
过程,其他细节不做详细分析。 1. 需求 UI给到的蓝湖如下截图1 图1 三栏图片,每栏图片是一样的,都包含所有的奖品图片。 点击
抽奖
三栏图片从左到右依次开始上下
滚动
,从慢到块,
滚动
几轮后根据
抽奖
结果固定图片位置。 如果中奖三栏显示同一张奖品图片,否则随机显示三张奖品图片。最后弹出
抽奖
结果弹框。 2. 整体思路 2.1
滚动
说到
滚动
,首先想到的是scroll,但是scroll会有滚
抽奖
动画 - lao虎机
抽奖
本文介绍一个lao虎机
抽奖
动画的
实现
,lao虎机
抽奖
在各类商家营销活动中非常常见,这里主要介绍动画的
实现
过程,其他细节不做详细分析。 ps:lao虎机是敏感词,博客园的富文本和markdown编辑器都限制不允许出现,所有老用拼音。 1. 需求尔珍小说网 https://www.juei.info UI给到的蓝湖如下截图1 图1 三栏图片,每栏图片是一样的,都包含所有的奖品图片。 点击
抽奖
三栏图片从左到右依次开始上下
滚动
,从慢到块,
滚动
几轮后根据
抽奖
结果固定图片位置。 如果中奖三栏显示同一张奖品图片,否.
jQuery
的一些动画案例
本文主要写了几个关于
jQuery
的案例,有
手机
银行卡的tab切换,手风琴菜单栏制作,手风琴图片展示,淡入淡出图片展示,塔罗钟表以及九宫格
抽奖
块的制作。
如何是我们的
手机
浏览器
也使用weUi的
手机
样式框架
转https://blog.csdn.net/libin_1/article/details/50734266WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库:http://www.weui.org.cn/?/article/1。WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dia...
HTML+CSS+JS+
jQuery
学习笔记
HTML 一、基本标签 标题标签:<h1>标题标签</h1> 注释标签:<!-- --> 换行标签:<br/> 段落标签: <p>段落标签</p> 分隔线标签:<hr/> 加粗标签: <strong>加粗</strong> or <b>加粗</b> 倾斜标签: <em>倾斜</em> or <
HTML5
39,087
社区成员
5,549
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章