android拉勾轮播,拉勾网顶部轮播图的实现(一)以及简单闭包的应用
一直觉得拉勾网的顶部导航轮播特别有意思,静态页面图如下:
滑动右侧的三张缩略图,可以看到左侧大图部分会上下滑动。另外鼠标移到下方的6张图上时,会有半透明的遮罩层出现,并且出现的方式会跟随鼠标移入方向的不同而随之改变,具体的动态效果可以到网站上查看。
那么我们这次先实现上面部分导航的效果,遮罩层的实现放到之后我们再进行分解(涉及到的代码比较繁杂,有兴趣的朋友可以自己搜索一下源代码)。
先把HTML和CSS部分的代码放上来吧。
HTML的代码显示有问题,这边我把截图放上来吧,大家看一下就可以了,非常简单。
CSS代码部分如下:
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
*{
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
.container {
width: 750px;
margin: 100px auto;
overflow: hidden;
height: 160px;
}
.content{
float: left;
}
.content li+li {
margin-top: -3px;
}
.control {
float: right;
width: 121px;
height: 160px;
position: relative;
right: 0;
top: 0;
}
.control li {
width: 113px;
height: 42px;
border: 4px solid #ccc;
position: relative;
}
.control li+li {
margin-top: 5px;
}
.control span {
background: url(image/control_current.png) no-repeat;
width:137px;
height: 50px;
position: absolute;
z-index: 1;
left: -6px;
}
#bg-1 {
transition:all 0.2s;
}
#content {
transition:all 0.2s;
}
.banner {
width: 750px;
top: 275px;
left: 50%;
margin-left: -375px;
position: absolute;
height: 113px;
overflow: hidden;
}
.banner li{
float: left;
border: 1px solid #e8e8e8;
}
.banner li+li {
margin-left: 12px;
}
.hot-info {
width: 113px;
height: 113px;
color: #fff;
background-color: rgb(25,186,149);
opacity: 0.8;
transition: all 0.3s;
}
.hot-info h2{
padding-top: 10px;
text-align: center;
}
.hot-info em {
display: block;
width: 99px;
height: 5px;
background-color: rgb(94,207,181);
margin:4px 7px 10px;
}
.hot-info p{
line-height: 18px;
font-size: 12px;
margin: 6px 8px;
}
.banner ul li:hover .hot-info {
margin-top:-116px;
}
接下来就是JS的实现:
window.οnlοad=function(){
function $(id){return typeof id==='string'?document.getElementById(id):id;}
var control=$('control');
var lis=control.getElementsByTagName('li');
var span=$('bg-1');
var content=$('content');
var banner=$('banner');
var imgs=banner.getElementsByTagName('img');
var info=document.getElementsByClassName('hot-info');
for (var i=0;i
lis[i].οnmοuseοver=function(i){
return function(){
span.style.marginTop=i*55+"px";
content.style.marginTop=-i*160+"px";
}
}(i);
}
}
可能大家看到这里就觉得这个东西也太简单了,不就是获取一下元素,然后再做一下for循环,添加一个onmouseover事件控制相关元素的css属性就完事了吗?
还有你这个for循环里面为什么还要套一个function?,不是应该这样子就可以了吗?
for (var i=0;i
lis[i].οnmοuseοver=function(){
span.style.marginTop=i*55+"px";
content.style.marginTop=-i*160+"px";
}
};
但是实际上,测试的时候你就会发现根本没有任何效果,可以输入一个console.log(i)在网页上打开控制台看下输出i的值到底是多少。
按理来说的话,输出的值应该是这样子的:
但是实际上你会发现,显示的是这样的:
就是这个原因导致我们的动态效果没有办法实现。
所以这个时候我们就发现上面正确代码里面添加的匿名函数的作用了,但是具体是怎么实现的呢?
首先要了解这个匿名函数是一个立即执行的函数,我们把 i 作为一个参数传给立即执行函数,这个函数执行后,i 转变成一个内部变量,外部函数无法获取到,这样局部变量i和全局变量i就可以很容易的区分开来,并且这个局部 i 就被保存下来并且被内部函数调用。
这个其实就是闭包的作用体现,这样可以做到正确的获取 i 的值(0,1,2),而不是获取到最终循环的值(2)。
到这里,大家应该都可以明白这个轮播图例子的实现原理了。
接下来,可以在CSS相关元素的样式中设置:
transition:all 1s;
就可以实现两侧图片的顺畅动画,至此我们的顶部轮播图片的制作也完成了,当然也可以不设置CSS的transition,用原生JS settimeout来控制图片在一定时间内的移动来完成动画,不过这个就确实比较麻烦。
那先到这里,后面会继续完成底部鼠标移入显示遮罩层的实现。
*PS 幸好有朋友提醒我,原来我把自动播放的代码忘掉了,我把原来的函数重新封装整理了一下,全部JS代码如下:
window.οnlοad=function(){
function $(id){return typeof id==='string'?document.getElementById(id):id;}
var control=$('control');
var lis=control.getElementsByTagName('li');
var span=$('bg-1');
var content=$('content');
var banner=$('banner');
var imgs=banner.getElementsByTagName('img');
var info=document.getElementsByClassName('hot-info');
var timer=null;
var index=0;
// 自定义一个定时器timer
// 自定义一个标签index用于控制自动播放:
timer=setInterval(autoPlay,5000);
// 初始化定时器timer
content.οnmοuseοver= control.οnmοuseοver=function(){
clearInterval(timer);
change();
}
control.οnmοuseοut=function(){
timer=setInterval(autoPlay,5000);
}
function autoPlay(){
index++;
if(index>=lis.length){
index=0;
}
span.style.marginTop=index*55+'px';
content.style.marginTop=-index*160+'px';
}
function change(){
for (var i=0;i
lis[i].οnmοuseοver=function(i){
return function(){
span.style.marginTop=i*55+"px";
content.style.marginTop=-i*160+"px";
index=i;
//这个index=i是非常重要的一步,change()函数调用的参数是i,而autoPlay()的参数是index,为了让光标移开头部区域后能继续执行autoPlay,并且按照 change()函数给定的那个页签向下播放,所以需要把参数i赋值给index;
}
}(i);
}
}
}
函数部分就不再做过多的解释了,只是简单的定义了一个index,然后每隔5秒做一次递加,两边图片的位置也随之改变。再定义鼠标移入清除定时器,移出开启定时器就可以了,并且把原来的函数定义成一个change()函数方便调用。
android拉勾轮播,拉勾网顶部轮播图的实现(一)以及简单闭包的应用相关推荐
- html制作课程导航页面,学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图 前期准备素材 一.项目页面PSD源文件 二.前期准备工作 三.CSS属性书写顺序 四.布局分析 五.布局流程 开始页面制作 头部 ...
- android ViewPager轮播制作成品——轮播制作(六)
android ViewPager轮播制作成品--轮播制作(六) 本文主要参考文章:Android 使用ViewPager实现左右循环滑动图片 下面整体介绍一下本系列文章.目的是想要做一个广告.通知轮 ...
- Android 项目必备(十一)--> 轮询操作
文章目录 前言 实战 前言 什么叫轮询请求? 简单理解就是 App 端每隔一定的时间重复请求的操作就叫做轮询请求,比如:App 端每隔一段时间上报一次定位信息,App 端每隔一段时间拉去一次用户状态等 ...
- 【Swift】自定义控件无限轮播 + 无限图片轮播
CocoaPods安装 pod 'PGBannerSwift' 复制代码 使用 1.无限图片轮播 首先引入import PGBannerSwift let banner = PGBanner(fram ...
- Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题!
Vue项目中获取数据后使用swiper轮播,无法轮播且 autoplay 和 loop 失效问题! 问题表现:轮播组件显示第一张图,可拖动但无法切换到下一张图.但是F12控制台切换屏幕后能正常轮播但无 ...
- js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
- uni-app:多功能轮播图,堆叠试轮播,文本轮播,图文轮播
插件地址[前往] mosowe-swiper:适用于uni-app的轮播图插件 轮播组件,本插件兼容H5.APP.微信小程序.支付宝小程序 组件功能 普通轮播(文本.图片,图文轮播,支持上下.左右轮播 ...
- 基于python爬虫的岗位数据分析以拉勾网为例_Python拉勾爬虫——以深圳地区数据分析师为例...
拉勾因其结构化的数据比较多因此过去常常被爬,所以在其多次改版之下变得难爬.不过只要清楚它的原理,依然比较好爬.其机制主要就是AJAX异步加载JSON数据,所以至少在搜索页面里翻页url不会变化,而且数 ...
- BOSS和拉勾竞品分析
最近找工作在各个网站都更新了简历,包括BOSS.拉勾.智联.前程无忧等,使用了一段时间发现智联和前程无忧的共同问题是招聘信息鱼龙混杂,自己稍不注意就可能会入坑.相比之下BOSS和拉勾可能更靠谱一些.那 ...
- python3抓取数据_python3抓取到的拉勾数据统计
趁着最近有时间写了个拉勾爬虫抓取了后端.前端和移动端技术岗位的数据,总共大约6多万条记录,对其取前十名进行统计 按地域划分: 可以看出北上广深杭的数量远远超出其它城市,机会相对较多 2. 按融资阶段来 ...
最新文章
- 【项目总结】之——导出Excel
- DirectX10一变换(三)
- linux du命令使用:目录大小排序
- 小程序php mysql_PHP+TP小程序授权登陆实现
- leetcode 95 python
- Choosing Capital for Treeland codeforce 219-D
- 周莫凡python_机器学习 | 莫烦Python
- 京东php乱码,浏览器打开京东商城网页显示乱码该怎么办?
- Android—Gradle教程(九)完结篇
- 苹果笔记本计算机内存不足怎么办,macbook内存不够用怎么加_苹果电脑增加内存的具体方法...
- Web压缩问题-图片不显示
- 【转】全球十部最经典的科幻片,你看过几部?
- Camera 图像处理原理分析- 色彩篇 二
- 荣耀8c鸿蒙,【荣耀畅玩8C评测】千元标配4GB大内存 荣耀8C给你越级体验-中关村在线...
- 对于TextView中设置艺术字体
- 关于“硬件工程师工资不高”的几个真相!
- <script>标签通过src属性调用js文件
- 小寒android工具箱,2019年小寒节气介绍:描写小寒的诗词
- call和calling的用法_Call用法小结
- FFT之频率与幅值的确定
热门文章
- Nagios 3 Centreon 2 RC5 安装与配置(1)
- 向linux服务器上传下载文件方式收集
- Structs 2 session 学习
- Pig-0.13.0的编译
- Eclipse插件大全 挑选最牛的TOP30
- SessionID的传送
- 缺少网卡固件导致的网络服务异常,Can‘t load firmware file bnx2x/bnx2x-e2-7.13.15.0.fw
- P-Associated-URI
- html模拟手机桌面,html+css+js 模拟win7桌面
- mysql自动判断索引机制_Mysql优化之索引实现原理