像 Netflix 上的水平滚动图像

Posted

技术标签:

【中文标题】像 Netflix 上的水平滚动图像【英文标题】:horizontal scrolling Images like on Netflix 【发布时间】:2015-03-16 18:47:01 【问题描述】:

我正在尝试创建一个包含视频内容的网站,并且我希望在主页上横向选择封面图片,就像 netflix 一样。

这意味着大量图片分布在屏幕大小上,并通过屏幕右侧/左侧的鼠标悬停箭头滚动。

截图:

http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg

有人知道如何创建吗? 我正在使用 Dreamweaver 和 Muse,掌握了一些基本的 html 和 css 技能,使用了一些 jquery 代码,但我还不是很坚定。

再见,罗伯特

【问题讨论】:

【参考方案1】:

从一些基本的 CSS 样式开始:

这将涵盖 Netflix 的基本外观:

body 
background: #141414;

#hold_images 
display: inline-block; 
white-space: nowrap;

#icon_right 
right: 20; 
cursor: pointer;  
margin-top: -200px; 
position: fixed; 

#icon_left 
left: 20; 
cursor: pointer;  
margin-top: -200px; 
position: fixed; 

.transition 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

img 
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    cursor: pointer; 

在你的 body 中添加一个 div 来保存图片:

<body>

<div id='hold_images'></div>

</body>

使用 jQuery 处理图像和图标的附加、图像悬停和平滑滚动:

图像是保存到 img 文件夹中的截屏,并使用了一个库来添加 V 形图标,但您可以使用任何东西。

images = 
   "1" : "img/1.png",
   "2" : "img/2.png",
   "3" : "img/3.png",
   "4" : "img/4.png",
   "5" : "img/5.png",
   "6" : "img/6.png",
   "7" : "img/7.png",
   "8" : "img/8.png",
   "9" : "img/9.png",
   "10" : "img/10.png"


Object.keys(images).forEach(function(path) 
    $('#hold_images').append("<img class='my_img' width=200 height=400 src=" + images[path] + ">"); 
);

$('body').append("<i id='icon_right'></i>");
$('body').append("<i id='icon_left'></i>"); 
add_icon('#icon_right', 'fa fa-chevron-right', '40px', 'white');
add_icon('#icon_left', 'fa fa-chevron-left', '40px', 'white');

$(document).ready(function()
    $('.my_img').hover(function() 
        $(this).addClass('transition');
    
    , function() 
        $(this).removeClass('transition');
    );
);

$(document).on('click', '#icon_right, #icon_left', function() 
    if($(this).attr('id') == 'icon_right') 
        $('body').animate(scrollLeft: 1000, 800);
         else 
        $('body').animate(scrollLeft: -1000, 800);
    
);

结果:

【讨论】:

add_icon(..) 函数的文档在哪里?【参考方案2】:

如果您没有太多经验,那么我建议您使用诸如Owl Carousel 之类的插件。

它几乎可以做任何你想要开箱即用的事情。

还有很多其他选项,但这个确实支持触摸并且响应速度也很好,所以非常好。

这个blog post 列出了很多(包括猫头鹰旋转木马)。 您可能还会得到很多其他用户推荐的其他人。

您什么时候有时间,我还建议您尝试编写自己的轮播。有这么多选择似乎是在浪费时间,但它确实是增强 html、css 和 javascript 的好方法。

轮播是我最喜欢的示例项目,可帮助培训初级开发人员。

【讨论】:

以上是关于像 Netflix 上的水平滚动图像的主要内容,如果未能解决你的问题,请参考以下文章

尝试创建类似 Netflix 的 UI - 包含项目

如何在android tv中使用像netflix这样的浏览片段制作侧边菜单?

每周运行30万个容器实例 - Netflix 的容器化实践

UITableView中的多个UICollectionView在滚动中交织在一起

具有基于 DNS 配置的 spring-cloud-netflix 上的 Eureka,所有实例都显示为不可用

如何在 tvOS 上深度链接到 Netflix?