首页

关于

开发小技巧: 如何在jQuery中禁用或者启用滚动事件.scroll

开发小技巧: 如何在jQuery中禁用或者启用滚动事件.scroll

在线演示

开发人员在使用jQuery开发web应用或者网站的过程中,有的时候需要触发特定元素来禁用页面滚动特性,或者启动页面滚动,使用下面的jQuery代码可以帮助你实现window对象滚动事件的绑定和解除绑定。

代码非常简单,使用jQuery的.off方法可以帮助你取消事件的绑定,具体代码如下:

var scrollHandler = function(){
myScroll = $(window).scrollTop();
$('#result').html(myScroll);
};

$("#bind").click(function(){
$(window).scroll(scrollHandler);
}).click();

$("#unbind").click(function(){
$(window).off("scroll", scrollHandler);

标签: 分享, jQuery, 开发小技巧

阅读更多

开发小技巧:jQuery来循环控制一系列的元素对象的行为

开发小技巧:jQuery来循环控制一系列的元素对象的行为

在线演示

在jQuery开发中,我们往往需要循环的控制一些元素的行为,比如,动画,或者隐藏/显示,通常我们可以使用jQuery的delay()方法或者Javascript的setTimeout方式来处理。

相关文章可以阅读: 如何使用jQuery让一组HTML对象一个一个淡出?

在这篇小技巧中,我们使用arguments.callee这个javascript的属性来完成类似上面的效果,代码如下:

    var item = $('#nav li'),count =0;
    (function() {
    $(item[count++]).animate({top: 40*count, opacity:0.8}, 500, arguments.callee);
    })();

首先定义需要添加效果的元素系列,然后使用匿名方法来定义动画效果,并且使用argument.callee来回调函数方法。

HTML代码

    <ul id="nav">

标签: jquery, 开发小技巧, jquery技巧

阅读更多

开发小技巧:jQuery处理自适应内容高度的iframe

开发小技巧:jQuery处理自适应内容高度的iframe

在线演示 

之前我们发表过另一篇开发小技巧的文章 :开发小技巧:超简单的"回到顶端"按钮实现,喜欢的朋友可以点击来看。

前端开发中,我们往往需要处理iframe,可能有的时候希望iframe根据内容自适应高度以便不出现令人烦心的滚动条,下面这段代码可以帮助你实现类似功能。

$(document).ready(function()
{
// Set specific variable to represent all iframe tags.
var iFrames = document.getElementsByTagName('iframe');

// Resize heights.
function iResize()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
// Set inline style to equal the…

标签: jquery, iframe, 开发小技巧, jquery小技巧

阅读更多

开发小技巧:超简单的“回到顶端”按钮实现

开发小技巧:超简单的

在线演示

之前的文章中我们曾发表过另外一个back to top的插件 :jQuery Back to Top,喜欢的朋友可以点击来看。

开发小技巧:超简单的

今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能,代码如下:

$(document).ready(function() {
// 滚动窗口来判断按钮显示或隐藏
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.back-to-top').fadeIn(100);
} else {
$('.back-to-top').fadeOut(100);
}
});

// jQuery实现动画滚动
$('.back-to-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0},…

标签: jquery, 开发小技巧, jquery小技巧, back to top, 回到顶端

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.