像 Netflix 上的水平滚动图像
horizontal scrolling Images like on Netflix
我正在尝试创建一个包含视频内容的网站,我想在主页上横向选择封面图片,就像 netflix 那样。
这意味着有很多图片分布在整个屏幕上,并且会通过屏幕右侧/左侧的鼠标悬停箭头滚动。
截图:
http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg
有人知道如何制作吗?
我正在使用 Dreamweaver 和 Muse,获得了一些基本的 html 和 css 技能,使用了一些 jquery 代码,但我还不太熟练。
再见,罗伯特
如果您没有太多经验,那么我建议您使用插件,例如 Owl Carousel。
开箱即用,几乎可以满足您的所有需求。
还有很多其他选项,但这个确实支持触摸并且响应迅速,所以非常好。
这个 blog post 列出了很多(包括 Owl 轮播)。
您也可能会得到很多其他用户推荐的其他人。
你什么时候有时间我也建议尝试编写自己的轮播。有这么多选择似乎是在浪费时间,但这确实是增强 html、css 和 javascript.
的好方法
轮播是我最喜欢的示例项目,可以帮助培训初级开发人员。
从一些基本的 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 文件夹中的屏幕截图,并且使用了库来添加人字形图标,但您可以使用任何东西。
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);
}
});
结果:
我正在尝试创建一个包含视频内容的网站,我想在主页上横向选择封面图片,就像 netflix 那样。
这意味着有很多图片分布在整个屏幕上,并且会通过屏幕右侧/左侧的鼠标悬停箭头滚动。
截图:
http://cdn3-i.hitc-s.com/180/netflix_redesign_70590.jpg
有人知道如何制作吗? 我正在使用 Dreamweaver 和 Muse,获得了一些基本的 html 和 css 技能,使用了一些 jquery 代码,但我还不太熟练。
再见,罗伯特
如果您没有太多经验,那么我建议您使用插件,例如 Owl Carousel。
开箱即用,几乎可以满足您的所有需求。
还有很多其他选项,但这个确实支持触摸并且响应迅速,所以非常好。
这个 blog post 列出了很多(包括 Owl 轮播)。 您也可能会得到很多其他用户推荐的其他人。
你什么时候有时间我也建议尝试编写自己的轮播。有这么多选择似乎是在浪费时间,但这确实是增强 html、css 和 javascript.
的好方法轮播是我最喜欢的示例项目,可以帮助培训初级开发人员。
从一些基本的 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 文件夹中的屏幕截图,并且使用了库来添加人字形图标,但您可以使用任何东西。
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);
}
});
结果: