87,907
社区成员
发帖
与我相关
我的任务
分享小白 请教效果如何实现
小白刚入手web这块，现在负责页面，遇到如下效果图，
需要实现的效果：上下箭头点击实现上下滚动，点击中间实现跳转
网上找了一些代码，可以实现上下滚动，目前问题点就是如何实现第一行，最后一行，以及中间那一行的文字效果，上下滚动时，这三行的文字变化，效果不变。
目前差不多就差这块就完成了。
ps：这个项目是针对电视的，是用遥控器控制的，目前系统还没完，先跑在PC上，先用键盘方向键控制上下滚动，enter键控制点击。
需要实现的效果：上下箭头点击实现上下滚动，点击中间实现跳转
网上找了一些代码，可以实现上下滚动，目前问题点就是如何实现第一行，最后一行，以及中间那一行的文字效果，上下滚动时，这三行的文字变化，效果不变。
目前差不多就差这块就完成了。ps：这个项目是针对电视的，是用遥控器控制的，目前系统还没完，先跑在PC上，先用键盘方向键控制上下滚动，enter键控制点击。
...全文
请发表友善的回复…
发表回复
燕-十三 2017-01-13
- 打赏
- 举报
进去就看到一行大字 天赐美妞
圭宁的小小前端 2017-01-04
- 打赏
- 举报
竖版图片轮播，是否可行
functionsub 2017-01-04
- 打赏
- 举报
中间的做2个层，一个白色底板滚，一个绿色的在上面滚，2个一起滚就可以了。中间那个带边框的DIV加个overflow:hidden;
「已注销」 2017-01-04
- 打赏
- 举报
上下箭头那行 可以了 中间的要怎么实现
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
- 打赏
- 举报
有个问题，怎么才能获取到中间框中的值，比如“LG”在中间框中，点击时怎么才能确定点击的是“LG”？
「已注销」 2017-01-04
- 打赏
- 举报
有个文本上下滚动的可以用
「已注销」 2017-01-04
- 打赏
- 举报
好的 非常感谢。。
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
- 打赏
- 举报
中间需要有点击效果和点击事件，要怎么弄？
