发布于 2016-11-20 02:35:33 | 141 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了纯javascript实现简单下拉刷新功能,没有借助任何的框架,十分简单实用,有需要的小伙伴来参考下吧。

代码很简单,实现的功能却很实用,直接奉上代码

CSS:



<meta charset="utf-8" />

<title>Pull to Refresh</title>

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />

<style>

div{

    position: absolute;

    top:0px;

    bottom:0px;

    width:100%;

    left:0px;

    overflow: hidden;

}

li{

    list-style-type: none;

    height:35px;

    background: #ccc;

    border-bottom: solid 1px #fff;

    text-align: left;

    line-height: 35px;

    padding-left:15px;

}

ul{

    width:100%;

    margin-top:0px;

    position: absolute;

    left:0px;

    padding:0px;

    top:0px;

}

</style>

HTML:



<div class="outerScroller">

    <ul class = 'scroll'>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

         <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li>10</li>

    </ul>

</div>

<script>

   var scroll = document.querySelector('.scroll');

   var outerScroller = document.querySelector('.outerScroller');

   var touchStart = 0;

   var touchDis = 0;

   outerScroller.addEventListener('touchstart', function(event) { 

        var touch = event.targetTouches[0]; 

        // 把元素放在手指所在的位置 

           touchStart = touch.pageY; 

           console.log(touchStart);

        }, false);

   outerScroller.addEventListener('touchmove', function(event) { 

        var touch = event.targetTouches[0]; 

        console.log(touch.pageY + 'px');  

        scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';

        console.log(scroll.style.top);

        touchStart = touch.pageY;

        touchDis = touch.pageY-touchStart;

        }, false);

   outerScroller.addEventListener('touchend', function(event) { 

        touchStart = 0;

        var top = scroll.offsetTop;

        console.log(top);

        if(top>70)refresh();

        if(top>0){

            var time = setInterval(function(){

              scroll.style.top = scroll.offsetTop -2+'px';

              if(scroll.offsetTop<=0)clearInterval(time);

            },1)

        }

    }, false);

   function refresh(){

    for(var i = 10;i>0;i--)

        {

            var node = document.createElement("li");

            node.innerHTML = "I'm new";

            scroll.insertBefore(node,scroll.firstChild);

        }

   }

</script>

以上就是本文的全部内容了,希望对大家学习javascript能够有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务