当您滚动到特定页面位置时,如何执行此操作,该功能将启动一次
How to do that when you scroll to a specific page position, function is started once?
如果我们
滚动到某个位置,scrl
函数会触发另一个函数(页面中的元素移动ring
函数)。但只有当我们再次滚动页面时,元素在完成后不会停止并将继续改变其位置,它是ring
继续运行的功能。
- 如何停止函数的执行?
- 如何使该
ring
功能一次仅执行一次作为条件工作? - 如何编写一次触发函数的条件?
var h = document.documentElement.clientHeight,
hh = parseInt($('.wrapdiv').css('height'));
function ring() {
$('.ring').delay(500).animate({ //1
left: 187,
},
800);
$('.ring').delay(500).animate({ //2
left: 300,
},
800);
$('.ring').delay(500).animate({ //2.1
left: 394,
},
800);
$('.ring').animate({ //3
left: 481,
top: 100,
},
800);
};
function scrl() {
var top = $(window).scrollTop();
if (top > ((h + hh) / 2)) {
ring();
}
// Inside the function can be a lot of other functions and I need to stop only ring()
};
function myfoo() {
$('.firstdiv').css('height', h);
};
$(window).scroll(scrl);
$(window).resize(myfoo);
$(document).ready(myfoo);
.parentring {
display: block;
position: relative;
width: 1050px;
height: 800px;
margin: 0 auto;
}
.ring {
display: block;
position: absolute;
top: 0px;
height: 24px;
width: 24px;
border-radius: 50%;
background: #DCDCDC;
border: 4px solid #F1F1F1;
left: 87px;
box-shadow: 0 0 2px #006492, inset 0 0 7px #153F53;
}
.wrapdiv {
display: block;
position: relative;
overflow: hidden;
height: 244px;
background: #CE93D8;
color: #fff;
padding: 0 25px;
}
.firstdiv {
background: #FFB74D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="firstdiv"></div>
<div class="wrapdiv">Значимость этих проблем настолько очевидна, что укрепление и развитие структуры влечет за собой процесс внедрения и модернизации систем массового участия. Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности
обеспечивает широкому кругу (специалистов) участие в формировании новых предложений. Идейные соображения высшего порядка, а также новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия.
зации соответствующий условий активизации. Идейные соображения высшего порядка, а также укрепление и развитие структуры позволяет оценить значение новых предложений. Равным образом укрепление и развитие структуры требуют
от нас анализа системы обучения кадров, соответствует насущным потребностям. С другой стороны дальнейшее развитие различных форм деятельности способствует подготовки и реализации системы обучения кадров, соответствует насущным потребностям. Не следует,
однако забывать, что сложившаяся структура организации позволяет оценить значение дальнейших направлений развития. Товарищи! консультация с широким активом позволяет оценить значение позиций, занимаемых участниками в отношении поставленных задач. Равным
образом рамки и место обучения кадров позволяет оценить значение системы обучения кадров, соответствует насущным потребностям.
</div>
<div class="parentring">
<div class="ring"></div>
</div>
首先,您应该在加载 DOM 树后访问 DOM 元素。
将所有元素"选择"操作(通过id或其他选择器获取)放入$(document).ready(function(){ ... })
函数中(对于纯Javascript - 放入window.onload = function(){ ... }
)。
为了防止函数内重复执行ring()
函数scrl
请使用一些全局变量或函数对象静态属性(以指示是否执行了ring
函数)。我更喜欢第二种方法:
function scrl() {
var top = $(window).scrollTop();
if (!scrl.wasRinged && top > ((h + hh) / 2)) {
ring();
scrl.wasRinged = true;
}
...
}
scrl.wasRinged = false; // defining static property on function object
相关文章:
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- Google 脚本:用于创建日历活动的脚本运行时不会出错,但不会执行任何操作
- 当通过AJAX调用时,控制器操作不会执行
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 点击:更改位置后执行某些操作
- 无法执行文件.退出Acrobat PDF中的操作
- 从表单中获取用户输入执行计算(操作顺序)并输出回该表单
- 如何在ListView项模板中获取按钮来执行不同的操作
- 单击元素两次后执行操作
- ReactJS只有在操作完成后才能执行某些操作
- toogleClass函数来切换元素类并在事件期间执行某些操作
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- Var工作,但在使用数组执行相同操作时停止
- 如何在mvc3中执行操作而不更改当前页面
- jQuery:$.ajax() 重定向到其 URL 表单操作参数,而不是对表单操作执行 AJAX 请求
- 如何为多个操作执行简单的 jQuery
- Redux 转换到操作执行后
- 反流操作执行后触发通知/回调
- jquery如果按钮点击了执行其他操作执行其他操作
- 在操作执行之前禁用锚链接