我的小前端 (2)—— JQ和zepto

没有什么特别新技术,就是记录我做移动端遇到的问题

2016-02-16



关于JS库

JQ很简单,网上很多插件效果都依赖它,但JQ库很大

zepto.js用简单效果,很好用

<script src="js/zepto.js"></script>
    <script type="text/javascript">
        Zepto(function($){
            $(‘.dialog-bg‘).click(function(){
                $(this).show();
                $(‘.dialog-body‘).hide();
            });
          
            $(‘.icon-refresh‘).click(function(){
                $(this).show().css("opacity", 1).show(2000).animate({ opacity: 0 }, 1000, ‘ease-in‘);  //对display: none隐藏的DIV显示2秒后1秒隐藏,也能用延迟计时器setTimeout(function () {$(this).show();}, 6000);

,不支持delay。
            });
        });
    </script>

***********************************

现在用zepto做页面的Loading动画和页面动态效果的越来越多

时间: 2024-10-13 22:47:27

我的小前端 (2)—— JQ和zepto的相关文章

小前端大能耐——Canvas与Javascript配合实现几个功能

1.粒子化 function Dot(X, Y, Z, R) { this.dx = X; this.dy = Y; this.dz = Z; this.tx = 0; this.ty = 0; this.tz = 0; this.z = Z; this.x = X; this.y = Y; this.r = R; this.paint = function() { context.save(); context.beginPath(); var scale = 250 / (250 + thi

移动端jq及zepto事件绑定

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; f

手机下拉/上拉刷新(基于jq或者zepto)

       $(window).scroll(function () {                 if ($(document).scrollTop() >= $(document).height() - $(window).height()) { //通过修改大于小于号实现 上拉下拉                     loadMemberList();// 你要执行的方法:                 }             });         })

他的小前端 (1)—— 移动端特殊效果-网页小键盘

移动端的CLICK会延迟,这个效果没看出来延迟,为什么? 页面: <div id="container" style="width: 200px">        <p id="write" ></p>        <ul id="keyboard">            <li>1</li>            <li>2</li

我的小前端 (3)—— 移动端特殊效果-让页面宽度自适应

没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 移动端的页面宽度不固定,让页面宽度自适应的方法: 1.直接属性赋值,页面宽度不固定[我常用第一个] <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.页面DIV宽度固定320内,由JS控制缩放.[如果页面太宽,比例变了.个人

前端登录jq图形验证码

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" c

js手写一个实现一个简单的promise__小前端chenMr

1.首先来看一下promise常用场景 function chenPromise (arg) { return new Promise (resolve, reject) { if () { doSomeThing(arg) resolve(val) } else { reject(val) } } }chenPromise(arg).then(((val) => {}, (err) =>{}) 2.了解promise状态 1.常规分三种:PENDING, RESOLVED, REJECTED

web前端使用jq实现对联广告功能

实现效果: 功能:当滚动条滚在中间时,窗口两边出现图片,可以用于广告图片的出现 实现代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"

web前端利用jq实现折叠菜单

实现效果图:  功能:点击某一个一级菜单时,相应的二级菜单会下拉出现 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&