月份: 2016-11

php 中奖概率算法

<?php
/**
 *php 中奖概率算法
 *
 */
function get_zj( $jp ,$glname = 'gl'){
	$sum = 0;
	foreach($jp as $k =>$v ){
		$sum += $v[$glname];
	}

	$R = rand(1,$sum);//获取随机数

	foreach( $jp as $k => $v){
		if( $R <= $v[$glname] ){
			return $v;
		}
		$R = $R - $v[$glname] ;
	}

}


//使用方法
//模拟一个从数据库中读取的 中奖配置   gl 为 中奖的概率 
//例如array( 'gl' => 10 , 'title' => '一等奖');的中奖概率  =  10 / (10+20+30+40)
$jp = array();
$jp[] = array( 'gl' => 10 , 'title' => '一等奖');
$jp[] = array( 'gl' => 20 , 'title' => '二等奖');
$jp[] = array( 'gl' => 30 , 'title' => '三等奖');
$jp[] = array( 'gl' => 40 , 'title' => '未中奖');


//调用 中奖概率函数  
//返回中奖 信息数组 例如:array( 'gl' => 10 , 'title' => '一等奖');
$zj = get_zj( $jp );

//输出数组
var_dump($zj);

php 路径中的”\”和”/”的区别

php 路径中的”\”和”/”的区别

php中路径的斜杠有的是”/”,有的是”\”
当用 echo $_SERVER[‘PHP_SELF’]; 时返回:/test/01.php
当用 echo __FILE__; 时返回:d:\wamp\www\test\01.php
很多同学这这里都会困惑 都是表示路径。
两种斜杠有什么区别呢?运用的时候需要注意什么?

这里给大家详细解释一下。

首先,先清除路径分类两类,
    第一类,是网络地址URL,指的是通过网络如何访问。
    第二类,是物理地址path,也称磁盘地址,是文件系统的地址,是指文件保存在磁盘的那个位置。

在网络地址URl中,目录中的间隔符是正斜线(/)。

在物理地址(磁盘地址)中,受到不同的操作系统影响。
在UNIX环境下,目录中的间隔符是正斜线(/)。
如果你使用的是WINDOWS平台,可以使用正斜线(/)或者反斜线(\)。

如果使用反斜线,就必须使用转义字符(escape,标注为一个特殊字符),要转义一个字符,只需简单地在其前面添加一个反斜线(\)。

如下代码所示:

$fp=fopen(” c:\\data\\info.txt” , ” r” );

建议使用正斜线(/),因为这意味着代码不需要任何修改就可以在Windows和UNIX机器上运行。而反斜线(\)意味着代码只能在Windows机器上运行。

如把$fp更改成$fp=fopen(” c:/data/info.txt” ,” r” );

这样这行代码就都可以在Windows和UNIX机器上运行了。

Kindeditor 远程图片本地化 PHP

首先KindEditor这个编辑器带有远程图片上传功能
 但是因为远程图片肯定会有失效的一天
所以我想能不能在提交的同时将KindEditor编辑框内的所有远程图片本地化在调用 而不是调用远程图片
设提交数据获取到 $htmlData = $_POST[“content1”];
则有

