jquery判断手指滑动方向

jquery判断手指滑动方向

/*判断哪个滑动方向还是自己改下 要么上下 要么左右*/
var startX;
var startY;
$(“.shanghua”).on(“touchstart”, function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
console.log(‘startX:’ + startX);
console.log(‘startY:’ + startY);
});
$(“.shanghua”).on(“touchend”, function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
var moveEndX = e.originalEvent.changedTouches[0].pageX;
var moveEndY = e.originalEvent.changedTouches[0].pageY;
console.log(‘moveEndX:’ + moveEndX);
console.log(‘moveEndY:’ + moveEndY);
var X = moveEndX – startX;
var Y = moveEndY – startY;
//下滑
if (Y > 0) {
alert(‘下滑’);
}
//上滑
else if (Y < 0) { alert('上滑'); } });

jquery tween.js优化版 写过渡动画

jquery tween.js优化版 写过渡动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>
        Document
    </title>
    <style type="text/css">
    #div {
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
    <script type="text/javascript">
    var Tween = {
        linear: function(t, b, c, d) {
            return c * t / d + b;
        },
        easeIn: function(t, b, c, d) {
            return c * (t /= d) * t + b;
        },
        easeOut: function(t, b, c, d) {
            return -c * (t /= d) * (t - 2) + b;
        },
        easeBoth: function(t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t + b;
            }
            return -c / 2 * ((--t) * (t - 2) - 1) + b;
        },
        easeInStrong: function(t, b, c, d) {
            return c * (t /= d) * t * t * t + b;
        },
        easeOutStrong: function(t, b, c, d) {
            return -c * ((t = t / d - 1) * t * t * t - 1) + b;
        },
        easeBothStrong: function(t, b, c, d) {
            if ((t /= d / 2) < 1) {
                return c / 2 * t * t * t * t + b;
            }
            return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
        },
        elasticIn: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * 0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        },
        elasticOut: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d) == 1) {
                return b + c;
            }
            if (!p) {
                p = d * 0.3;
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        },
        elasticBoth: function(t, b, c, d, a, p) {
            if (t === 0) {
                return b;
            }
            if ((t /= d / 2) == 2) {
                return b + c;
            }
            if (!p) {
                p = d * (0.3 * 1.5);
            }
            if (!a || a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            } else {
                var s = p / (2 * Math.PI) * Math.asin(c / a);
            }
            if (t < 1) {
                return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                    Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            }
            return a * Math.pow(2, -10 * (t -= 1)) *
                Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
        },
        backIn: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            return c * (t /= d) * t * ((s + 1) * t - s) + b;
        },
        backOut: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 2.70158; //回缩的距离  
            }
            return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
        },
        backBoth: function(t, b, c, d, s) {
            if (typeof s == 'undefined') {
                s = 1.70158;
            }
            if ((t /= d / 2) < 1) {
                return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
            }
            return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
        },
        bounceIn: function(t, b, c, d) {
            return c - Tween['bounceOut'](d - t, 0, c, d) + b;
        },
        bounceOut: function(t, b, c, d) {
            if ((t /= d) < (1 / 2.75)) {
                return c * (7.5625 * t * t) + b;
            } else if (t < (2 / 2.75)) {
                return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
            } else if (t < (2.5 / 2.75)) {
                return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
            }
            return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
        },
        bounceBoth: function(t, b, c, d) {
            if (t < d / 2) {
                return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
            }
            return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
        }
    };

    function cssTransform(el, attr, val) {
        if (!el.transform) {
            el.transform = {}
        }
        if (typeof val == "undefined") {
            if (typeof el.transform[attr] == "undefined") {
                switch (attr) {
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                        el.transform[attr] = 100;
                        break;
                    default:
                        el.transform[attr] = 0;
                }
            }
            return el.transform[attr];
        } else {
            var transformVal = "";
            el.transform[attr] = Number(val);
            for (var s in el.transform) {
                switch (s) {
                    case "rotate":
                    case "rotateX":
                    case "rotateY":
                    case "rotateZ":
                    case "skewX":
                    case "skewY":
                        transformVal += " " + s + "(" + el.transform[s] + "deg)";
                        break;
                    case "translateX":
                    case "translateY":
                    case "translateZ":
                        transformVal += " " + s + "(" + el.transform[s] + "px)";
                        break;
                    case "scale":
                    case "scaleX":
                    case "scaleY":
                        transformVal += " " + s + "(" + el.transform[s] / 100 + ")";
                        break;
                }
            }
            el.style.WebkitTransform = el.style.transform = transformVal;
        }
    }

    function css(element, attr, val) {
        if (attr == "rotate" || attr == "rotateX" ||
            attr == "rotateY" || attr == "rotateZ" ||
            attr == "scale" || attr == "scaleX" ||
            attr == "scaleY" || attr == "skewX" ||
            attr == "skewY" || attr == "translateX" ||
            attr == "translateY" || attr == "translateZ") {
            return cssTransform(element, attr, val);
        }
        if (arguments.length == 2) { //只要两个参数的时候是获取属性  
            var val = getComputedStyle(element)[attr];
            if (attr == 'opacity') {
                val = Math.round(val * 100); //透明的*100 减少小数误差  
            }
            return parseFloat(val);
        }
        if (attr == "opacity") {
            element.style.opacity = val / 100;
        } else {
            element.style[attr] = val + "px";
        }
    }

    function MTween(init) { //对tween进行再次封装  
        var t = 0; //当前计时  
        var b = {}; //当前值  
        var c = {}; //目标值和当前值得差  
        var d = init.time / 20; //终止时间  
        for (var s in init.target) {
            b[s] = css(init.el, s);
            c[s] = init.target[s] - b[s];
        }
        clearInterval(init.el.timer);
        init.el.timer = setInterval(
            function() {
                t++;
                if (t > d) {
                    clearInterval(init.el.timer);
                    init.callBack && init.callBack.call(init.el);
                } else {
                    init.callIn && init.callIn.call(init.el);
                    for (var s in b) {
                        var val = (Tween[init.type](t, b[s], c[s], d)).toFixed(2);
                        css(init.el, s, val);
                    }
                }
            },
            20
        );
    }
    </script>
    <script type="text/javascript">
    window.onload = function() {
        var div = document.querySelector('#div');

        MTween({
            el: div,
            target: {
                width: 400,
                height: 300,
                opacity: 50,
                rotate: 50,
            },
            time: 1000,
            type: "linear",
            callBack: function() {
                console.log("动画执行完了");
             /*   MTween({
                    el: div,
                    target: {
                        width: 200,
                        height: 100,
                        opacity: 20,
                        rotate: 10,
                    },
                    time: 1000,
                    type: "linear",
                    callBack: function() {
                        console.log("动画执行完了");
                    },
                    callIn: function() {
                        console.log("动画执行中");
                    }
                });*/
            },
            callIn: function() {
                console.log("动画执行中");
            }
        });

        /*  
            必写参数:  
                el 元素   
                target {} 目标点  
                time: 动画持续时间 (ms)     
                type: 动画类型 "string"  
            可选参数:  
                callBack: fn 回调函数(动画执行完之后,执行的函数)  
                callIn: fn  并发函数 (动画执行完中,执行的函数)  
        */
    };
    </script>
