小白 请教效果如何实现

「已注销」 2017-01-04 10:13:49
小白刚入手web这块,现在负责页面,遇到如下效果图,

需要实现的效果:上下箭头点击实现上下滚动,点击中间实现跳转
网上找了一些代码,可以实现上下滚动,目前问题点就是如何实现第一行,最后一行,以及中间那一行的文字效果,上下滚动时,这三行的文字变化,效果不变。
目前差不多就差这块就完成了。
ps:这个项目是针对电视的,是用遥控器控制的,目前系统还没完,先跑在PC上,先用键盘方向键控制上下滚动,enter键控制点击。
...全文
286 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
燕-十三 2017-01-13
  • 打赏
  • 举报
回复
引用 7 楼 showbo 的回复:
中间就是一个border和border-radius圆角 上下模糊用opcacity滤镜简单弄下,不过看效果是渐变的,你一定要一模一样看这个:http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/
进去就看到一行大字 天赐美妞
  • 打赏
  • 举报
回复
竖版图片轮播,是否可行
functionsub 2017-01-04
  • 打赏
  • 举报
回复
中间的做2个层,一个白色底板滚,一个绿色的在上面滚,2个一起滚就可以了。中间那个带边框的DIV加个overflow:hidden;
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
引用 2 楼 functionsub 的回复:
这个问题还挺麻烦的。 如果不考虑兼容性,用CSS3的渐变背景可以实现。 如果要考虑兼容性,那就只能用PS做一个渐变的图片当做背景了。 就是上下箭头那里一整行加这样的背景,不知道你理解了没。。。
上下箭头那行 可以了 中间的要怎么实现
functionsub 2017-01-04
  • 打赏
  • 举报
回复
这个问题还挺麻烦的。 如果不考虑兼容性,用CSS3的渐变背景可以实现。 如果要考虑兼容性,那就只能用PS做一个渐变的图片当做背景了。 就是上下箭头那里一整行加这样的背景,不知道你理解了没。。。
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
感觉问题好小白,唉,之前不是做这个的,硬上。。。
笑笑书生 2017-01-04
  • 打赏
  • 举报
回复
可以通过点击事件改变他的位置,有点像文字轮播和雪碧图的那种思路吧
daswcszxw 2017-01-04
  • 打赏
  • 举报
回复
这个没什么难度吧? 1,先把HTML排起来. 2,LG 等于class=act border:1px solid #ccc; border-radius:50%,考虑兼容就切图,背景. 3,上下箭头点击选择,移动端可以加上touch. 4,如果是键盘的上下键,enter键,控制对应的KEY.
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
引用 7 楼 showbo 的回复:
中间就是一个border和border-radius圆角 上下模糊用opcacity滤镜简单弄下,不过看效果是渐变的,你一定要一模一样看这个:http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/
有个问题,怎么才能获取到中间框中的值,比如“LG”在中间框中,点击时怎么才能确定点击的是“LG”?
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
引用 5 楼 weixin_36771189 的回复:
竖版图片轮播,是否可行
有个文本上下滚动的可以用
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
引用 7 楼 showbo 的回复:
中间就是一个border和border-radius圆角 上下模糊用opcacity滤镜简单弄下,不过看效果是渐变的,你一定要一模一样看这个:http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/
好的 非常感谢。。
Go 旅城通票 2017-01-04
  • 打赏
  • 举报
回复
中间就是一个border和border-radius圆角 上下模糊用opcacity滤镜简单弄下,不过看效果是渐变的,你一定要一模一样看这个:http://www.zhangxinxu.com/wordpress/2011/04/%E5%B0%8Ftipcss3%E4%B8%8B%E7%9A%84%E6%B8%90%E5%8F%98%E6%96%87%E5%AD%97%E6%95%88%E6%9E%9C%E5%AE%9E%E7%8E%B0/
「已注销」 2017-01-04
  • 打赏
  • 举报
回复
引用 4 楼 functionsub 的回复:
中间的做2个层,一个白色底板滚,一个绿色的在上面滚,2个一起滚就可以了。中间那个带边框的DIV加个overflow:hidden;
中间需要有点击效果和点击事件,要怎么弄?
概述:宠物智能饲养监测系统基于RT-Thread的ART-PI开发板,主控STM32F750XBH6,支持采集温度、湿度和光照数据,实现高温本地和远程预警,智能照明控制,实时采集数据并通过 WIFI 上传云端,针对智能宠物管理提供一个较好的使用范例,也是自己借参加本次活动,首次实操使用RT-Thread rtos,实现功能是次要目的,学习和使用rtt是初衷,之后本项目会继续增加新功能,简单来说这是一个比较实用的。 开发环境硬件:ART-PI 扩展板:DHT11温湿度传感器,BH1750光照传感器和灯控模块 RT-Thread版本:RT-Thread V 4.0.3 开发工具及版本:RT-Thread-studio v2.0.0,STM32CubeMX v6.1.0 RT-Thread使用情况概述内核部分:调度器。 调度器:创建多个线程来实现不同的工作。 组件部分:I2C框架, Sensor框架, SAL 套接字抽象层 I2C框架:使用I2C框架来驱动光照传感器,上层代码可以提高代码的可重用性。 Sensor框架:为上层提供统一的操作接口,提高上层代码的可重用性;简化底层驱动开发的难度,可以非常简单的读取传感器采集数值。 SAL 套接字抽象层:组件完成对不同网络协议栈或网络实现接口的抽象并对上层提供一组标准的 BSD Socket API,这样开发者只需要关心和使用网络应用层提供的网络接口,而无需关心底层具体网络协议栈类型和实现,极大的提高了系统的兼容性,方便开发者完成协议栈的适配和网络相关的开发 软件包部分: Webclient: 提供设备与 HTTP Server 的通讯的基本功能,主要使用http post。 BH1750FVI: 该传感器软件包提供了使用光照强度传感器基本功能,BH1750FVI 是一种用于两线式串行总线接口的数字型光强度传感器集成电路,具有较高的分辨率可以探测较大范围的光强度变化(范围: 1lx-65535lx),特别适合对光照环境要求较高的场景。 硬件框架ART-PI采集到数据上传到云端(目前使用自己php+mysql,断网本地存储测试中)。 软件框架说明上电初始话后,检测传感器变化,满足设定条件的,通过wifi上传到服务器端 目前服务器端只提供数据处理和存储 软件模块说明bh1750_thread_entry: 光照传感器线程 dht11_thread_entry:温湿度传感器线程 user_webclient_post:http_post main:led 闪烁,用来检测当前系统的运行状态。 演示效果视频演示比赛感悟首先非常感谢RTT和电路城以及ST等一起举办的这次活动。 由于第一次使用M7核mcu以及第一次使用rtt操作系统,从小白一步一步学习,测试,看文档,请教,虽然目前还是小白水平,但是确确实实是一次难得的机会,不亲自实践就永远不知道自己的水平在哪,也不能了解rtt便捷。不得不说,结束rtt studio之后,使用起来非常顺手,再者H750 480MHz搭配art-pi强悍的设计,用于之后的复杂功能开发测试有巨大的升级空间。 这次比赛不仅仅是学到了,rtt stm32的软硬件知识,更多的是和许多志同道合的小伙伴,讨论与分享自己的所获所得,这也是一种开源精神。 最后要说声抱歉,鉴于没有充分认识到自己有限的水平,虽然近一个月的时间,还只能写出这样的水平,心比天高无奈水平一般,但是这是一个开始,会围绕设计主题,做持续的更新,不断学习和实践,继续让art-pi发光发热。 感谢!!!

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