$htmlData = $_POST["content1"];
preg_match_all("/<.+?>/s", strip_tags($htmlData, "<img>"), $r); //获取全部 img 标记作为替换本地文件时的依据
foreach($r[0] as $i=>$f) {
  preg_match("/src="([^"]+)"/i", $f, $u); //获取远程图片的url
  $s = file_get_contents($u[0]); //读取远程图片
  $fn = "按你自己规则产生的文件名";
  file_put_contents($fn, $s); //写入本地
  $t[$i] = "配好的url的文件名";
}
$htmlData = str_replace($r[0], $t, $htmlData); //替换回文档

Fancybox丰富的弹出层效果

Fancybox的特点如下:

    可以支持图片、html文本、flash动画、iframe以及ajax的支持
    可以自定义播放器的CSS样式
    可以以组的形式进行播放
    如果将鼠标滚动插件(mouse wheel plugin)包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
    Fancybox播放器支持投影,更有立体的感觉

演示地址:

http://demo.lrxin.com/2015/09/Fancybox/Fancybox1.3.1/

http://demo.lrxin.com/2015/09/Fancybox/fancybox%20v1.3.4/

http://demo.lrxin.com/2015/09/Fancybox/fancyBox2.1.5/

下载地址:

Fancybox1.3.1.rar    http://pan.baidu.com/s/1bnnZLOb
fancybox v1.3.4.rar  http://pan.baidu.com/s/1qJEkm
fancyBox2.1.5.rar    http://pan.baidu.com/s/1o6qvkAA

fancybox具有以下特性:

可以加载DIV、图片、图片集、Ajax数据、SWF影片,iframe页面等。
支持键盘方向键和ESC键。
丰富的参数设置和方法调用。
可扩展性强。

如何使用?

本文以DEMO中的Demo2为例,讲解fancybox的使用。

1、添加javascript引用和css文件的引用

<link rel="stylesheet" type="text/css" href="fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fancybox.js"></script>

2、HTML

<h4>图片集,支持键盘方向键</h4>
<p>
   <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a>
   <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a>
   <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a>
</p>

3、调用fancybox

$(function(){
    $("a[rel=group]").fancybox({
        'titlePosition' : 'over',
        'cyclic'        : true,
        'titleFormat'    : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">' + (currentIndex + 1) +
 ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
                }
    });
});

注意,fancybox的参数设置格式为:’key’:’value’。titlePosition:设置图片标题的显示位置为图片上。cyclic:设置图片浏览方式为循环浏览。titleFormat:设置图片标题的格式,可以显示图片总数和当前图片顺序。

fancybox插件主要参数和方法一览表

参数/方法 描述 默认值
基本
width 设置弹出串口的宽度,当内容为swf,iframe或者单行文字时,
应该将’autoDimensions’ 设置为false
560
height 设置弹出串口的高度,当内容为swf,iframe或者单行文字时,
应该将’autoDimensions’ 设置为false
340
cyclic 是否循环显示,当内容为图片集时。 false
centerOnScroll 弹出窗口始终浏览器居中。 false
modal 是否使用模式窗口。当设置为true时,应该同时将:’hideOnOverlayClick’,’hideOnContentClick’,
‘enableEscapeButton’,
‘showCloseButton’ 设置为false,并将’overlayShow’ 设置为true
false
titlePosition 标题的位置,可以设置为’outside’, ‘inside’ or ‘over’ ‘outside’
transitionIn, transitionOut 窗口显示的方式,可以设置为’elastic’, ‘fade’ or ‘none’ ‘fade’
send 方法,向服务端发送裁剪图片的数据,以便服务端接收参数进行处理,
e.g: cropzoom.send(‘process.php’,’POST’,{id=1},function(r){ alert(r); });
 
方法
$.fancybox.showActivity 显示加载动画  
$.fancybox.hideActivity 隐藏加载动画  
$.fancybox.close 关闭窗口  
$.fancybox.resize 自动调整窗口的高度使之与内容相适应  
Centered 是否将选区居中,即显示在容器的中心。  

更多参数和方法请参照http://fancybox.net/api

中文api地址: http://doc.bropaul.com/fancyBox/

div+css实现鼠标经过时图片有光泽效果

div+css实现鼠标经过时图片有光泽效果

——————– demo 开始 —————————

zappy

——————– demo 结束 —————————

<!DOCTYPE html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>div+css实现鼠标经过时图片有光泽效果</title>
<style>
body{ background:#f2f2f2;}
.thumb {
    width: 311px;
    height: 185px;
    position: relative;
	overflow:hidden;
	border:4px solid #009cff;
}
.thumb img {
	width:311px;
	height:185px
}
.thumb em {
    position: absolute;
    left: -250px;
    top: 0;
    width: 313px;
    height: 185px;
    background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    background-image: -moz-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    background-image: -webkit-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    background-image: -o-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    background-image: -ms-linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,0));
    transform: skewx(-25deg);
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    -moz-transition: 0s;
    -o-transition: 0s;
    -webkit-transition: 0s;
    transition: 0s;
    cursor: pointer;
}
.thumb:hover em {
	left:245px;
	transition:.7s;
	-moz-transition:.7s;
	-o-transition:.7s;
	-webkit-transition:.7s
}
.thumb .angle {
	position:absolute;
	top:169px;
	left:10px
}
.thumb .angle:after {
    content: " ";
    position: absolute;
    border: 8px dashed transparent;
    border-bottom: 8px solid #fefefe;
    width: 0;
    height: 0;
    font-size: 0;
}
</style>
</head>
<body>
<!--重点是 em 标签的处理-->
<div class="thumb">
	<a title="吕神的自我修养" href="http://www.lrxin.com/" target="_blank">
        <img width="311" height="185" src="http://www.lrxin.com/wp-content/uploads/2016/11/custom-scrollbar-200x150.png" class="attachment-thumbnail wp-post-image" alt="zappy">
        <em></em>
    </a>
	<span class="angle"></span>
</div>
</body>
</html>

解决微信及360浏览器无法读取本地图片问题【js base64 图片压缩】

解决微信及360浏览器无法读取本地图片问题【js base64 图片压缩】

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<title>图片压缩</title>
<style>
body { margin:0; padding:0; }
html { font-size:62.5%; }
 
.imgzip { padding:1em; }
.imgzip .itm { padding-bottom:1em; word-break:break-all; font-size:1.2rem; line-height:1.5em; }
.imgzip .itm .tit { margin-bottom:.5em; background-color:#e71446; color:#FFF; padding:.5rem 1rem; border-radius:3px; }
.imgzip .itm .cnt { padding:1rem; }
.imgzip .itm .cnt img { display:block; max-width:100%; }
.imgzip textarea { width:100%; height:20em; }
</style>
</head>
 
<body>
<input type="file" accept="image/*;capture=camera" class="input">
<div class="imgzip"></div>
<script>
document.addEventListener('DOMContentLoaded', init, false);
 
function init() {
  var u = new UploadPic();
  u.init({
    input: document.querySelector('.input'),
    callback: function (base64) {
      var html = '';
             
      html = '<div class="itm"><div class="tit">图片名称:</div><div class="cnt">' + this.fileName + '</div></div>'
           + '<div class="itm"><div class="tit">原始大小:</div><div class="cnt">' + (this.fileSize / 1024).toFixed(2) + 'KB<\/div><\/div>'
           + '<div class="itm"><div class="tit">编码大小:</div><div class="cnt">' + (base64.length / 1024).toFixed(2) + 'KB<\/div><\/div>'
           + '<div class="itm"><div class="tit">原始尺寸:</div><div class="cnt">' + this.tw + 'px * ' + this.th + 'px<\/div><\/div>'
           + '<div class="itm"><div class="tit">编码尺寸:</div><div class="cnt">' + this.sw + 'px * ' + this.sh + 'px<\/div><\/div>'
           + '<div class="itm"><div class="tit">图片预览:</div><div class="cnt"><img src="' + base64 + '"><\/div><\/div>'
           + '<div class="itm"><div class="tit">Base64编码:</div><div class="cnt"><textarea>' + base64 + '<\/textarea><\/div><\/div>';
 
      document.querySelector('.imgzip').innerHTML = html;
    },
    loading: function () {
      document.querySelector('.imgzip').innerHTML = '读取中,请稍候...';
    }
  });
}
 
function UploadPic() {
  this.sw = 0;
  this.sh = 0;
  this.tw = 0;
  this.th = 0;
  this.scale = 0;
  this.maxWidth = 0;
  this.maxHeight = 0;
  this.maxSize = 0;
  this.fileSize = 0;
  this.fileDate = null;
  this.fileType = '';
  this.fileName = '';
  this.input = null;
  this.canvas = null;
  this.mime = {};
  this.type = '';
  this.callback = function () {};
  this.loading = function () {};
}
 
UploadPic.prototype.init = function (options) {
  this.maxWidth = options.maxWidth || 800;
  this.maxHeight = options.maxHeight || 600;
  this.maxSize = options.maxSize || 3 * 1024 * 1024;
  this.input = options.input;
  this.mime = {'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg', 'bmp': 'image/bmp'};
  this.callback = options.callback || function () {};
  this.loading = options.loading || function () {};
     
  this._addEvent();
};
 
/**
 * @description 绑定事件
 * @param {Object} elm 元素
 * @param {Function} fn 绑定函数
 */
UploadPic.prototype._addEvent = function () {
  var _this = this;
     
  function tmpSelectFile(ev) {
    _this._handelSelectFile(ev);
  }
     
  this.input.addEventListener('change', tmpSelectFile, false);
};
 
/**
 * @description 绑定事件
 * @param {Object} elm 元素
 * @param {Function} fn 绑定函数
 */
UploadPic.prototype._handelSelectFile = function (ev) {
  var file = ev.target.files[0];
   
  this.type = file.type
   
  // 如果没有文件类型,则通过后缀名判断(解决微信及360浏览器无法获取图片类型问题)
  if (!this.type) {
    this.type = this.mime[file.name.match(/\.([^\.]+)$/i)[1]];
  }
   
  if (!/image.(png|jpg|jpeg|bmp)/.test(this.type)) {
    alert('选择的文件类型不是图片');
    return;
  }
     
  if (file.size > this.maxSize) {
    alert('选择文件大于' + this.maxSize / 1024 / 1024 + 'M,请重新选择');
    return;
  }
 
  this.fileName = file.name;
  this.fileSize = file.size;
  this.fileType = this.type;
  this.fileDate = file.lastModifiedDate;
     
  this._readImage(file);
};
 
/**
 * @description 读取图片文件
 * @param {Object} image 图片文件
 */
UploadPic.prototype._readImage = function (file) {
  var _this = this;
     
  function tmpCreateImage(uri) {
    _this._createImage(uri);
  }
   
  this.loading();
     
  this._getURI(file, tmpCreateImage);
};
 
/**
 * @description 通过文件获得URI
 * @param {Object} file 文件
 * @param {Function} callback 回调函数,返回文件对应URI
 * return {Bool} 返回false
 */
UploadPic.prototype._getURI = function (file, callback) {
  var reader = new FileReader();
  var _this = this;
 
  function tmpLoad() {
    // 头不带图片格式,需填写格式
    var re = /^data:base64,/;
    var ret = this.result + '';
         
    if (re.test(ret)) ret = ret.replace(re, 'data:' + _this.mime[_this.fileType] + ';base64,');
         
    callback && callback(ret);
  }
     
  reader.onload = tmpLoad;
     
  reader.readAsDataURL(file);
     
  return false;
};
 
/**
 * @description 创建图片
 * @param {Object} image 图片文件
 */
UploadPic.prototype._createImage = function (uri) {
  var img = new Image();
  var _this = this;
     
  function tmpLoad() {
    _this._drawImage(this);
  }
     
  img.onload = tmpLoad;
     
  img.src = uri;
};
 
/**
 * @description 创建Canvas将图片画至其中,并获得压缩后的文件
 * @param {Object} img 图片文件
 * @param {Number} width 图片最大宽度
 * @param {Number} height 图片最大高度
 * @param {Function} callback 回调函数,参数为图片base64编码
 * return {Object} 返回压缩后的图片
 */
UploadPic.prototype._drawImage = function (img, callback) {
  this.sw = img.width;
  this.sh = img.height;
  this.tw = img.width;
  this.th = img.height;
     
  this.scale = (this.tw / this.th).toFixed(2);
 
  if (this.sw > this.maxWidth) {
    this.sw = this.maxWidth;
    this.sh = Math.round(this.sw / this.scale);
  }
   
  if (this.sh > this.maxHeight) {
    this.sh = this.maxHeight;
    this.sw = Math.round(this.sh * this.scale);
  }
   
  this.canvas = document.createElement('canvas');
  var ctx = this.canvas.getContext('2d');
     
  this.canvas.width = this.sw;
  this.canvas.height = this.sh;
     
  ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, this.sw, this.sh);
     
  this.callback(this.canvas.toDataURL(this.type));
     
  ctx.clearRect(0, 0, this.tw, this.th);
  this.canvas.width = 0;
  this.canvas.height = 0;
  this.canvas = null;
};
</script>
</body>
</html> 

Lightbox图片弹出层插件效果下载

Lightbox图片弹出层插件效果下载

在线演示地址:http://demo.lrxin.com/2015/09/jquery-lightbox/

下载地址:jquery-lightbox.zip   http://pan.baidu.com/s/1jGldIce

jQuery Lazy Load 图片延迟加载 插件 1.7.2

jQuery Lazy Load 图片延迟加载 插件 1.7.2

基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度。

版本:
·jQuery v1.4.4+
·jQuery Lazy Load v1.7.2

注意事项:
·需要真正实现图片延迟加载,必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同,则只是一个特效而已,并不达到延迟加载的功能。

查看demo:http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/

官方地址:http://www.appelsiini.net/projects/lazyload

下载地址:https://github.com/tuupola/jquery_lazyload/

下载地址2: http://pan.baidu.com/s/1o6j9DQ6

demo下载:http://pan.baidu.com/s/1i3ixY6L

js文件下载地址:http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/jquery.lazyload.min.js

示例代码:

<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Lazy Load 图片延迟加载1.7.2</title>
<script src="jquery.js"></script> 
<script src="jquery.lazyload.min.js"></script> 
<script>
$(function(){
	$('.lazy img').lazyload({
		effect: 'fadeIn' 
	});
});
</script>
</head>
<body>
<!-- 
将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 
添加 class="lazy" 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词,修改的同时记得修改调用时的 jQuery 选择器 
添加 width 和 height 属性有助于在图片未加载时占满所需要的空间 
--> 
<div class="lazy" style="width:800px;">
        <img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
        <img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
        <img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1">
        <img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
        <img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
        <img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop">
</div>
</body>
</html>

参数说明:

<script>
$(function(){
	$('img.lazy').lazyload({
	    effect:'fadeIn' , //加载使用的动画效果,如 show, fadeIn, slideDown 等 jQuery 自带的效果,或者自定义动画。Fadein 淡入动画效果  |  show 直接显示 
	    effectspeed : 800 , //动画时间。作为 effect 的参数使用:effect(effectspeed) 动画的时间为400毫秒. 
	    event:'scroll'  ,  //绑定事件 scroll  click mouseover
	    threshold       : 0, //灵敏度。默认为 0 表示当图片出现在显示区域中的立即加载显示;设为整数表示图片距离 x 像素进入显示区域时进行加载;设为负数表示图片进入显示区域 x 像素时进行加载。 距离 多少像素时, 开始加载  
            failure_limit   : 0, // 容差范围。页面滚动时,Lazy Load 会遍历延迟加载的图片,检查是否在显示区域内,默认找到第 1 张不可见的图片时,就终止遍历。因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同,但是也可能会出现例外,通过该值来扩大容差范围。 当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并没有继续往下遍历.  | failure_limit : 10 这样 Lazy Load 会查找到第10个未显示的<img>标签处.当在图片多且布局复杂的页面时, failure_limit 的作用就很大了. 
            data_attribute  : "original", //
            skip_invisible  : true,    //skip_invisible 加载不可见的图片. Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false . 
	    data_attribute :	'original' , //真实图片地址的 data 属性后缀  
	    container: $('#container') , //父容器。延迟加载父容器中的图片. 默认 window 当要延迟加载的图片全摆在一个容器中.只需把 container 属性指向摆放 img 的容器的对象.
            appear          : null, // 图片加载时的事件 (Function),有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload 的参数)
            load            : null  // 图片加载后的事件 (Function),有 2 个参数,同 appear 
	});
});
</script>

关于 apper 和 load 两个函数的 参数 可以参考下面代码调试

<script>
$(function(){
  $('img').lazyload({
    effect:'fadeIn'
    /*
    ,
    appear:function(elements_left, settings) {
      console.log('appear');
      console.log(elements_left);
      //console.log(this, elements_left, settings);
    },
    load:function(elements_left, settings) {
      console.log('load');
      console.log(elements_left);
      //console.log(this, elements_left, settings);
    }
    */
  });
});
</script>

Load Images Using Timeout 定时加载图像
当前显示区域内的图像会进行加载,显示区域以外的图像会在延迟 5 秒之后进行加载。

<script src="/js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$(function(){
  $('img').lazyload({
    effect:'fadeIn',
    event:'sporty'
  });
});