</head>

<body>
    <div id="div">
    </div>
</body>

</html>

如果过渡动画不能满足 那就用原版
http://down.htmleaf.com/1501/201501271734.zip
其实原版就是数值属性的变化 然后再update定时器中更新

jquery mobiscroll移动端日期选择控件(无乱码)

jquery mobiscroll移动端日期选择控件(无乱码)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll日期时间中文精简实例 ( SnoopyChen修改增加中文支持 ceo@vmeitime.com )</title>

    <script src="dev/jquery-1.9.1.js"></script>

    <script src="dev/js/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>

	<link href="dev/css/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="dev/css/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
	<script src="dev/js/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>

	<!-- S 可根据自己喜好引入样式风格文件 -->
	<script src="dev/js/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
	<!-- E 可根据自己喜好引入样式风格文件 -->

    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
            background: #ddd;
        }
        input, select {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 1px solid #aaa;
            box-sizing: border-box;
            border-radius: 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-border-radius: 5px;
        }
        .header {
            border: 1px solid #333;
            background: #111;
            color: white;
            font-weight: bold;
            text-shadow: 0 -1px 1px black;
            background-image: linear-gradient(#3C3C3C,#111);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
            background-image: -moz-linear-gradient(#3C3C3C,#111);
        }
        .header h1 {
            text-align: center;
            font-size: 16px;
            margin: .6em 0;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .content {
            padding: 15px;
            background: #fff;
        }
       
    </style>

    <script type="text/javascript">
        $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				lang:'zh',
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};

			$("#appDate").val('').scroller('destroy').scroller($.extend(opt['date'], opt['default']));
		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
		    $("#appTime").mobiscroll(optTime).time(optTime);
			
			//下面注释部分是上面的参数可以替换改变它的样式
			//希望一起研究插件的朋友加我个人QQ也可以,本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。
			// 直接写参数方法
			//$("#scroller").mobiscroll(opt).date(); 
			// Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
			//具体参数定义如下
		    //{
		    //preset: 'date', //日期类型--datatime --time,
		    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
										//【wp light】【wp】
		    //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
		    //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】
		    //dateFormat: 'yyyy-mm-dd', // 日期格式
		    //setText: '确定', //确认按钮名称
		    //cancelText: '清空',//取消按钮名籍我
		    //dateOrder: 'yymmdd', //面板中日期排列格
		    //dayText: '日', 
		    //monthText: '月',
		    //yearText: '年', //面板中年月日文字
		    //startYear: (new Date()).getFullYear(), //开始年份
		    //endYear: (new Date()).getFullYear() + 9, //结束年份
		    //showNow: true,
		    //nowText: "明天",  //
		    //showOnFocus: false,
		    //height: 45,
		    //width: 90,
		    //rows: 3}

        });
    </script>
</head>

<body>
    <div class="header">
        <h1>Mobiscroll精简实例</h1>
    </div>

    <div class="content">

		<div class="demos">
			<label for="appDate">日期</label>
			<input type="text" name="appDate" id="appDate" />
		</div>
		<div class="demos">
			<label for="appDateTime">日期时间</label>
			<input type="text" name="appDateTime" id="appDateTime" />
		</div>
		<div class="demos">
			<label for="appTime">时间</label>
			<input type="text" name="appTime" id="appTime" />
		</div>
	</div>

</body>
</html>

jquery 数字滚动方法

jquery 数字滚动方法
用的是countUp.js这个插件

target = 目标元素的 ID;
startVal = 开始值;
endVal = 结束值;
decimals = 小数位数,默认值是0;
duration = 动画延迟秒数,默认值是2;

1先初始化

   var options = {  
          useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
    };
    var demo = new CountUp('few', 0, 0, 0, 0.5, options);
    if (!demo.error) {  
        demo.start();
    } else {  
        console.error(demo.error);
    }

2更新

  demo.update(6000);

详细参数看http://inorganik.github.io/countUp.js/

jquery JSMpeg.js 播放视频解决不用全屏也能播放

jquery JSMpeg.js 播放视频解决不用全屏也能播放

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>
	
</head>
<body>
	<div class="jsmpeg" data-url="/moban/ceshi.ts"></div>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
</body>
</html>

具体使用说明 https://github.com/phoboslab/jsmpeg