常用代码集合

一、jquery返回顶部

$("html , body").animate({scrollTop: 0},‘slow‘);

二、jQuery判断移动端屏幕的滑动方向

$(‘body‘).on(‘touchstart‘, function(e) {
        var touch = e.originalEvent,
                startX = touch.changedTouches[0].pageX;
        startY = touch.changedTouches[0].pageY;
        $(‘body‘).on(‘touchmove‘, function(e) {
                touch = e.originalEvent.touches[0] ||
                        e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10) {
                        console.log("右划");
                        showPrevious();
                        $(‘body‘).off(‘touchmove‘);
                } else if (touch.pageX - startX < -10) {
                        console.log("左划");
                        showNext();
                        $(‘body‘).off(‘touchmove‘);
                };
                if (touch.pageY - startY > 10) {
                        console.log("下划");
                        $(‘body‘).off(‘touchmove‘);
                } else if (touch.pageY - startY < -10) {
                        console.log("上划");
                        $(‘body‘).off(‘touchmove‘);
                };
        });

        // Return false to prevent image
        // highlighting on Android
        return false;

}).on(‘touchend‘, function() {
        $(‘body‘).off(‘touchmove‘);
});

三、页面移动到对应位置开始执行动画

橙色容器从下方进入可视区域时(或者进入一段高度后),容器内的动画播放。

var eTop=$(element).offset().top;//橙色容器距离整个页面顶部的距离
var wTop=$(window).height();//绿色框可视区域的高度
window.onresize=funciton(){
var wTop=$(window).height();//缩放窗口这个高度会改变,需要再取得
}
$(window).scroll(funciont(){
  var dTop = $(document).scrollTop();//绿色框可视区域上面到黑色页面顶部的距离,会实时改变
    //所以当橙色容器进入可视区域怎么判断?
    //放在scroll事件里面
    if(dTop+wTop > eTop){//动画播放事件}
});

就这样,当可视区域上面的高度+可视区域高度>容器距离顶部高度,我们就知道容器进入【可视区底部】了
如果你想让容器进入一段距离(比如100px)再触发动画?

//放在scroll事件里面
if(dTop+wTop-100 > eTop){//动画播放事件}

四、滚动条的启用与禁止
//禁止滚动条

$(document.body).css({
 "overflow-x":"hidden",
 "overflow-y":"hidden"
});

//启用滚动条
$(document.body).css({
 "overflow-x":"auto",
 "overflow-y":"auto"
});

原文地址:https://blog.51cto.com/9161018/2355445

时间: 2024-10-11 11:31:48

常用代码集合的相关文章

phpcms v9模板制作常用代码集合

phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 {date('Y-m-d H:i:s',$r[inputtime])} 3.多栏目调用&多推荐位调用 调用需求:文章范围为59 60 61三个栏目,并且推送到了27 和28两个推荐位:从第三条开始,连续调用7篇文章. {pc:get sql="SELECT * FROM v9_news WH

ExtJS常用代码集合

ExtJS常用代码集合,包括弹出提示框,登陆框,树状结构等等.?1. [代码]弹出提示框     <html>    <head>        <title>Getting Started Example</title>        <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css"

phpcms v9模板制作常用代码集合(转)

phpcms v9模板制作常用代码集合(个人收藏) 1.截取调用标题长度 {str_cut($r[title],36,'')} 2.格式化时间 调用格式化时间 2011-05-06 11:22:33 {date('Y-m-d H:i:s',$r[inputtime])} 3.多栏目调用&多推荐位调用 调用需求:文章范围为59 60 61三个栏目,并且推送到了27 和28两个推荐位:从第三条开始,连续调用7篇文章. {pc:get sql="SELECT * FROM v9_news WH

Unity3D常用代码集合

1.基本碰撞检测代码 function OnCollisionEnter(theCollision : Collision){         if(theCollision.gameObject.name == "Floor"){                     Debug.Log("Hit the floor");                 }else if(theCollision.gameObject.name == "Wall&qu

二叉树的性质和常用操作代码集合

二叉树的性质和常用操作代码集合 性质: 二叉树的性质和常用代码操作集合 性质1:在二叉树的第i层上至多有2^i-1个结点 性质2:深度为k的二叉树至多有2^k - 1个结点 性质3:对任意一棵二叉树T,若终端结点数为n0,而其度数为2的结点数为n2,则n0 = n2 + 1 满二叉树:深度为k且有2^-1个结点的树 完全二叉树:深度为k,结点数为n的二叉树,如果其结点1~n的位置序号分别与等高的满二叉树的结 点1~n的位置序号一一对应,则为完全二叉树. 性质4:具有n的结点的完全二叉树深度为lo

ASP.NET MVC+EF5 开发常用代码

Asp.Net Mvc,EF 技术常用点总结 1.Asp.Net MVC a)获得当前控制器名和当前操作的名称(action) 1.Action 中 RouteData.Values["controller"].ToString(); RouteData.Values["action"].ToString(); 2.页面中(view) ViewContext.RouteData.Values["controller"].ToString().To

C#常用的集合类型(ArrayList类、Stack类、Queue类、Hashtable类、SortedList类)

1.ArrayList类 ArrayList类主要用于对一个数组中的元素进行各种处理.在ArrayList中主要使用Add.Remove.RemoveAt.Insert四个方法对栈进行操作.Add方法用于将对象添加到 ArrayList 的结尾处:Remove方法用于从 ArrayList 中移除特定对象的第一个匹配项:RemoveAt方法用于移除 ArrayList 的指定索引处的元素:Insert方法用于将元素插入 ArrayList 的指定索引处. 示例 ArrayList的使用 示例将介

Java 处理json常用代码

本工程代码已上传至资源,如有需要,请自行下载. package com.michael; import static org.junit.Assert.assertEquals; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; import net.sf.json.JSONArray; import n

Java 常用List集合使用场景分析

Java 常用List集合使用场景分析 过年前的最后一篇,本章通过介绍ArrayList,LinkedList,Vector,CopyOnWriteArrayList 底层实现原理和四个集合的区别.让你清楚明白,为什么工作中会常用ArrayList和CopyOnWriteArrayList?了解底层实现原理,我们可以学习到很多代码设计的思路,开阔自己的思维.本章通俗易懂,还在等什么,快来学习吧! 知识图解: 技术:ArrayList,LinkedList,Vector,CopyOnWriteAr