$(window).bind('load', function(){
  var timeout = setTimeout(function(){
    $('img').trigger('sporty')
  }, 5000);
});
</script>

Noscript Fallback 不支持 JavaScript 时的降级示例
演示在不支持 JavaScript 的浏览器访问时,是如何运作的。参照下面的代码:

<style>
.lazy {
  display: none;
}
</style>
<img class="lazy" src="grey.gif" data-original="example.jpg" width="765" height="574">
<noscript><img src="example.jpg" width="765" height="574"></noscript>

$('img.lazy').show().lazyload({
  effect: 'fadeIn'
});

.Page With Gazillion Images 大量图片的示例
当页面中存在上百张,甚至数百张图片时,建议使用 scrollstop 事件。

<script src="jquery.scrollstop.js"></script>
 <img src="grey.gif" data-original="example.jpg">
$('img').lazyload({
  event: 'scrollstop'
});

自定义 滚动停止事件 scrollstop
jquery.scrollstop.js文件下载地址 : http://demo.lrxin.com/2015/09/jquery.lazyload_v1.7.2_demo/jquery.scrollstop.js


DD_belatedPNG完美解决ie6下png图片半透明问题,支持背景平铺,定位等属性

解决png在ie6下半透明的方法有很多,这里之所以推荐 DD_belatedPNG 是因为 DD_belatedPNG 可以完美的支持 

背景平铺 :background-repeat:(no-repeat ,repeat-x,repeat-y ,repeat

背景定位:background-position:60px 80px;

背景固定:background-attachment:fixed;

等属性。

还支持:鼠标经过效果 a:hover{}

官方网站:http://www.dillerdesign.com/experiment/DD_roundies/

官方引用地址:

0.0.8a.js (官方未压缩版本, ~12Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

0.0.8a-min.js (官方压缩版, ~7Kb) : http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

———————————-

使用方法 :

<!--[if IE 6]> 
<script type="text/javascript" src="DD_belatedPNG.js" ></script> 
<script type="text/javascript"> DD_belatedPNG.fix('.trans,.box , a:hover, .png_bg'); </script> 
<![endif]--> 

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。

<script type="text/javascript">
    DD_belatedPNG.fix('#box, img');
</script>

或者

<script type="text/javascript">
    DD_belatedPNG.fix('.header, background');
</script>

等,这些可以简写成

<script type="text/javascript">
    DD_belatedPNG.fix('#box-one, .header, img, background');
</script>

在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。

<script type="text/javascript">
    DD_belatedPNG.fix('*');
</script>

DD_belatedPNG.rar:百度网盘http://pan.baidu.com/s/1dDwKBXv

jquery事件绑定只点击一次

jquery事件绑定只点击一次,想法就是绑定事件,函数内在执行时候 取消绑定事件。

$('#my-selector').bind('click', function() {
       $(this).unbind('click');
       alert('Clicked and unbound!');
});

或者one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。

当使用 one() 方法时,每个元素只能运行一次事件处理器函数。

$("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
});

ajax页面底部 滚动加载效果 实例

html部分:

<ul id="scrollBox">
    //ajax读取的 data.html 使用append 的方式添加到这里        
</ul>
<div id="scrollPages">
    //ajax 状态文字输出到这里 【数据加载中】【数据加载成功】【没有数据了】
</div>

js代码需要jquery支持。

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'ajax.php'; //ajax读取数据地址,ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功!');  $pages.html('数据加载成功!');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        if( loading ){return false ;}
        //条件
        if ( sp > 33 ){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
        }
    });// 滚动 结束 $(window).scroll

    //页面加载完成 清空$scrollBox 内容
    //页面加载完成 执行第一次
    $(window).scroll();
});

php 文件 ajax.php 代码:

<?php
header("Content-type:text/html;charset=utf-8");
//休息1秒钟 ,模拟网速不好,可以看清 ajax状态变化
sleep(1);
//读取GET提交的页码
$p = (int)$_GET['p'] ;
//准备返回的数据
$d = array();
//下一页 地址
$d['next_url'] = 'api/bisai-list.php?p='.($p+1);
//数据 html格式 ,jquery会把他插入到 <ul id="scrollBox"> 中。
$d['html'] = '<li> ajax 读取到的数据,当前页面 '.($p+1).' </li>';
//简单判读 只有10页面内容
if($p > 10){
    $d =  array(); //没有数据了  js 主要判断 $d['next_url'] 的值
}
//返回json数据
die(json_encode($d));
?>

————–我是分割线—————

上边的 js 代码存在一个问题。

//页面加载完成 执行第一次$(window).scroll(); 尽管调用了滚动事件,但无法满足条件: if ( sp > 33 ) 出发ajax加载数据。
后来想想,干脆把 ajax加载数据部分代码封装成函数_ajaxLoad,在需要的时候直接调用。
1.页面第一加载时调用
2.滚动满足条件时调用
修改js代码如下:

//滚动加载 开始
$(function(){
    var loading = false; // 状态锁 默认 false
    var next_url = 'api/bisai-list.php'; //ajax读取数据地址,ajax 每次都修改为 data.next_url 下一页地址
    var $pages = $('#scrollPages'); //绑定 分页容器 分页状态 在此位置输出
    var $scrollBox = $('#scrollBox'); // 绑定内容 ajax 把
    
    var _loading = function(){ console.log('数据加载中...');  $pages.html('数据加载中...');  }
    var _loadok = function(){ console.log('数据加载成功!');  $pages.html('数据加载成功!');  }
    var _nodata = function(){ console.log('没有数据了') ;     $pages.html('没有数据了'); }
    var _ajaxLoad = function(){
            loading = true;
            _loading();
            $.getJSON(next_url,{}, function(data){
                console.log(data);
                next_url = data.next_url;
                if(data.html){
                    $scrollBox.append( data.html );
                    $('.zzbsList .zzbsInfo').txtCur({n:60});
                    loading = false;
                    _loadok();
                }
                //判断是否还有吓一跳
                if( !next_url ){ loading = true ; _nodata() };
                
            });
    }
    
    $(window).scroll(function(){
        var sH =  $(document).height() - $(this).scrollTop() - $(this).height();//页面底部距离
        var sp = $(window).height() - ( $pages.offset().top - $(document).scrollTop() ) ; //分页div 距离win 底部
        console.log(sp);
        if( loading ){return false ;}
        if ( sp > 33 ){
            //滚动满足条件时调用 加载数据
            _ajaxLoad();
        }
    });
    //页面加载完成 执行第一次加载数据
    _ajaxLoad();
});
//滚动加载 结束

jQuery on() 的使用方法

jQuery on()方法是官方推荐的绑定事件的一个方法。


$(selector).on(event,childSelector,data,function,map)
由此扩展开来的几个以前常见的方法有.

bind()

$("p").bind("click",function(){
alert("The paragraph was clicked.");
});

$("p").on("click",function(){
alert("The paragraph was clicked.");
});

delegate()

$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});

$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});

live()

$("#div1").on("click",function(){
$(this).css("background-color","pink");
});

$("#div2").live("click",function(){
$(this).css("background-color","pink");
});

以上三种方法在jQuery1.8之后都不推荐使用,官方在1.9时已经取消使用live()方法了,所以建议都使用on()方法。

tip:如果你需要移除on()所绑定的方法,可以使用off()方法处理。

$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});
tip:如果你的事件只需要一次的操作,可以使用one()这个方法

$(document).ready(function(){
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
});
trigger()绑定

$(selector).trigger(event,eventObj,param1,param2,...)
$(document).ready(function(){
$("input").select(function(){
$("input").after(" Text marked!");
});
$("button").click(function(){
$("input").trigger("select");
});
});
多个事件绑定同一个函数

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});
多个事件绑定不同函数

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});
绑定自定义事件

$(document).ready(function(){
  $("p").on("myOwnEvent", function(event, showName){
    $(this).text(showName + "! What a beautiful name!").show();
  });
  $("button").click(function(){
    $("p").trigger("myOwnEvent",["Anja"]);
  });
});
传递数据到函数

function handlerName(event) 
{
  alert(event.data.msg);
}

$(document).ready(function(){
  $("p").on("click", {msg: "You just clicked me!"}, handlerName)
});
适用于未创建的元素

$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});

jquery字符输入个数限制插件,支持显示剩余字符个数 iptMaxNum

jquery字符输入个数限制插件,支持显示剩余字符个数 iptMaxNum

———————————

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery限制输入字数</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript"> 
/**
 * $.iptMaxNum();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('#Comment_txt').iptMaxNum({max:50 });
 * $('#Comment_txt').iptMaxNum({max:50 , box:"#Comment_txt_num"});
 */
;(function($){   
    $.fn.extend({     
         iptMaxNum: function(options) {   
            //默认参数
            var defaults = {
                 /* 最多多少个字符 */
                 max:60, 
                 /* 显示个数的容器 选择器*/
                 box:'' 
           }        
            var options = $.extend(defaults, options);   
            return this.each(function(){
                var o = options;   
                var $this = $(this);
                var _boxnum =function(){
                    $(o.box).text( o.max -0 - $this.val().length );
                }
                _boxnum();
                $this.on("keyup , change ",function(){
                    var curLength=$this.val().length; 
                    if(curLength >= o.max){
                        var str=$this.val().substring(0, o.max );
                        $this.val(str);
                        alert("超过字数限制,多出的字将被截断!" );
                    }
                    else{
                        
                    }
                    _boxnum();
                })          

 
            });   
        }   
    });   
       
})(jQuery);
</script>
</head>
<body>
您还可以输入<span id="textCount">5</span>个字符<br />
<textarea name="textarea" id="TextArea" cols="45" rows="5" ></textarea>
<script type="text/javascript">
    $(function(){
        $('#TextArea').iptMaxNum({max:50 , box:"#textCount"});
    });

</script>
</body>
</html>


Jquery将Form表单序列化为JSON对象 Serialize Form to JSON

Jquery将Form表单序列化为JSON对象 

$("form").serializeObject(); 

类似

$("form").serialize(); 
$("form").serializeArray();  
$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

来源:https://css-tricks.com/snippets/jquery/serialize-form-to-json/

其他方法:

http://blog.csdn.net/flashdelover/article/details/8185775

http://marsvaadin.iteye.com/blog/1717188

jQuery手机全屏上下滑动滚屏插件touchSwipe

插件touchSwipe可监听单个和多个手指触摸,鼠标按着左键拖动等事件,因此插件可以实现滑动滚屏、缩放等效果。
特点:

1、监听滑动的4个方向:上、下、左、右;

2、监听多个手指收缩还是外张;

3、支持单手指或双手指触摸事件;

4、支持单击事件touchSwipe对象和它的子对象;

5、可定义临界值和最大时间来判断手势的实际滑动;
6、滑动事件有4个触发点:“开始”,“移动”,“结束”和“取消”;

7、结束事件可以在手提释放或是快速达到临界值时触发;

8、允许手指刷和页面滚屏;

9、可禁用户通过输入元素(如:按钮、表单、文本框等)触发事件;

官方网站:
http://labs.rampinteractive.co.uk/touchSwipe
http://labs.rampinteractive.co.uk/touchSwipe/docs

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

中文网站:

http://www.swiper.com.cn/

备用下载:

http://pan.baidu.com/s/1sjrDFXj

$(function() {      
  $("#test").swipe( {
    swipe:function(event, direction, distance, duration, fingerCount, fingerData) {//
      console.log(  event, direction, distance, duration, fingerCount, fingerData   );
                  //事件 , 方向 ,位移(像素),时间(毫秒),手指个数 ,
    },
    threshold:0 ,
    fingers:'all' ,
    excludedElements:"button, input, select, textarea, .noSwipe"
  });
});

PHP解决json_encode中文UNICODE转码问题(汇总)

什么是json_encode中文UNICODE转码问题?
先看下边的小列子

<?php
echo json_encode("中文");
//输出:  "\u4e2d\u6587"

在使用 json_encode() 函数将变量转义成json字符串的时候,由于json_encode()仅支持中文。
json_encode()函数会将中文转成utf-8的UNICODE编码。也就是大家看到的“\uxxxx”代表一个中文汉字的形式。

如何能让PHP更好的支持中文呢?
PHP5.4开始,给 json_encode() 增加了第二个参数 JSON_UNESCAPED_UNICODE 这样就可以很好的支持中文了,中文不会在被转义成 “\uxxxx” 的形式。

<?php
echo json_encode("中文", JSON_UNESCAPED_UNICODE);
//输出: "中文"

JSON_UNESCAPED_UNICODE 常量对应的 JSON_UNESCAPED_UNICODE => 256
以上代码还可以写成

<?php
echo json_encode("中文", 256 );
//输出: "中文"

PHP5.4 为json_encode() 函数增加了 JSON_UNESCAPED_UNICODE 参数,很好的解决了中文显示的问题。他还增加了:
JSON_BIGINT_AS_STRING,
JSON_PRETTY_PRINT,
JSON_UNESCAPED_SLASHES
等选项, 如果有兴趣, 大家可以参看: json_encode

———–华丽的分割线—–PHP老版本兼容问题——–
PHP5.4 增加了 JSON_UNESCAPED_UNICODE 参数 为 变量转json字符串的中文支持提供了更好的支持。
那么老版本的PHP如何更好的支持中文呢?
总体上有2个思路
思路一:
    1.在json_encode() 之前,先把中文用urlencode()函数转url编码( 中文变成%XXX的形式了)。
    2.在json_encode() 之后,把url编码的中文利用urldecode()函数转成中文。
示例代码:

$array = array(
'test'=>urlencode("中文")
);
$array = json_encode($array);
echo urldecode($array);
//输出:{"test":"中文"} 

思路二:  先json_encode()在解决中文UNICODE转码问题。你需要一个UNICODE转码转中文函数:

function decodeUnicode($str)
{
    return preg_replace_callback('/\\\\u([0-9a-f]{4})/i',
        create_function(
            '$matches',
            'return mb_convert_encoding(pack("H*", $matches[1]), "UTF-8", "UCS-2BE");'
        ),
        $str);
}

有了这个函数后,你就可以这样做了 :

$arr = array('name1':"中文",'name2':'abc12');
$jsonstr = decodeUnicode(json_encode($arr));//先转json ,再处理中文UNICODE转码问题

当然,你可以将上边两步封装成一步,直接封装一个 json_encode_ex();函数。

/**
* 对变量进行 JSON 编码
* @param mixed value 待编码的 value ,除了resource 类型之外,可以为任何数据类型,该函数只能接受 UTF-8 编码的数据
* @return string 返回 value 值的 JSON 形式
*/
function json_encode_ex($value) {
    if (version_compare(PHP_VERSION, '5.4.0', '<')) {
        $str = json_encode($value);
        $str = preg_replace_callback("#\\\u([0-9a-f]{4})#i",
        function($matchs) {
            return iconv('UCS-2BE', 'UTF-8', pack('H4', $matchs[1]));
        },
        $str);
        return $str;
    } else {
        return json_encode($value, JSON_UNESCAPED_UNICODE);
    }
}

PHP官方简体中文手册 CHM 2016最新版本

PHP官方简体中文手册 CHM 2016最新版本,改手册编译于2016年5月6日 官方终于提供了中文版手册,是国内学习PHP的新手老手的福音!这个最新的中文手册希望能给您带来帮助。

下载地址:http://pan.baidu.com/s/1dE0L7gt
备用地址:http://pan.baidu.com/s/1gf7dvov

js时间格式化函数,js秒数转日期时间格式字符串

js时间格式化函数,js秒数转日期时间格式字符串

//调用方法
//日期字符串 -> 日期字符串 (重新格式化日期时间)
alert(new Date(Date.parse(‘2016-12-12 12:12:12’)).Format(“yyyy-MM-dd hh:mm:ss”));
//时间戳(秒数) -> 日期字符串 (秒数转格式化日期时间 记得 * 1000)
alert(new Date(1479132772*1000).Format(“yyyy-MM-dd hh:mm:ss”));
//当前时间 -> 日期字符串 
alert(new Date().format(“yyyy-MM-dd hh:mm:ss”));

Date.prototype.Format = function(fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1,
        //月份
        "d+": this.getDate(),
        //日
        "h+": this.getHours(),
        //小时
        "m+": this.getMinutes(),
        //分
        "s+": this.getSeconds(),
        //秒
        "q+": Math.floor((this.getMonth() + 3) / 3),
        //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
};

//调用方法
//日期字符串 -> 日期字符串 (重新格式化日期时间)
alert(new Date(Date.parse('2016-12-12 12:12:12')).Format("yyyy-MM-dd hh:mm:ss"));
//时间戳(秒数) -> 日期字符串 (秒数转格式化日期时间 记得 * 1000)
alert(new Date(1479132772 * 1000).Format("yyyy-MM-dd hh:mm:ss"));
//当前时间 -> 日期字符串 
alert(new Date().format("yyyy-MM-dd hh:mm:ss"));

jQuery滚动条插件:jquery-custom-content-scroller

为大家推荐一款jQuery滚动条插件:jquery-custom-content-scroller。
由于不同浏览器对滚动条的设置方法不一致,为了一致的用户体验,有时我们就不得不放弃使用部分浏览器提供的CSS接口来定制滚动条,转而寻求更佳的代替方案。使用插件的好处是显而易见的,但是坏处也多得去了。自己在项目中慢慢体会吧。
想了解这款jQuery写的浏览器滚动条插件jQuery-custom-content-scroller的具体使用方法,
请移步到:http://manos.malihu.gr/jquery-custom-content-scroller/

简单介绍一下jQuery滚动条插件的使用:

第一步:在内容的顶部引入滚动条相应的样式表文件和jquery的库文件,jquery插件jquery.mcustomscrollbar文件。代码如下:

<link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" >
<script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

第二步:在要显示滚动条的元素(元素内容中必须要有溢出的块,否则就不会出现滚动条)上面,加入class=”mScrollbar”,然后再加入以下代码:

<script>
(function($){
$(window).load(function(){
$(".mScrollbar").mCustomScrollbar();
});
})(jQuery);
</script>

关于此插件的详细介绍,你可以访问官网,里面讲的相当详细,我就不再此多赘述。

百度网盘备份:
http://pan.baidu.com/s/1bp43gv1

纯CSS改变webkit内核浏览器的滚动条样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS改变webkit内核浏览器的滚动条样式</title>
	<style>
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar/*整体部分*/
{
width: 5px;
height:5px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0px;
background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.4);
}
	</style>


</head>
<body>
<div style=" height:2400px; background:#f60"></div>
</body>
</html>