first commit
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,253 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{//BEGIN
|
||||
|
||||
Z.Month = Z.Class.newInstance();
|
||||
Z.Month.v = "1.4.0";
|
||||
Z.Month.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
top: 0, //和指定的对象相差上位置
|
||||
left: 0, //和指定的对象相差左位置
|
||||
|
||||
selectYear: null, //选中的年,要求数字
|
||||
selectMonth: null, //选中的月,要求数字
|
||||
|
||||
element: null, //当前对象
|
||||
elemDate: null, //选中的时间
|
||||
currDate: new Date() //保存当前时间
|
||||
},
|
||||
|
||||
init: function()
|
||||
{
|
||||
this.id = Z.random(10);//日历ID,为保证唯一在init随机生成
|
||||
|
||||
this.html ='<div id="Z_Month_'+this.id+'" style="position:absolute;display:none;z-index:1000;">';
|
||||
this.html+='<table class="z-table z-calendar">';
|
||||
|
||||
//选择年月
|
||||
this.html+='<tr>';
|
||||
this.html+=' <td>';
|
||||
this.html+=' <table class="z-table z-top">';
|
||||
this.html+=' <tr>';
|
||||
this.html+=' <td width="30" align="center" class="z-pointer" id="Z_Month_prev_'+this.id+'"><div class="z-arrow z-left"></div></td>';
|
||||
this.html+=' <td width="*" align="center" class="z-year-month" id="Z_Month_year_'+this.id+'"><span class="z-default"></span></td>';
|
||||
this.html+=' <td width="30" align="center" class="z-pointer" id="Z_Month_next_'+this.id+'"><div class="z-arrow z-right"></td>';
|
||||
this.html+=' </tr>';
|
||||
this.html+=' </table>';
|
||||
this.html+=' </td>';
|
||||
this.html+='</tr>';
|
||||
|
||||
//当前星期
|
||||
this.html+='<tr>';
|
||||
this.html+=' <td>';
|
||||
this.html+=' <table class="z-table z-day z-px14 z-pd10">';
|
||||
this.html+=' <tr>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_1">一月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_2">二月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_3">三月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_4">四月</td>';
|
||||
this.html+=' </tr>';
|
||||
this.html+=' <tr>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_5">五月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_6">六月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_7">七月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_8">八月</td>';
|
||||
this.html+=' </tr>';
|
||||
this.html+=' <tr>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_9">九月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_10">十月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_11">十一月</td>';
|
||||
this.html+=' <td class="z-tomonth" id="Z_Month_month_'+this.id+'_12">十二月</td>';
|
||||
this.html+=' </tr>';
|
||||
this.html+=' <tr>';
|
||||
this.html+=' <td colspan="2" style="color:#339a99" id="Z_Month_clear_'+this.id+'">清空</td>';
|
||||
this.html+=' <td colspan="2" style="color:#339a99" id="Z_Month_close_'+this.id+'">关闭</td>';
|
||||
this.html+=' </tr>';
|
||||
this.html+=' </table>';
|
||||
this.html+=' </td>';
|
||||
this.html+='</tr>';
|
||||
|
||||
//结束
|
||||
this.html+='</table>';
|
||||
this.html+='</div>';
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
//解析对象中年月，如果不是年月格式置为当前月
|
||||
if (!Z.V.isDate(this.element.value+"-01"))
|
||||
this.elemDate = this.currDate;
|
||||
else
|
||||
{//有值时选中月
|
||||
this.elemDate = Z.DT.toDate(this.element.value+"-01");
|
||||
this.selectMonth = this.elemDate.getMonth()+1;
|
||||
}
|
||||
|
||||
this.selectYear = this.elemDate.getFullYear();
|
||||
|
||||
//组装日历DIV，和设置好位置和事件
|
||||
this.height = 271;
|
||||
|
||||
var $element = Z(this.element);
|
||||
var top = $element.offsetTopBody() + $element.offsetHeight() + this.top;
|
||||
var left = $element.offsetLeftBody() + this.left;
|
||||
|
||||
if (top > this.height && Z.D.clientHeight() - top - this.height < 0)
|
||||
{//如果顶部够高，底部不够高时，则向上弹出
|
||||
top -= this.height;
|
||||
}
|
||||
|
||||
var $calendar = Z(this.html);
|
||||
$calendar.appendTo("body").css({top:top, left:left, display:'block'});
|
||||
|
||||
//当前点击时阻止冒泡，其他点击时关闭
|
||||
$calendar.click(function(e){Z.E.stop(e);});
|
||||
Z(document).click(this.close, this);
|
||||
|
||||
//设置向左和向右移动一年
|
||||
Z("#Z_Month_prev_"+this.id).click(this.doPrevYear, this);
|
||||
Z("#Z_Month_next_"+this.id).click(this.doNextYear, this);
|
||||
|
||||
Z("#Z_Month_clear_"+this.id).click(function(e){this.element.value="";this.close(e);}, this);
|
||||
Z("#Z_Month_close_"+this.id).click(function(e){this.close(e);}, this);
|
||||
|
||||
//设置选择年份月份时打开年份列表事件
|
||||
Z("#Z_Month_year_"+this.id).click(this.doOpenYearList, this);
|
||||
|
||||
//最后显示选择年份,月份信息
|
||||
this.showYear();
|
||||
this.showMonth();
|
||||
},
|
||||
|
||||
doOpenYearList: function(e)
|
||||
{//打开选择年份列表
|
||||
var $list = Z("#Z_Month_year_"+this.id).find("ul");
|
||||
if ($list.length > 0)
|
||||
$list.remove();
|
||||
else
|
||||
{
|
||||
var min = this.selectYear - 50;
|
||||
var max = this.selectYear + 50;
|
||||
var $ul = Z("<ul></ul>").addClass("z-year-list");
|
||||
for (var i=min;i<=max;i++)
|
||||
{
|
||||
var $option = Z("<span value='" + i + "'>" + i + "年" + "</span>");
|
||||
$option.click(this.onChangeYear, this);
|
||||
if (i == this.selectYear)
|
||||
$option.addClass("z-selected");
|
||||
$ul.append($option);
|
||||
}
|
||||
$ul.append("<span class='z-close'>关闭</span>");
|
||||
Z("#Z_Month_year_"+this.id).append($ul);
|
||||
//把滚动条移到中间位置
|
||||
$ul[0].scrollTop = $ul[0].scrollHeight/2 - 117;
|
||||
}
|
||||
},
|
||||
|
||||
onChangeYear: function(e)
|
||||
{//修改年份
|
||||
var value = Z(Z.E.target(e)).val();
|
||||
this.selectYear = parseInt(value);
|
||||
|
||||
Z("#Z_Month_year_"+this.id).find("ul").hide().remove();
|
||||
|
||||
this.showYear();
|
||||
this.showMonth();
|
||||
|
||||
Z.E.stop(e);
|
||||
},
|
||||
|
||||
doPrevYear: function()
|
||||
{//上一年
|
||||
this.selectYear -= 1;
|
||||
this.showYear();
|
||||
this.showMonth();
|
||||
},
|
||||
|
||||
doNextYear: function()
|
||||
{//下一年
|
||||
this.selectYear += 1;
|
||||
this.showYear();
|
||||
this.showMonth();
|
||||
},
|
||||
|
||||
close: function(e)
|
||||
{//关闭
|
||||
var target = Z.E.target(e);
|
||||
if (target === this.element)
|
||||
{//如果是指定的元素不关闭
|
||||
Z.E.cancel(e);
|
||||
return;
|
||||
}
|
||||
|
||||
Z(document).offclick(this.close, this);
|
||||
Z("#Z_Month_"+this.id).remove();
|
||||
},
|
||||
|
||||
showYear: function()
|
||||
{//显示年
|
||||
Z("#Z_Month_year_"+this.id).find(".z-default").html(this.selectYear+"年");
|
||||
},
|
||||
|
||||
showMonth: function()
|
||||
{//显示月
|
||||
//先统一背景等数据
|
||||
for (var i=1;i<=12;i++)
|
||||
{
|
||||
Z("#Z_Month_month_"+this.id+"_"+i).removeClass("z-today").removeClass("z-selected").click(function(e)
|
||||
{
|
||||
var id = Z.E.current(e).id;
|
||||
var ind = id.lastIndexOf("_");
|
||||
this.selectMonth = parseInt(id.substring(ind+1));
|
||||
this.setSelectValue();
|
||||
this.close(e);
|
||||
|
||||
}, this);
|
||||
}
|
||||
|
||||
if (this.selectYear == this.currDate.getFullYear())
|
||||
Z("#Z_Month_month_"+this.id+"_"+(this.currDate.getMonth()+1)).addClass("z-today");
|
||||
|
||||
if (this.selectMonth != null)
|
||||
Z("#Z_Month_month_"+this.id+"_"+this.selectMonth).addClass("z-selected");
|
||||
},
|
||||
|
||||
setSelectValue: function()
|
||||
{
|
||||
this.setValue(this.selectYear + "-" + Z.S.prefixZero(this.selectMonth, 2));
|
||||
},
|
||||
|
||||
setValue: function(newValue)
|
||||
{
|
||||
var oldValue = this.element.value;
|
||||
this.element.value = newValue;
|
||||
if (this.element.onchange && oldValue != this.element.value)
|
||||
this.element.onchange();
|
||||
}
|
||||
};
|
||||
|
||||
Z.month = function($elem)
|
||||
{
|
||||
return new Z.Month({immediate:true, element:$elem});
|
||||
}
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,227 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{//BEGIN
|
||||
// @version v1.1.0 @author zouzhigang 2015-11-12 新建与整理
|
||||
|
||||
// 调用举例:
|
||||
// var clip = new Z.Clipboard();
|
||||
// clip.id = "clip_button";
|
||||
// clip.onClick = function(){clip.setText(Z('#text').val());};
|
||||
// clip.onCompleted = function(){alert("成功复制代码到剪贴板！");};
|
||||
// clip.execute();
|
||||
|
||||
Z.Clipboard = Z.Class.newInstance();
|
||||
Z.Clipboard.v = "1.4.0";
|
||||
/****************************************/
|
||||
//定义Z.Clipboard下缓存和Flash事件方法
|
||||
/****************************************/
|
||||
Z.Clipboard.cache = new Z.HashMap();
|
||||
Z.Clipboard.load = function(id)
|
||||
{//加载成功
|
||||
if (!id || !Z.Clipboard.cache.containsKey(id))
|
||||
return;
|
||||
|
||||
Z.Clipboard.cache.get(id).load();
|
||||
};
|
||||
Z.Clipboard.click = function(id)
|
||||
{//鼠标点击开始（传入复制文本）
|
||||
if (!id || !Z.Clipboard.cache.containsKey(id))
|
||||
return;
|
||||
|
||||
return Z.Clipboard.cache.get(id).onClick();
|
||||
};
|
||||
Z.Clipboard.complete = function(id, text)
|
||||
{//鼠标点击完成（完成复制回调）
|
||||
if (!id || !Z.Clipboard.cache.containsKey(id))
|
||||
return;
|
||||
|
||||
Z.Clipboard.cache.get(id).complete(text);
|
||||
};
|
||||
|
||||
/****************************************/
|
||||
//定义Z.Clipboard下的原型属性和方法
|
||||
/****************************************/
|
||||
Z.Clipboard.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
//公共参数
|
||||
elem: null,
|
||||
onClick: null,
|
||||
onCompleted: null,
|
||||
|
||||
//H5参数
|
||||
text: null,
|
||||
|
||||
//Flash参数
|
||||
flash: false,
|
||||
flashPath: null,
|
||||
contextPath: null,
|
||||
background: "transparent",
|
||||
opacity: 1
|
||||
},
|
||||
|
||||
init: function()
|
||||
{
|
||||
this.ready = false;
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
this.$elem = Z.$elem(this.elem, "Z.Clipboard");
|
||||
if (!Z.T.isFunction(this.onClick))
|
||||
{//必须的函数
|
||||
Z.alert("[Z.Clipboard]的[onClick]参数必须是函数");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.flash && document.execCommand)
|
||||
{//未强制flash，且支持执行命令的，默认使用H5
|
||||
this.$elem.click(this.doClick, this);
|
||||
}
|
||||
else
|
||||
{//否则默认Flash
|
||||
//创建一个DIV覆盖该元素
|
||||
var left = this.$elem.offsetLeft();
|
||||
var top = this.$elem.offsetTop();
|
||||
var width = this.$elem.offsetWidth();
|
||||
var height = this.$elem.offsetHeight();
|
||||
var zIndex = this.$elem.css("zIndex");
|
||||
zIndex = Z.V.isInteger(zIndex)?parseInt(zIndex)+1:99;
|
||||
|
||||
this.$flashDiv = Z("<div>").appendToPos(this.$elem.parent())
|
||||
.css({position: "absolute", top: top, left: left, width: width, height: height, zIndex: zIndex})
|
||||
.css("backgroundColor", this.background).opacity(this.opacity);
|
||||
|
||||
//获取Flash对象
|
||||
this.flashId = "Z_Clipboard_"+Z.random(10);
|
||||
var flashVars = "flashId="+this.flashId;
|
||||
var flashPath = Z.rootPath(this.contextPath, this.flashPath || "/service/res/swf/ZClipboard.swf");
|
||||
|
||||
if (Z.B.msieOnly)
|
||||
{//ie10以前
|
||||
this.$flashDiv.html('<object id="'+this.flashId+'" name="'+this.flashId+'" width="'+width+'" height="'+height+'" align="middle" classid="clsid:d27cdb6e-ae6d-11cz-96b8-444553540000" codebase="'+Z.L.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+flashPath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashVars+'"/><param name="wmode" value="transparent"/></object>');
|
||||
}
|
||||
else
|
||||
{//firefox,chrome,trident
|
||||
this.$flashDiv.html('<embed id="'+this.flashId+'" name="'+this.flashId+'" src="'+flashPath+'" flashvars="'+flashVars+'" pluginspage="'+Z.L.protocol+'://www.macromedia.com/go/getflashplayer" style="z-index:999;width:100%;height:100%" align="middle" border="0" loop="false" menu="false" quality="best" bgcolor="#ffffff" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" wmode="transparent"></embed>');
|
||||
}
|
||||
|
||||
this.flashObj = Z.D.id(this.flashId);
|
||||
Z.Clipboard.cache.put(this.flashId, this);
|
||||
}
|
||||
},
|
||||
|
||||
setText: function(text)
|
||||
{//设置复制文本
|
||||
if (!this.flash && document.execCommand)
|
||||
this.text = text;
|
||||
else
|
||||
this.ready && this.flashObj.setText(text);
|
||||
},
|
||||
|
||||
doClick: function()
|
||||
{//H5复制文本
|
||||
|
||||
//1.先回调点击函数
|
||||
var text = this.onClick.call(this);
|
||||
if (text && Z.T.isString(text)){
|
||||
this.text = text;
|
||||
}
|
||||
|
||||
//2.创建一个文本域固定在顶端隐藏，
|
||||
var $textarea = Z("<textarea></textarea>")
|
||||
.addClass("z-hidden-fixed").text(this.text)
|
||||
.appendTo("body");
|
||||
|
||||
//3.选中文本域内容，执行复制命令
|
||||
$textarea.select();
|
||||
document.execCommand("copy");
|
||||
|
||||
//4.最后回调成功函数
|
||||
this.complete(this.text);
|
||||
},
|
||||
|
||||
load: function()
|
||||
{//Flash加载完成
|
||||
this.ready = true;
|
||||
},
|
||||
|
||||
complete: function(text)
|
||||
{//复制完成
|
||||
Z.T.isFunction(this.onCompleted) && this.onCompleted.call(this, text);
|
||||
},
|
||||
|
||||
remove: function()
|
||||
{
|
||||
if (!this.flash && document.execCommand)
|
||||
this.$elem.offclick(this.doClick, this);
|
||||
else
|
||||
{
|
||||
Z.Clipboard.cache.remove(this.flashId);
|
||||
this.$flashDiv.remove();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/********************************************/
|
||||
//刷新静态函数和第一次加载
|
||||
/********************************************/
|
||||
Z.Clipboard.oncache = [];
|
||||
Z.Clipboard.onload = function()
|
||||
{
|
||||
//1.先删除原来的缓存
|
||||
Z.each(Z.Clipboard.oncache, function(clipboard){
|
||||
clipboard.remove();
|
||||
});
|
||||
Z.Clipboard.oncache = [];
|
||||
|
||||
//2.再加载所有的下拉列表
|
||||
var elements = Z.D.attrs("data-role", "z-clipboard");
|
||||
if (!elements || elements.length == 0){
|
||||
return;
|
||||
}
|
||||
|
||||
Z.each(elements, function(elem)
|
||||
{
|
||||
if (!Z.EL.has(elem, "data-click"))
|
||||
return;
|
||||
|
||||
var $elem = Z(elem);
|
||||
if ($elem.attr("type") == "submit"){
|
||||
$elem.attr("type", "button");
|
||||
}
|
||||
|
||||
var clipboard = new Z.Clipboard();
|
||||
clipboard.elem = elem;
|
||||
clipboard.onClick = Z.evals($elem.attr("data-click"));
|
||||
clipboard.onCompleted = Z.evals($elem.attr("data-completed"));
|
||||
clipboard.flash = "true" == $elem.attr("data-flash");
|
||||
clipboard.flashPath = $elem.attr("data-flashPath");
|
||||
clipboard.contextPath = $elem.attr("data-context");
|
||||
clipboard.execute();
|
||||
|
||||
Z.Clipboard.oncache.push(clipboard);
|
||||
});
|
||||
};
|
||||
|
||||
Z.onload(Z.Clipboard.onload);
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{//BEGIN
|
||||
// @version v1.1.0 @author zouzhigang 2015-11-12 新建与整理
|
||||
|
||||
/********************************************/
|
||||
//选择框定义和加载转换成下拉列表对象
|
||||
/********************************************/
|
||||
Z.Coder = Z.Class.newInstance();
|
||||
Z.Coder.v = "1.4.0";
|
||||
Z.Coder.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
elem: null
|
||||
},
|
||||
|
||||
init: function()
|
||||
{//初始化
|
||||
if (!this.elem)
|
||||
return;
|
||||
|
||||
this.$elem = Z(this.elem);
|
||||
}
|
||||
};
|
||||
|
||||
//缓存加载函数
|
||||
Z.Coder.cache = [];
|
||||
Z.Coder.load = function()
|
||||
{
|
||||
//1.先删除原来的缓存
|
||||
Z.each(Z.Coder.cache, function(coder){
|
||||
coder.remove();
|
||||
});
|
||||
Z.Coder.cache = [];
|
||||
|
||||
//2.再加载所有的选择框
|
||||
var elements = Z.D.attrs("data-role", "z-coder");
|
||||
if (!elements || elements.length == 0)
|
||||
return;
|
||||
|
||||
Z.each(elements, function(elem)
|
||||
{
|
||||
var $textarea = Z(elem).hidden();
|
||||
//取出父节点的绝对位置
|
||||
|
||||
var offsetTop = $textarea.offsetTop();
|
||||
var offsetLeft = $textarea.offsetLeft();
|
||||
var width = $textarea.offsetWidth();
|
||||
var height = $textarea.offsetHeight();
|
||||
|
||||
var id = Z.S.trim($textarea.attr("id"));
|
||||
var name = Z.S.trim($textarea.attr("name"))
|
||||
var classes = Z.S.trim($textarea.attr("data-class"));
|
||||
|
||||
var coder = '<div class="z-coder">'
|
||||
+ '</div>';
|
||||
|
||||
var $elem = Z(coder).appendToPos($textarea.parent());
|
||||
$elem.addClass(classes).css({position: "absolute", top: offsetTop, left: offsetLeft, width: width, height: height});
|
||||
$elem.attr("data-id", id).attr("data-name", name);
|
||||
|
||||
Z.Coder.cache.push(new Z.Coder({elem: $elem[0]}));
|
||||
});
|
||||
};
|
||||
|
||||
Z.onload(Z.Coder.load);
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{//BEGIN
|
||||
// @version v1.1.0 @author zouzhigang 2015-11-12 新建与整理
|
||||
|
||||
Z.Fullscreen =
|
||||
{//moz是FullScreen，其他都是Fullscreen
|
||||
target: null,
|
||||
elem: function()
|
||||
{//全屏对象
|
||||
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
|
||||
|| document.msFullscreenElement || document.oFullscreenElement || Z.Fullscreen.target;
|
||||
},
|
||||
enabled: function()
|
||||
{//是否开启全屏
|
||||
return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled
|
||||
|| document.msFullscreenEnabled || document.oFullscreenEnabled;
|
||||
},
|
||||
change: function(func)
|
||||
{//更改方法
|
||||
var name = null;
|
||||
if (document.body.requestFullscreen)
|
||||
name = "fullscreenchange";
|
||||
else if(document.body.webkitRequestFullscreen)
|
||||
name = "webkitfullscreenchange";
|
||||
else if(document.body.mozRequestFullScreen)
|
||||
name = "mozfullscreenchange";
|
||||
else if(document.body.msRequestFullscreen)
|
||||
name = "msfullscreenchange";
|
||||
else if(document.body.oRequestFullscreen)
|
||||
name = "ofullscreenchange";
|
||||
|
||||
if (name != null)
|
||||
{//支持则增加监听
|
||||
Z.E.add(document, name, func);
|
||||
}
|
||||
},
|
||||
full: function(id)
|
||||
{
|
||||
var elem = Z.D.id(id);
|
||||
if (elem.requestFullscreen)
|
||||
elem.requestFullscreen();
|
||||
else if(elem.webkitRequestFullscreen)
|
||||
elem.webkitRequestFullScreen();
|
||||
else if(elem.mozRequestFullScreen)
|
||||
elem.mozRequestFullScreen();
|
||||
else if(elem.msRequestFullscreen)
|
||||
elem.msRequestFullscreen();
|
||||
else if(elem.oRequestFullscreen)
|
||||
elem.oRequestFullscreen();
|
||||
|
||||
Z.Fullscreen.target = elem;
|
||||
},
|
||||
toggle: function()
|
||||
{
|
||||
Z.Fullscreen.change(Z.Fullscreen.toggleHandler);
|
||||
},
|
||||
toggleHandler: function()
|
||||
{
|
||||
var elem = Z.Fullscreen.elem();
|
||||
if (elem.paused)
|
||||
elem.play();
|
||||
else
|
||||
elem.pause();
|
||||
}
|
||||
};
|
||||
|
||||
Z.onload(function()
|
||||
{//全屏播放，退出暂停
|
||||
Z.Fullscreen.toggle();
|
||||
});
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,208 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
+(function(Z)
|
||||
{
|
||||
//BEGIN
|
||||
|
||||
/**
|
||||
* 图片裁切
|
||||
*/
|
||||
Z.ImageClipper = Z.Class.newInstance();
|
||||
Z.ImageClipper.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
elem : null,
|
||||
ratio: 1,
|
||||
state : {},
|
||||
img: null,
|
||||
clipWidth: [50, 100, 150],
|
||||
save: null
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
this.$elem = Z.$elem(this.elem, "Z.ImageClipper");
|
||||
if (this.clipWidth == null || this.clipWidth.length == 0)
|
||||
{
|
||||
Z.alert("[Z.ImageClipper]没有设置clipWidth，或不是数组");
|
||||
return;
|
||||
}
|
||||
|
||||
this.id = Z.random(10);
|
||||
var html = '<div id="ZImageClipper_'+this.id+'" class="z-relative" style="width:620px;height:460px;">'
|
||||
+ ' <div id="ZImageClipper_image_'+this.id+'" class="z-relative z-w400 z-h400 z-bd z-overflow-hidden z-bg-white" style="cursor:move;background-repeat: no-repeat;">'
|
||||
+ ' <div id="ZImageClipper_square_'+this.id+'" class="z-absolute z-w200 z-h200 z-bd" style="top:100px;left:100px;box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);"></div>'
|
||||
+ ' <div id="ZImageClipper_loading_'+this.id+'" class="z-absolute-center-middle z-w60 z-h30 z-hide">加载中...</div>'
|
||||
+ ' </div>'
|
||||
+ ' <div class="z-w400 z-h30 z-mg-t10">'
|
||||
+ ' <button type="button" class="z-button z-cyan z-w120 z-h50 zi-px20" id="ZImageClipper_upload_'+this.id+'">上传图像 </button>'
|
||||
+ ' <button type="button" class="z-button z-cyan z-w50 z-h50 zi-px30" id="ZImageClipper_zoomIn_'+this.id+'">+</button>'
|
||||
+ ' <button type="button" class="z-button z-cyan z-w50 z-h50 zi-px30" id="ZImageClipper_zoomOut_'+this.id+'">-</button>'
|
||||
+ ' <button type="button" class="z-button z-cyan z-w80 z-h50 zi-px20" id="ZImageClipper_clip_'+this.id+'">裁切</button>'
|
||||
+ ' <button type="button" class="z-button z-cyan z-w80 z-h50 zi-px20" id="ZImageClipper_save_'+this.id+'">保存</button>'
|
||||
+ ' </div>'
|
||||
+ ' <div id="ZImageClipper_clipped_'+this.id+'" class="z-absolute z-w200 z-text-center z-pd-t20 z-bd" style="top:0;right:0;height:460px;"></button>'
|
||||
+ '</div>';
|
||||
|
||||
this.$elem.html(html);
|
||||
this.$imageBox = this.$elem.find("#ZImageClipper_image_"+this.id);
|
||||
this.$square = this.$elem.find("#ZImageClipper_square_"+this.id);
|
||||
this.$loading = this.$elem.find("#ZImageClipper_loading_"+this.id).show();
|
||||
|
||||
this.image = new Image();
|
||||
Z(this.image).load(function()
|
||||
{
|
||||
this.$loading.hide();
|
||||
this.setBackground();
|
||||
|
||||
this.$imageBox.mousedown(this.onMouseDown, this).mousemove(this.onMouseMove, this);
|
||||
Z(window).mouseup(this.onMouseUp, this);
|
||||
}, this);
|
||||
this.image.src = this.img;
|
||||
|
||||
Z("#ZImageClipper_zoomIn_"+this.id).click(this.onZoomIn, this);
|
||||
Z("#ZImageClipper_zoomOut_"+this.id).click(this.onZoomOut, this);
|
||||
|
||||
this.$file = Z("<input id='ZImageClipper_upload_file_"+this.id+"' type='file' accept='image/jpg,image/jpeg,image/png' class='z-hide' single>");
|
||||
this.$file.appendTo("body").change(function()
|
||||
{
|
||||
var file = this.$file[0].files[0];
|
||||
var reader = new FileReader();
|
||||
reader.onload = Z.bind(function(e)
|
||||
{
|
||||
this.img = e.target.result;
|
||||
this.image.src = this.img;
|
||||
}, this);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}, this);
|
||||
|
||||
Z("#ZImageClipper_upload_"+this.id).click(function(){this.$file[0].click();}, this);
|
||||
Z("#ZImageClipper_clip_"+this.id).click(function()
|
||||
{
|
||||
var imgData = this.getDataURL();
|
||||
var imgDiv = '';
|
||||
Z.each(this.clipWidth, function(elem){
|
||||
imgDiv += '<div class="z-w200 z-mg-b20"><img src="'+imgData+'" class="z-bd-rd50p" style="width:'+elem+'px;"><br>'+elem+' * '+elem+'</div>'
|
||||
});
|
||||
Z("#ZImageClipper_clipped_"+this.id).html(imgDiv);
|
||||
}, this);
|
||||
|
||||
if (Z.T.isFunction(this.save)){
|
||||
Z("#ZImageClipper_save_"+this.id).click(this.save, this);
|
||||
}
|
||||
},
|
||||
|
||||
setBackground: function()
|
||||
{
|
||||
var w = parseInt(this.image.width) * this.ratio;
|
||||
var h = parseInt(this.image.height) * this.ratio;
|
||||
|
||||
var pw = (400 - w) / 2;
|
||||
var ph = (400 - h) / 2;
|
||||
|
||||
this.$imageBox.css({
|
||||
"background-image": "url(" + this.image.src + ")",
|
||||
"background-size": w +"px " + h + "px",
|
||||
"background-position": pw + "px " + ph + "px",
|
||||
"background-repeat": "no-repeat"});
|
||||
},
|
||||
|
||||
onMouseDown: function(e)
|
||||
{
|
||||
Z.E.stop(e);
|
||||
this.state.dragging = true;
|
||||
this.state.mouseX = e.clientX;
|
||||
this.state.mouseY = e.clientY;
|
||||
},
|
||||
|
||||
onMouseMove: function(e)
|
||||
{
|
||||
Z.E.stop(e);
|
||||
if (!this.state.dragging)
|
||||
return;
|
||||
|
||||
var x = e.clientX - this.state.mouseX;
|
||||
var y = e.clientY - this.state.mouseY;
|
||||
|
||||
var bg = this.$imageBox.css('background-position').split(' ');
|
||||
|
||||
var bgX = x + parseInt(bg[0]);
|
||||
var bgY = y + parseInt(bg[1]);
|
||||
|
||||
this.$imageBox.css('background-position', bgX +'px ' + bgY + 'px');
|
||||
|
||||
this.state.mouseX = e.clientX;
|
||||
this.state.mouseY = e.clientY;
|
||||
},
|
||||
|
||||
onMouseUp: function(e)
|
||||
{
|
||||
Z.E.stop(e);
|
||||
this.state.dragging = false;
|
||||
},
|
||||
|
||||
onZoomIn: function()
|
||||
{
|
||||
this.ratio *= 1.1;
|
||||
this.setBackground();
|
||||
},
|
||||
|
||||
onZoomOut: function()
|
||||
{
|
||||
this.ratio *= 0.9;
|
||||
this.setBackground();
|
||||
},
|
||||
|
||||
getDataURL: function()
|
||||
{
|
||||
var width = this.$square.offsetWidth(),
|
||||
height = this.$square.offsetHeight(),
|
||||
canvas = document.createElement("canvas"),
|
||||
dim = this.$imageBox.css('background-position').split(' '),
|
||||
size = this.$imageBox.css('background-size').split(' '),
|
||||
dx = parseInt(dim[0]) - this.$imageBox.offsetWidth()/2 + width/2,
|
||||
dy = parseInt(dim[1]) - this.$imageBox.offsetHeight()/2 + height/2,
|
||||
dw = parseInt(size[0]),
|
||||
dh = parseInt(size[1]),
|
||||
sh = parseInt(this.image.height),
|
||||
sw = parseInt(this.image.width);
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
var context = canvas.getContext("2d");
|
||||
context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
|
||||
var imageData = canvas.toDataURL('image/png');
|
||||
return imageData;
|
||||
},
|
||||
|
||||
getBlob: function()
|
||||
{
|
||||
var imageData = this.getDataURL();
|
||||
var b64 = imageData.replace('data:image/png;base64,','');
|
||||
var binary = atob(b64);
|
||||
var array = [];
|
||||
for (var i = 0; i < binary.length; i++) {
|
||||
array.push(binary.charCodeAt(i));
|
||||
}
|
||||
return new Blob([new Uint8Array(array)], {type: 'image/png'});
|
||||
}
|
||||
}
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,206 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
+(function(Z)
|
||||
{
|
||||
//BEGIN
|
||||
|
||||
/**
|
||||
* mobile 端图片裁切
|
||||
*/
|
||||
Z.ImageClipper = Z.Class.newInstance();
|
||||
Z.ImageClipper.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
elem : null,
|
||||
ratio: 1,
|
||||
state : {},
|
||||
img: null,
|
||||
clipWidth: [50, 100, 150],
|
||||
save: null
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
this.$elem = Z.$elem(this.elem, "Z.Floater");
|
||||
|
||||
if (this.clipWidth == null || this.clipWidth.length == 0)
|
||||
{
|
||||
Z.alert("[Z.ImageClipper]没有设置clipWidth，或不是数组");
|
||||
return;
|
||||
}
|
||||
|
||||
this.id = Z.random(10);
|
||||
|
||||
//判断是不是手机端
|
||||
this.width = this.$elem.offsetWidth();
|
||||
var html = '<div id="ZImageClipper_'+this.id+'" class="z-relative z-w100p">'
|
||||
+ ' <div id="ZImageClipper_image_'+this.id+'" class="z-relative z-w100p z-bd z-overflow-hidden z-bg-white" style="cursor:move;background-repeat:no-repeat;height:'+this.width+'px;">'
|
||||
+ ' <div id="ZImageClipper_square_'+this.id+'" class="z-absolute z-w50p z-h50p z-bd" style="top:25%;left:25%;box-shadow:0 0 0 1000px rgba(0, 0, 0, 0.5);"></div>'
|
||||
+ ' <div id="ZImageClipper_loading_'+this.id+'" class="z-absolute-center-middle z-w60 z-h30 z-hide">加载中...</div>'
|
||||
+ ' <div id="ZImageClipper_clipped_'+this.id+'" class="z-absolute z-w100p z-l0 z-t0 z-text-center z-pd-t20 z-bd z-hide" style="height:'+this.width+'px;"></div>'
|
||||
+ ' </div>'
|
||||
+ ' <div class="z-button-row z-w100p z-mg-t10">'
|
||||
+ ' <button type="button" class="z-button-flex z-h50 zi-rem14" id="ZImageClipper_upload_'+this.id+'">上传图像 </button>'
|
||||
+ ' <button type="button" class="z-button-flex z-h50 zi-rem16" id="ZImageClipper_zoomIn_'+this.id+'">+</button>'
|
||||
+ ' <button type="button" class="z-button-flex z-h50 zi-rem16" id="ZImageClipper_zoomOut_'+this.id+'">-</button>'
|
||||
+ ' <button type="button" class="z-button-flex z-h50 zi-rem14" id="ZImageClipper_save_'+this.id+'">确定</button>'
|
||||
+ ' </div>'
|
||||
+ '</div>';
|
||||
|
||||
this.$elem.html(html);
|
||||
this.$imageBox = this.$elem.find("#ZImageClipper_image_"+this.id);
|
||||
this.$square = this.$elem.find("#ZImageClipper_square_"+this.id);
|
||||
this.$loading = this.$elem.find("#ZImageClipper_loading_"+this.id).show();
|
||||
this.$$button = this.$elem.find("button");
|
||||
|
||||
this.image = new Image();
|
||||
Z(this.image).load(function()
|
||||
{
|
||||
this.$loading.hide();
|
||||
this.setBackground();
|
||||
|
||||
this.$imageBox.on("touchstart", this.onTouchStart, this)
|
||||
.on("touchmove", this.onTouchMove, this)
|
||||
.on("mouseup mouseleave", this.onTouchEnd, this);
|
||||
}, this);
|
||||
this.image.src = this.img;
|
||||
|
||||
Z("#ZImageClipper_zoomIn_"+this.id).on("touchstart", this.onZoomIn, this);
|
||||
Z("#ZImageClipper_zoomOut_"+this.id).on("touchstart", this.onZoomOut, this);
|
||||
|
||||
this.$file = Z("<input id='ZImageClipper_upload_file_"+this.id+"' type='file' accept='image/jpg,image/jpeg,image/png' class='z-hide' single>");
|
||||
this.$file.appendTo("body").change(function()
|
||||
{
|
||||
var file = this.$file[0].files[0];
|
||||
var reader = new FileReader();
|
||||
reader.onload = Z.bind(function(e)
|
||||
{
|
||||
this.img = e.target.result;
|
||||
this.image.src = this.img;
|
||||
}, this);
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
}, this);
|
||||
|
||||
Z("#ZImageClipper_upload_"+this.id).on("touchstart",function(){this.$file[0].click();}, this);
|
||||
|
||||
if (Z.T.isFunction(this.save)){
|
||||
Z("#ZImageClipper_save_"+this.id).on("touchstart", this.save, this);
|
||||
}
|
||||
},
|
||||
|
||||
setBackground: function()
|
||||
{
|
||||
var w = parseInt(this.image.width) * this.ratio;
|
||||
var h = parseInt(this.image.height) * this.ratio;
|
||||
|
||||
var pw = (400 - w) / 2;
|
||||
var ph = (400 - h) / 2;
|
||||
|
||||
this.$imageBox.css({
|
||||
"background-image": "url(" + this.image.src + ")",
|
||||
"background-size": w +"px " + h + "px",
|
||||
"background-position": pw + "px " + ph + "px",
|
||||
"background-repeat": "no-repeat"});
|
||||
},
|
||||
|
||||
onTouchStart: function(e)
|
||||
{
|
||||
Z.E.forbidden(e);
|
||||
this.state.dragging = true;
|
||||
var theTouch = e.touches[0];
|
||||
this.state.mouseX = theTouch.clientX;
|
||||
this.state.mouseY = theTouch.clientY;
|
||||
},
|
||||
|
||||
onTouchMove: function(e)
|
||||
{
|
||||
Z.E.forbidden(e);
|
||||
if (!this.state.dragging)
|
||||
return;
|
||||
|
||||
var theTouch = e.touches[0];
|
||||
var x = theTouch.clientX - this.state.mouseX;
|
||||
var y = theTouch.clientY - this.state.mouseY;
|
||||
|
||||
var bg = this.$imageBox.css('background-position').split(' ');
|
||||
|
||||
var bgX = x + parseInt(bg[0]);
|
||||
var bgY = y + parseInt(bg[1]);
|
||||
|
||||
this.$imageBox.css('background-position', bgX +'px ' + bgY + 'px');
|
||||
|
||||
this.state.mouseX = theTouch.clientX;
|
||||
this.state.mouseY = theTouch.clientY;
|
||||
},
|
||||
|
||||
onTouchEnd: function(e)
|
||||
{
|
||||
Z.E.forbidden(e);
|
||||
this.state.dragging = false;
|
||||
},
|
||||
|
||||
onZoomIn: function()
|
||||
{
|
||||
this.ratio *= 1.1;
|
||||
this.setBackground();
|
||||
},
|
||||
|
||||
onZoomOut: function()
|
||||
{
|
||||
this.ratio *= 0.9;
|
||||
this.setBackground();
|
||||
},
|
||||
|
||||
getDataURL: function()
|
||||
{
|
||||
var width = this.$square.offsetWidth(),
|
||||
height = this.$square.offsetHeight(),
|
||||
canvas = document.createElement("canvas"),
|
||||
dim = this.$imageBox.css('background-position').split(' '),
|
||||
size = this.$imageBox.css('background-size').split(' '),
|
||||
dx = parseInt(dim[0]) - this.$imageBox.offsetWidth()/2 + width/2,
|
||||
dy = parseInt(dim[1]) - this.$imageBox.offsetHeight()/2 + height/2,
|
||||
dw = parseInt(size[0]),
|
||||
dh = parseInt(size[1]),
|
||||
sh = parseInt(this.image.height),
|
||||
sw = parseInt(this.image.width);
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
var context = canvas.getContext("2d");
|
||||
context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
|
||||
var imageData = canvas.toDataURL('image/png');
|
||||
return imageData;
|
||||
},
|
||||
|
||||
getBlob: function()
|
||||
{
|
||||
var imageData = this.getDataURL();
|
||||
var b64 = imageData.replace('data:image/png;base64,','');
|
||||
var binary = atob(b64);
|
||||
var array = [];
|
||||
for (var i = 0; i < binary.length; i++) {
|
||||
array.push(binary.charCodeAt(i));
|
||||
}
|
||||
return new Blob([new Uint8Array(array)], {type: 'image/png'});
|
||||
}
|
||||
}
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,254 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{
|
||||
/****************************************/
|
||||
//“图片放大镜”
|
||||
/****************************************/
|
||||
|
||||
// 1、配置举例：
|
||||
// <ul id="zoomList">
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// </ul>
|
||||
//
|
||||
// <script>
|
||||
// var newMagicZoom = new Z.MagicZoom();
|
||||
// newMagicZoom.elem = Z("#zoomList"); // 列表对象
|
||||
// newMagicZoom.width = 400; // 自定义宽度
|
||||
// newMagicZoom.listShow = 5; // 自定义小图显示个数
|
||||
// newMagicZoom.zoomRatio = 2; // 自定义缩放倍数
|
||||
// newMagicZoom.execute();
|
||||
// </script>
|
||||
|
||||
/************************************************************************/
|
||||
/********************************************/
|
||||
|
||||
Z.MagicZoom = Z.Class.newInstance();
|
||||
Z.MagicZoom.prototype =
|
||||
{
|
||||
//start of Z.MagicZoom.prototype
|
||||
defaults:
|
||||
{//定义
|
||||
elem: null, // 列表对象
|
||||
width: -1, // 容器宽度，默认为 -1，动态计算
|
||||
listShow: 5, // 导航最多展示图片数量
|
||||
zoomRatio: 2, // 缩放倍数，默认两倍
|
||||
},
|
||||
init: function()
|
||||
{//初始化
|
||||
},
|
||||
execute: function()
|
||||
{//执行
|
||||
this.$elem = Z.$elem(this.elem, "Z.MagicZoom");
|
||||
if (this.width < 0){
|
||||
this.width = this.$elem.offsetWidth();
|
||||
}
|
||||
|
||||
//重新组装排版
|
||||
var wrapHtml = '<div class="z-magicZoom z-relative" style="width:'+this.width+'px;">';
|
||||
wrapHtml += '<div class="z-zoomImg z-w100p z-bd z-relative" style="height:'+this.width+'px;">';
|
||||
wrapHtml += '<img class="z-absolute-center-middle" src="">';
|
||||
wrapHtml += '<i class="z-font z-query z-absolute z-r0 z-b0 z-w30 z-h30 z-px20 z-lh30 z-text-center"></i>';
|
||||
wrapHtml += '<div class="z-zoomCover z-absolute z-bd z-hide"></div>';
|
||||
wrapHtml += '</div>';
|
||||
wrapHtml += '<div class="z-zoomList z-w100p z-mg-t3 z-relative"><div class="z-relative z-overflow-hidden"></div></div>';
|
||||
wrapHtml += '<div class="z-zoomShow z-absolute z-overflow-hidden z-hide"><img class="z-absolute z-l0 z-t0" src=""></div>';
|
||||
wrapHtml += '</div>';
|
||||
|
||||
this.$wrap = Z(wrapHtml).insertAfter(this.$elem);
|
||||
this.$zoom = this.$wrap.find(".z-zoomImg");
|
||||
this.$zoomImg = this.$zoom.find("img");
|
||||
this.$zoomIcon = this.$zoom.find(".z-font");
|
||||
this.$list = this.$wrap.children(".z-zoomList");
|
||||
this.$listUl = this.$list.find("div").append(this.$elem);
|
||||
this.$lis = this.$elem.find("li").css("opacity",.5);
|
||||
|
||||
//常量
|
||||
this.length = this.$lis.length;
|
||||
this.zoomWidth = this.$zoom.offsetWidth()-2;
|
||||
this.zoomHeight = this.$zoom.offsetHeight()-2;
|
||||
this.coverWidth = this.zoomWidth / this.zoomRatio;
|
||||
this.coverHeight = this.zoomHeight / this.zoomRatio;
|
||||
this.maxX = this.zoomWidth - this.coverWidth;
|
||||
this.maxY = this.zoomHeight - this.coverHeight;
|
||||
this.minCx = this.coverWidth/2;
|
||||
this.minCy = this.coverHeight/2;
|
||||
this.maxCx = this.maxX + this.coverWidth/2;
|
||||
this.maxCy = this.maxY + this.coverHeight/2;
|
||||
|
||||
//遮罩层、展示层
|
||||
this.$zoomCover = this.$wrap.find(".z-zoomCover").css("width",this.coverWidth).css("height",this.coverHeight);
|
||||
this.$zoomShow = this.$wrap.find(".z-zoomShow").css("width",this.zoomWidth).css("height",this.zoomHeight)
|
||||
.css("left",this.zoomWidth + 10).css("top",0);
|
||||
this.$showImg = this.$zoomShow.find("img");
|
||||
|
||||
if (this.length > this.listShow){
|
||||
this.hasBtn = true;
|
||||
this.$btnPrev = Z('<div class="z-absolute z-l0 z-t0 z-b0 z-w20 z-h100p z-bd z-text-center z-pointer z-event-none z-text-gray"><i class="z-font z-arrowhead-left z-absolute-center-middle z-w20 z-h20"></i></div>').appendTo(this.$list);
|
||||
this.$btnNext = Z('<div class="z-absolute z-r0 z-t0 z-b0 z-w20 z-h100p z-bd z-text-center z-pointer"><i class="z-font z-arrowhead-right z-absolute-center-middle z-w20 z-h20"></i></div>').appendTo(this.$list);
|
||||
this.$listUl.addClass("z-mg-l20 z-mg-r20");
|
||||
this.$btnPrev.on("click", this.prevList, this);
|
||||
this.$btnNext.on("click", this.nextList, this);
|
||||
}
|
||||
|
||||
//计算每个小图大小
|
||||
var ulWidth = this.$listUl.offsetWidth() - 6;
|
||||
this.liWidth = Math.round(ulWidth/this.listShow);
|
||||
|
||||
this.$listUl.css("height",this.liWidth);
|
||||
this.$list.css("height",this.liWidth);
|
||||
this.$elem.css("width",this.liWidth * this.length).css("height",this.liWidth);
|
||||
this.$lis.css("width",this.liWidth - 6).css("height",this.liWidth - 6);
|
||||
|
||||
this.ulShow = ulWidth;
|
||||
this.ulWidth = this.$elem.offsetWidth();
|
||||
|
||||
//第一张图
|
||||
this.setImgSrc(0);
|
||||
|
||||
//绑定事件
|
||||
this.$zoom.on("mouseenter", this.zoomEnter, this).on("mousemove", this.zoomMove, this).on("mouseleave", this.zoomLeave, this);
|
||||
this.$lis.on("mouseenter", this.lisEnter, this);
|
||||
},
|
||||
setImgSrc: function(index)
|
||||
{
|
||||
var $li = Z(this.$lis[index]);
|
||||
$li.css("opacity",1).siblings("li").css("opacity",.5);
|
||||
var imgSrc = $li.find("img").attr("src");
|
||||
this.$zoomImg.attr("src", imgSrc);
|
||||
this.$showImg.attr("src", imgSrc);
|
||||
},
|
||||
zoomEnter: function(ev)
|
||||
{//进入 zoom ，显示放大镜
|
||||
Z.E.forbidden(ev);
|
||||
this.$zoomCover.show();
|
||||
this.$zoomShow.show();
|
||||
|
||||
//设置位置
|
||||
var mX = ev.clientX;
|
||||
var mY = ev.clientY;
|
||||
var rect = this.$zoom[0].getBoundingClientRect();
|
||||
var cX = rect.left + rect.width/2;
|
||||
var cy = rect.top + rect.height/2;
|
||||
|
||||
this.$zoomCover.css("left", (mX > cX)?this.maxX:0)
|
||||
.css("top", (mY > cy)?this.maxY:0);
|
||||
|
||||
this.$showImg.css("width",this.$zoomImg.offsetWidth() * this.zoomRatio)
|
||||
.css("height",this.$zoomImg.offsetHeight() * this.zoomRatio)
|
||||
.css("margin-left",parseInt(this.$zoomImg.css("margin-left")) * this.zoomRatio)
|
||||
.css("margin-top",parseInt(this.$zoomImg.css("margin-top")) * this.zoomRatio);
|
||||
},
|
||||
zoomMove: function(ev)
|
||||
{//移动放大镜
|
||||
Z.E.forbidden(ev);
|
||||
|
||||
// cover 位置计算
|
||||
var mX = ev.clientX;
|
||||
var mY = ev.clientY;
|
||||
var rect = this.$zoom[0].getBoundingClientRect();
|
||||
mX -= rect.left;
|
||||
mY -= rect.top;
|
||||
var setX, setY;
|
||||
if (mX < this.minCx){
|
||||
setX = 0;
|
||||
} else if (mX > this.maxCx){
|
||||
setX = this.maxX;
|
||||
} else {
|
||||
setX = mX - this.minCx;
|
||||
}
|
||||
if (mY < this.minCy){
|
||||
setY = 0;
|
||||
} else if (mY > this.maxCy){
|
||||
setY = this.maxY;
|
||||
} else {
|
||||
setY = mY - this.minCy;
|
||||
}
|
||||
|
||||
//cover 位置定义
|
||||
this.$zoomCover.css("left", setX).css("top", setY);
|
||||
|
||||
//show 位置计算
|
||||
setX = -(setX * this.zoomRatio);
|
||||
setY = -(setY * this.zoomRatio);
|
||||
this.$showImg.css("left", setX).css("top", setY);
|
||||
},
|
||||
zoomLeave: function(ev)
|
||||
{//离开 zoom ，隐藏放大镜
|
||||
Z.E.forbidden(ev);
|
||||
this.$zoomCover.hide();
|
||||
this.$zoomShow.hide();
|
||||
},
|
||||
lisEnter: function(ev)
|
||||
{//hover 小图片，切换图片显示
|
||||
Z.E.forbidden(ev);
|
||||
var $li = Z(Z.E.current(ev));
|
||||
if ($li.css("opacity") == "1")
|
||||
return;
|
||||
var liIndex = this.getParentIndex($li[0]);
|
||||
this.setImgSrc(liIndex)
|
||||
},
|
||||
prevList: function(ev)
|
||||
{//向前切换图片列表
|
||||
Z.E.forbidden(ev);
|
||||
var nLeft = parseInt(this.$elem.css("left"));
|
||||
nLeft += this.ulWidth;
|
||||
nLeft = nLeft > 0 ? 0 : nLeft;
|
||||
this.$elem.css("left", nLeft);
|
||||
|
||||
//按钮状态
|
||||
this.$btnNext.removeClass("z-event-none").removeClass("z-text-gray");
|
||||
if (nLeft == 0){
|
||||
this.$btnPrev.addClass("z-event-none z-text-gray");
|
||||
}
|
||||
|
||||
},
|
||||
nextList: function(ev)
|
||||
{//向后切换图片列表
|
||||
Z.E.forbidden(ev);
|
||||
var nLeft = parseInt(this.$elem.css("left"));
|
||||
nLeft -= this.ulShow;
|
||||
if ((this.ulShow - nLeft)> this.ulWidth){
|
||||
nLeft = this.ulShow - this.ulWidth;
|
||||
}
|
||||
this.$elem.css("left", nLeft);
|
||||
|
||||
//按钮状态
|
||||
this.$btnPrev.removeClass("z-event-none").removeClass("z-text-gray");
|
||||
if (nLeft == (this.ulShow - this.ulWidth)){
|
||||
this.$btnNext.addClass("z-event-none z-text-gray");
|
||||
}
|
||||
},
|
||||
getParentIndex: function(elem)
|
||||
{//获取 elem 在父级的 索引值
|
||||
var ind = 0;
|
||||
while (elem = elem.previousSibling) {
|
||||
if (elem.nodeType == 1)
|
||||
ind++
|
||||
}
|
||||
return ind;
|
||||
},
|
||||
//end of Z.MagicZoom.prototype
|
||||
}
|
||||
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,198 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{
|
||||
//BEGIN
|
||||
/************************************************************************************************/
|
||||
//滚屏，每次滚轮滚动一个屏幕高度，并增加上下两个按钮点击切换屏幕，支持指定固定顶部高度和滚动速度
|
||||
/************************************************************************************************/
|
||||
//var sScreen = new Z.ScrollScreen();
|
||||
//sScreen.fixHeight = 55;
|
||||
//sScreen.execute();
|
||||
|
||||
Z.ScrollScreen = Z.Class.newInstance();
|
||||
Z.ScrollScreen.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
speed: 13,
|
||||
times: 13,
|
||||
fixHeight:0,
|
||||
zIndex: 0
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
//支持滚屏的对象
|
||||
this.$screen = Z("[data-role=z-screen]");
|
||||
|
||||
//监听初始化事件、窗口变化事件和滚轮事件
|
||||
if (!Z.B.firefox)
|
||||
{//非火狐刷新时执行window.scrollTo(0, 0)后会被浏览器跳转到原来位置，所以预先scrollTo(0, 0)
|
||||
Z(window).beforeunload(this.onLoad, this);
|
||||
}
|
||||
Z(window).load(this.onLoad, this).resize(this.onResize, this);
|
||||
Z(document).mousewheel(this.onMouseWheel, this);
|
||||
|
||||
//向上按钮
|
||||
this.$up = Z('<div class="z-fixed z-w30 z-h30 z-bd-rd50p z-pointer"><i class="z-arrow z-up z-px5 z-absolute" style="margin:auto;top:0;left:0;bottom:0;right:0;"><span style="border-bottom-color:#d3d3d3"></span></i></div>');
|
||||
this.$up.appendTo("body").css({top: this.fixHeight+20, right: 20}).css({backgroundColor: "#d3d3d3", zIndex: this.zIndex})
|
||||
.click(this.onUp, this).mouseover(this.onUpMouseOver, this).mouseout(this.onUpMouseOut, this);
|
||||
|
||||
//向下按钮
|
||||
this.$down = Z('<div class="z-fixed z-w30 z-h30 z-bd-rd50p z-pointer"><i class="z-arrow z-px5 z-absolute" style="margin:auto;top:0;left:0;bottom:0;right:0;"><span style="border-top-color:#d3d3d3"></span></i></div>');
|
||||
this.$down.appendTo("body").css({bottom: 20, right: 20}).css({backgroundColor: "#d3d3d3", zIndex: this.zIndex})
|
||||
.click(this.onDown, this).mouseover(this.onDownMouseOver, this).mouseout(this.onDownMouseOut, this);
|
||||
|
||||
//初始化高度和设置滚屏高度
|
||||
this.onResize();
|
||||
},
|
||||
|
||||
onLoad: function(e)
|
||||
{//刷新时回最上面
|
||||
window.scrollTo(0, 0);
|
||||
},
|
||||
|
||||
onResize: function(e)
|
||||
{//重新设置高度和滚屏高度
|
||||
window.scrollTo(0, 0);
|
||||
this.running = false;
|
||||
this.height = Z.D.clientHeight() - this.fixHeight;
|
||||
this.$screen.css("height", this.height);
|
||||
this.maxHeight = Z.D.scrollHeight() - Z.D.clientHeight();
|
||||
this.$up.hide();
|
||||
},
|
||||
|
||||
onUpMouseOver: function(e)
|
||||
{
|
||||
this.$up.css("backgroundColor", "#333")
|
||||
.find("i").css("borderBottomColor", "#fff")
|
||||
.find("span").css("borderBottomColor", "#333");
|
||||
},
|
||||
|
||||
onUpMouseOut: function(e)
|
||||
{
|
||||
this.$up.css("backgroundColor", "#d3d3d3")
|
||||
.find("i").css("borderBottomColor", "#000")
|
||||
.find("span").css("borderBottomColor", "#d3d3d3");
|
||||
},
|
||||
|
||||
onDownMouseOver: function(e)
|
||||
{
|
||||
this.$down.css("backgroundColor", "#333")
|
||||
.find("i").css("borderTopColor", "#fff")
|
||||
.find("span").css("borderTopColor", "#333");
|
||||
},
|
||||
|
||||
onDownMouseOut: function(e)
|
||||
{
|
||||
this.$down.css("backgroundColor", "#d3d3d3")
|
||||
.find("i").css("borderTopColor", "#000")
|
||||
.find("span").css("borderTopColor", "#d3d3d3");
|
||||
},
|
||||
|
||||
onUp: function()
|
||||
{//点击向上按钮
|
||||
if (this.running)
|
||||
return;
|
||||
|
||||
this.running = true;
|
||||
this.scrollTo(false);
|
||||
},
|
||||
|
||||
onDown: function()
|
||||
{//点击向下按钮
|
||||
if (this.running)
|
||||
return;
|
||||
|
||||
this.running = true;
|
||||
this.scrollTo(true);
|
||||
},
|
||||
|
||||
onMouseWheel: function(e)
|
||||
{//滚动滚轮
|
||||
Z.E.forbidden(e);
|
||||
if (this.running)
|
||||
return;
|
||||
|
||||
this.running = true;
|
||||
this.scrollTo(Z.E.wheelDelta(e) < 0);
|
||||
},
|
||||
|
||||
scrollTo: function(down)
|
||||
{//滚动操作
|
||||
var curHeight = Z.D.scrollTop();
|
||||
|
||||
var index = 1;var endHeight, midHeight;
|
||||
if (down)
|
||||
{//向下
|
||||
if (this.maxHeight <= curHeight){
|
||||
this.running = false;
|
||||
return;
|
||||
}
|
||||
|
||||
endHeight = curHeight + this.height;
|
||||
|
||||
midHeight = Math.floor(this.height / this.times);
|
||||
Z.timer(this.speed, this.times, this,
|
||||
function(){window.scrollTo(0, curHeight + midHeight * index++);},
|
||||
function(){window.scrollTo(0, endHeight);this.running=false;}
|
||||
);
|
||||
|
||||
if (curHeight >= this.maxHeight - this.height)
|
||||
this.$down.fadeOut(this.speed * this.times);
|
||||
|
||||
if (curHeight == 0)
|
||||
this.$up.fadeIn(this.speed * this.times);
|
||||
}
|
||||
else
|
||||
{//向上
|
||||
if (curHeight <= 0){
|
||||
this.running = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.maxHeight == curHeight)
|
||||
{
|
||||
endHeight = Math.floor(curHeight / this.height) * this.height;
|
||||
this.$down.fadeIn(this.speed * this.times);
|
||||
}
|
||||
else
|
||||
{
|
||||
endHeight = curHeight - this.height;
|
||||
}
|
||||
|
||||
midHeight = (curHeight - endHeight) / this.times;
|
||||
Z.timer(this.speed, this.times, this,
|
||||
function(){window.scrollTo(0, curHeight - midHeight * index++);},
|
||||
function(){window.scrollTo(0, endHeight);this.running=false;}
|
||||
);
|
||||
|
||||
if (endHeight <= 0)
|
||||
this.$up.fadeOut(this.speed * this.times);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Z.ScrollScreen.onload = function(f)
|
||||
{//增加滚屏加载，当本JS加载完成之后才加载函数
|
||||
Z.onload(f);
|
||||
};
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,413 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{
|
||||
/****************************************/
|
||||
//“轮播图”
|
||||
/****************************************/
|
||||
// 1、配置举例：
|
||||
// <ul id="zoomSlider">
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// <li><img src="https://www.zhiqim.com/document/inc/www/tutorial/guest.jpg"></li>
|
||||
// </ul>
|
||||
//
|
||||
// <script>
|
||||
// var newZslider = new Z.Zslider();
|
||||
// newZslider.elem = Z("#zoomSlider"); // 列表对象
|
||||
// newZslider.width = -1; // 容器宽度，默认为 -1，动态计算
|
||||
// newZslider.hasBtn = true; // 左右按钮是否显示，默认为 true
|
||||
// newZslider.slideStyle = "slide"; // 播放类型：slide（滑动）fade（渐显），默认为 slide
|
||||
// newZslider.tabStyle = "disc"; // tab 菜单类型：disc（实心圆点）circle（空心圆）square（实心方块），默认为 disc
|
||||
// newZslider.tabEvent = "click"; // tab 菜单触发方式：click（点击）hover（悬浮），默认为 click
|
||||
// newZslider.execute();
|
||||
// </script>
|
||||
|
||||
Z.Zslider = Z.Class.newInstance();
|
||||
Z.Zslider.prototype =
|
||||
{
|
||||
//start of Z.Zslider.prototype
|
||||
defaults:
|
||||
{//定义
|
||||
elem: null, // 列表对象
|
||||
width: 0, // 容器宽度
|
||||
height: 300, // 容器高度
|
||||
|
||||
hasBtn: true, // 左右按钮是否显示，默认为 true
|
||||
doResize: false, // 是否自适应缩放
|
||||
slideStyle: "slide", // 播放类型：slide（滑动）fade（渐显），默认为 slide
|
||||
tabStyle: "disc", // tab 菜单类型：disc（实心圆点）circle（空心圆）square（实心方块），默认为 disc
|
||||
tabEvent: "click", // tab 菜单触发方式：click（点击）hover（悬浮）
|
||||
|
||||
playGapless: true, // 无缝轮播
|
||||
playAuto: true, // 设定自动滚动
|
||||
playSpeed: 4000, // 播放间隔
|
||||
playDuration: 800, // 动画时长
|
||||
},
|
||||
init: function()
|
||||
{//初始化
|
||||
},
|
||||
validate: function()
|
||||
{//验证参数
|
||||
this.$ul = Z.$elem(this.elem, "Z.Zslider");
|
||||
|
||||
if (!Z.AR.contains(["slide", "fade"], this.slideStyle))
|
||||
return false;
|
||||
|
||||
if (!Z.AR.contains(["disc", "circle", "square"], this.tabStyle))
|
||||
return false;
|
||||
|
||||
if (!Z.AR.contains(["click", "hover"], this.tabEvent))
|
||||
return false;
|
||||
|
||||
return true;
|
||||
},
|
||||
execute: function()
|
||||
{//执行
|
||||
//1：检验、设置参数
|
||||
if (!this.validate())
|
||||
return;
|
||||
|
||||
|
||||
this.height = this.getRectSize(this.height, this.$ul.offsetHeight());
|
||||
if (this.width)
|
||||
{
|
||||
this.doResize = false;
|
||||
this.width = this.getRectSize(this.width, this.$ul.offsetWidth());
|
||||
} else {
|
||||
this.width = Math.round(this.$ul.offsetWidth());
|
||||
}
|
||||
|
||||
if (this.playSpeed < this.playDuration){
|
||||
this.playSpeed = this.playDuration;
|
||||
}
|
||||
|
||||
if (!this.width || !this.height)
|
||||
return Z.alert("[Z.Zslider]参数[width][height]设置有误！");
|
||||
|
||||
//2：重新组装排版
|
||||
var wrapHtml = '<div class="z-slider z-relative" style="width:'+this.width+'px;height:'+this.height+'px;">';
|
||||
wrapHtml += '<div class="z-sliderList z-absolute z-w100p z-h100p z-overflow-hidden"></div>';
|
||||
wrapHtml += '<div class="z-sliderTab z-sliderTab-'+this.tabStyle+' z-w100p z-h0 z-absolute z-l0 z-b0 z-text-center"></div>';
|
||||
wrapHtml += '</div>';
|
||||
|
||||
this.$wrap = Z(wrapHtml).insertAfter(this.$ul);
|
||||
this.$list = this.$wrap.find(".z-sliderList").append(this.$ul);
|
||||
this.$$items = this.$ul.find("li");
|
||||
this.$tab = this.$wrap.find(".z-sliderTab");
|
||||
|
||||
this.length = this.$$items.length;
|
||||
|
||||
//3：左右操作按钮
|
||||
if (this.hasBtn){
|
||||
var btnHtml = '<div class="z-sliderBtn z-w100p z-h0 z-absolute z-l0 z-text-center">';
|
||||
btnHtml += '<div class="z-sliderBtn-prev z-absolute z-l0 z-t0 z-w60 z-h100 z-pointer">';
|
||||
btnHtml += '<i class="z-font z-text-gray z-arrowhead-left z-absolute z-l0 z-r0 z-mg-lr-auto"></i>';
|
||||
btnHtml += '</div>';
|
||||
btnHtml += '<div class="z-sliderBtn-next z-absolute z-r0 z-t0 z-w60 z-h100 z-pointer">';
|
||||
btnHtml += '<i class="z-font z-text-gray z-arrowhead-right z-absolute z-l0 z-r0 z-mg-lr-auto"></i>';
|
||||
btnHtml += '</div>';
|
||||
btnHtml += '</div>';
|
||||
this.$btn = Z(btnHtml).appendTo(this.$wrap);
|
||||
this.$btn.find(".z-sliderBtn-prev").on("click", this.sliderPrev, this);
|
||||
this.$btn.find(".z-sliderBtn-next").on("click", this.sliderNext, this);
|
||||
}
|
||||
|
||||
//4：底部导航 tab 按钮
|
||||
var tabsHtml = "";
|
||||
var i = 0;
|
||||
for (i;i < this.length;i++){
|
||||
tabsHtml += '<div></div>';
|
||||
}
|
||||
this.$tab[0].insertAdjacentHTML("beforeend",tabsHtml);
|
||||
this.$$tabs = this.$tab.find("div");
|
||||
Z(this.$$tabs[0]).addClass("z-active");
|
||||
|
||||
//5：list 样式
|
||||
if (this.slideStyle === "slide")
|
||||
{//滑动处理
|
||||
this.$ul.css("width", this.length * this.width).css("transition-duration",this.playDuration+"ms");
|
||||
var $item;
|
||||
for (i = 0;i < this.length;i++)
|
||||
{
|
||||
$item = this.$$items[i];
|
||||
Z($item).css({
|
||||
"width": this.width,
|
||||
"transform": "translate3d(" + i * this.width + "px,0,0)"
|
||||
});
|
||||
if (i === 0){
|
||||
this.$firstClone = Z($item.cloneNode("deep")).css("transform","translate3d(" + this.length * this.width + "px,0,0)");
|
||||
}
|
||||
if (i === this.length - 1){
|
||||
this.$lastClone = Z($item.cloneNode("deep")).css("transform","translate3d(-" + this.width + "px,0,0)");
|
||||
}
|
||||
}
|
||||
|
||||
//插入克隆体
|
||||
this.$firstClone.appendTo(this.$ul);
|
||||
this.$lastClone.appendTo(this.$ul);
|
||||
|
||||
//滑动结束，判断是否可滑动
|
||||
this.$ul.on(this.transitionFixed(), this.slideEnd, this);
|
||||
}
|
||||
else if (this.slideStyle === "fade")
|
||||
{//渐显处理
|
||||
this.$$items.css("top","0").css("transition-property","opacity,top");
|
||||
Z(this.$$items[0]).css("opacity",1).siblings("li").css("opacity",0).addClass("z-hide");
|
||||
|
||||
//渐隐结束，隐藏该元素
|
||||
this.$$items.on(this.transitionFixed(), this.fadeEnd, this);
|
||||
}
|
||||
this.$$items.css("transition-duration",this.playDuration+"ms");
|
||||
Z(this.$$items[0]).addClass("z-active");
|
||||
|
||||
//6：绑定事件
|
||||
var tabEvent = (this.tabEvent === "click")?"click":"mouseenter";
|
||||
this.$$tabs.on(tabEvent, this.tabTrigger, this);
|
||||
this.$wrap.on("mouseenter", this.wrapEnter, this);
|
||||
this.$wrap.on("mouseleave", this.wrapLeave, this);
|
||||
if (this.doResize)
|
||||
Z(window).on('resize', this.resize, this);
|
||||
|
||||
//7：开始执行动画
|
||||
this.autoPlay();
|
||||
},
|
||||
autoPlay: function()
|
||||
{//自动播放
|
||||
if(this.playAuto && !this.playAutoTimer)
|
||||
this.playAutoTimer = setInterval(this.sliderNext, this.playSpeed, null, this);
|
||||
},
|
||||
wrapEnter: function()
|
||||
{
|
||||
if(this.$btn){
|
||||
this.$btn.addClass("z-active");
|
||||
}
|
||||
//清除自动
|
||||
clearInterval(this.playAutoTimer);
|
||||
this.playAutoTimer = null;
|
||||
},
|
||||
wrapLeave: function()
|
||||
{
|
||||
if(this.$btn){
|
||||
this.$btn.removeClass("z-active");
|
||||
}
|
||||
this.autoPlay();
|
||||
},
|
||||
sliderNext: function(event, thisObj)
|
||||
{//后一个展示
|
||||
thisObj = thisObj || this;
|
||||
thisObj.sliderPlay(1);
|
||||
},
|
||||
sliderStay: function ()
|
||||
{//保持展示
|
||||
this.sliderPlay(0);
|
||||
},
|
||||
sliderPrev: function()
|
||||
{//前一个展示
|
||||
this.sliderPlay(-1);
|
||||
},
|
||||
sliderPlay: function(step)
|
||||
{//播放方法
|
||||
if (this.sliding){
|
||||
return;
|
||||
}
|
||||
this[this.slideStyle+"ToPlay"](step);
|
||||
},
|
||||
slideToPlay: function(step)
|
||||
{//滑动方法
|
||||
this.sliding = true;
|
||||
|
||||
step = +step;
|
||||
var $activeItem = this.$ul.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
$activeItem.removeClass("z-active");
|
||||
|
||||
//即将展示对象的索引值
|
||||
var shouldIndex = activeIndex + step;
|
||||
if (shouldIndex >= this.length) shouldIndex = 0;
|
||||
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
||||
|
||||
//定义定位
|
||||
var $shouldActive = Z(this.$$items[shouldIndex]);
|
||||
var ulTrans = -shouldIndex * this.width;
|
||||
|
||||
//逐步滚动 |step| = 1 到边缘时，实现无缝滚动
|
||||
if (this.playGapless)
|
||||
{
|
||||
if (step === 1 && shouldIndex === 0) {
|
||||
$shouldActive = this.$firstClone;
|
||||
ulTrans = -this.length * this.width;
|
||||
}
|
||||
if (step === -1 && shouldIndex === this.length - 1) {
|
||||
$shouldActive = this.$lastClone;
|
||||
ulTrans = this.width;
|
||||
}
|
||||
}
|
||||
// 新定位
|
||||
this.$ul.css("transform", "translate3d("+ulTrans+"px,0,0)");
|
||||
if (this.$ul.css("transition-property") === "none"){
|
||||
this.$ul.css("transition-property", "transform");
|
||||
}
|
||||
$shouldActive.addClass("z-active");
|
||||
|
||||
//tab 展示
|
||||
Z(this.$$tabs[shouldIndex]).addClass("z-active").siblings("div").removeClass("z-active");
|
||||
},
|
||||
fadeToPlay: function(step)
|
||||
{//渐显方法
|
||||
step = +step;
|
||||
var $activeItem = this.$ul.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
$activeItem.removeClass("z-active").css("opacity",0).css("top",-10);
|
||||
|
||||
var shouldIndex = activeIndex + step;
|
||||
if (shouldIndex >= this.length) shouldIndex = 0;
|
||||
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
||||
var $shouldActive = Z(this.$$items[shouldIndex]);
|
||||
$shouldActive.removeClass("z-hide").addClass("z-active").css("opacity",1);
|
||||
|
||||
//tab 展示
|
||||
Z(this.$$tabs[shouldIndex]).addClass("z-active").siblings("div").removeClass("z-active");
|
||||
},
|
||||
fadeEnd: function(ev)
|
||||
{
|
||||
var $thisItem = Z(Z.E.current(ev));
|
||||
if (!$thisItem.hasClass("z-active")){
|
||||
$thisItem.addClass("z-hide").css("top",0);
|
||||
}
|
||||
},
|
||||
slideEnd: function(ev)
|
||||
{
|
||||
//判断是否处于 list 边缘
|
||||
var $activeItem = this.$ul.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
if (activeIndex > -1){
|
||||
return this.sliding = false;
|
||||
}
|
||||
$activeItem.removeClass("z-active");
|
||||
//无缝播放
|
||||
if (this.playGapless)
|
||||
{
|
||||
this.$ul.css("transition-property","none");
|
||||
if ($activeItem[0] === this.$firstClone[0]){
|
||||
this.$ul.css("transform","translate3d(0,0,0)");
|
||||
Z(this.$$items[0]).addClass("z-active");
|
||||
}
|
||||
if ($activeItem[0] === this.$lastClone[0]){
|
||||
this.$ul.css("transform","translate3d(-"+(this.length - 1) * this.width+"px,0,0)");
|
||||
Z(this.$$items[this.length - 1]).addClass("z-active");
|
||||
}
|
||||
}
|
||||
this.sliding = false;
|
||||
},
|
||||
tabTrigger: function(ev)
|
||||
{//tab 触发
|
||||
var $activeTab = this.$tab.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$tabs, $activeTab[0]);
|
||||
|
||||
var $shouldTab = Z(Z.E.current(ev));
|
||||
var shouldIndex = Z.AR.indexOf(this.$$tabs, $shouldTab[0]);
|
||||
|
||||
var step = shouldIndex - activeIndex;
|
||||
this.sliderPlay(step);
|
||||
},
|
||||
resize: function()
|
||||
{
|
||||
// 停止自动播放
|
||||
this.sliding = true;
|
||||
if (this.playAutoTimer)
|
||||
{
|
||||
clearInterval(this.playAutoTimer);
|
||||
this.playAutoTimer = null;
|
||||
}
|
||||
|
||||
// 设置延迟，自动播放
|
||||
if (!this.resizeStep)
|
||||
this.resizeStep = 0;
|
||||
this.resizeStep++;
|
||||
if (this.delayAutoPlay)
|
||||
clearTimeout(this.delayAutoPlay);
|
||||
this.delayAutoPlay = setTimeout(this.delayResize, this.playDuration, this, this.resizeStep);
|
||||
|
||||
// 重置大小
|
||||
this.$wrap.css('width', 'auto');
|
||||
this.width = this.$wrap.offsetWidth();
|
||||
this.$wrap.css({
|
||||
"width": this.width,
|
||||
});
|
||||
this.$ul.css("width", this.length * this.width);
|
||||
this.$ul.find('li').css('width', this.width);
|
||||
for (var i = 0;i < this.length;i++) {
|
||||
Z(this.$$items[i]).css({"transform": "translate3d(" + i * this.width + "px,0,0)"});
|
||||
}
|
||||
this.$firstClone.css({"transform": "translate3d(" + this.length * this.width + "px,0,0)"});
|
||||
this.$lastClone.css({"transform":"translate3d(-" + this.width + "px,0,0)"});
|
||||
|
||||
// 定位当前
|
||||
var $activeItem = this.$ul.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
var ulTrans = -activeIndex * this.width;
|
||||
this.$ul.css("transform", "translate3d("+ ulTrans +"px,0,0)");
|
||||
},
|
||||
delayResize: function(thisObj, resizeStep)
|
||||
{
|
||||
clearTimeout(thisObj.delayAutoPlay);
|
||||
if (resizeStep !== thisObj.resizeStep)
|
||||
return;
|
||||
|
||||
thisObj.resizeStep = null;
|
||||
thisObj.autoPlay();
|
||||
},
|
||||
transitionFixed: function()
|
||||
{//兼容写法
|
||||
var $div = document.createElement('div');
|
||||
if ($div.style["transition"] !== undefined ){
|
||||
$div = null;
|
||||
return "transitionend";
|
||||
}
|
||||
if ($div.style["OTransition"] !== undefined ){
|
||||
$div = null;
|
||||
return "oTransitionEnd";
|
||||
}
|
||||
if ($div.style["WebkitTransition"] !== undefined ){
|
||||
$div = null;
|
||||
return "webkitTransitionEnd";
|
||||
}
|
||||
},
|
||||
|
||||
getRectSize: function(val, all)
|
||||
{
|
||||
if (/^\d+(\.\d+)?%$/.test(val))
|
||||
{
|
||||
val = parseFloat(val) / 100 * all;
|
||||
}
|
||||
else
|
||||
{
|
||||
val = parseFloat(val) || all;
|
||||
if (val < 0)
|
||||
val = all;
|
||||
}
|
||||
return Math.round(val);
|
||||
},
|
||||
//end of Z.Zslider.prototype
|
||||
}
|
||||
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,322 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
|
||||
+(function(Z)
|
||||
{
|
||||
|
||||
/****************************************/
|
||||
//“轮播图”
|
||||
/****************************************/
|
||||
Z.ZmSlider = Z.Class.newInstance();
|
||||
Z.ZmSlider.prototype =
|
||||
{
|
||||
//start of Z.ZmSlider.prototype
|
||||
defaults:
|
||||
{//定义
|
||||
elem: '', // 主容器
|
||||
rectRatio: 2, // 宽度比例
|
||||
playAuto: true, // 设定自动滚动
|
||||
playSpeed: 2000, // 播放间隔
|
||||
transDur: 300, // 动画时长
|
||||
transFun: "ease", // 动画轨迹
|
||||
},
|
||||
init: function()
|
||||
{//初始化
|
||||
},
|
||||
execute: function()
|
||||
{//执行
|
||||
//1：重新组装排版
|
||||
this.$touch = Z.$elem(this.elem, "Z.ZmSlider").addClass("z-slider-touch");
|
||||
|
||||
this.$wrap = Z('<div class="z-slider z-bg-gray z-text-center"></div>').insertAfter(this.$touch);
|
||||
this.$wrap.append(this.$touch);
|
||||
this.$tab = Z('<div class="z-slider-tab"></div>').appendTo(this.$wrap);
|
||||
this.$$items = this.$touch.children("li");
|
||||
|
||||
//2：基本参数
|
||||
this.width = this.$wrap.offsetWidth();
|
||||
this.height = this.width/this.rectRatio;
|
||||
this.length = this.$$items.length;
|
||||
if (this.rectRatio < 0){
|
||||
this.rectRatio = 2;
|
||||
}
|
||||
if (this.playSpeed < this.transDur){
|
||||
this.playSpeed = this.transDur;
|
||||
}
|
||||
|
||||
//3：插入展示按钮html
|
||||
var btnsHtml = "";
|
||||
for(var i = 0;i < this.length;i++){
|
||||
btnsHtml += '<span></span>';
|
||||
}
|
||||
this.$tab.html(btnsHtml);
|
||||
this.$$tabs = this.$tab.children("span");
|
||||
|
||||
//4：初始化样式、位置
|
||||
this.$wrap.css("height",this.height);
|
||||
|
||||
if (this.length <= 1)
|
||||
{/*一张图片时*/
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.length == 2)
|
||||
{/*两个滚动素材的情况*/
|
||||
this.$touch.css("transition-timing-function",this.transFun).css("transition-duration",this.transDur+"ms")
|
||||
.css("transform","translate3d(0,0,0)");
|
||||
|
||||
Z(this.$$items[0]).css("transform","translate3d(0,0,0)").addClass("z-active");
|
||||
Z(this.$$items[1]).css("transform","translate3d("+this.width+"px,0,0)");
|
||||
|
||||
//要实现无缝滚动，需复制节点
|
||||
this.$firstClone = Z(this.$$items[0].cloneNode(true)).appendTo(this.$touch);
|
||||
this.$lastClone = Z(this.$$items[1].cloneNode(true)).appendTo(this.$touch);
|
||||
this.$firstClone.css("transform","translate3d("+2*this.width+"px,0,0)");
|
||||
this.$lastClone.css("transform","translate3d(-"+this.width+"px,0,0)");
|
||||
|
||||
//动画结束，位置调整
|
||||
this.$touch.on(this.transitionFixed(), this.doubleSlideEnd, this);
|
||||
}
|
||||
else
|
||||
{/*两张以上滚动素材的情况*/
|
||||
this.$$items.css("transition-timing-function",this.transFun).css("transition-duration",this.transDur+"ms");
|
||||
var that = this;
|
||||
Z.each(this.$$items, function($item,index){
|
||||
var translateX = index * that.width + "px";
|
||||
if (index == 0) {
|
||||
Z($item).addClass("z-active");
|
||||
}
|
||||
if (index == that.length - 1) {
|
||||
translateX = -that.width + "px";
|
||||
}
|
||||
Z($item).css("transform","translate3d("+translateX+",0,0)");
|
||||
});
|
||||
}
|
||||
Z(this.$$tabs[0]).addClass("z-active");
|
||||
|
||||
//5：滑动事件绑定
|
||||
this.touchmoving = false;
|
||||
this.$touch.on("touchstart",this.touchStart,this);
|
||||
this.$touch.on("touchmove",this.touchMove,this);
|
||||
this.$touch.on("touchend",this.touchEnd,this);
|
||||
|
||||
//6：开始执行动画
|
||||
this.autoPlay();
|
||||
},
|
||||
autoPlay: function()
|
||||
{
|
||||
if(this.playAuto){
|
||||
var that = this;
|
||||
that.timer = setInterval(function(){
|
||||
that.sliderNext(that);
|
||||
},that.playSpeed);
|
||||
}
|
||||
},
|
||||
touchStart:function(ev)
|
||||
{//触摸事件开始
|
||||
Z.E.forbidden(ev);
|
||||
var touch = ev.touches[0];
|
||||
this.touchStartX = touch.pageX;
|
||||
|
||||
//清除自动
|
||||
clearInterval(this.timer);
|
||||
|
||||
//两个滚动素材的情况
|
||||
if (this.length == 2){
|
||||
var step = +step;
|
||||
var $activeItem = this.$touch.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
this.touchBase = -activeIndex*this.width;
|
||||
this.$touch.css("transition-property","none");
|
||||
return;
|
||||
}
|
||||
|
||||
//当前、前一个、后一个
|
||||
this.$activeItem = this.$touch.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, this.$activeItem[0]);
|
||||
this.$activeNext = Z(this.$$items[activeIndex + 1] || this.$$items[0]);
|
||||
this.$activePrev = Z(this.$$items[activeIndex - 1] || this.$$items[this.length - 1]);
|
||||
|
||||
//清除transition
|
||||
this.$activeItem.css("transition-duration","0ms");
|
||||
this.$activeNext.css("transition-duration","0ms");
|
||||
this.$activePrev.css("transition-duration","0ms");
|
||||
},
|
||||
touchMove: function(ev)
|
||||
{//滑动中
|
||||
if(this.touchmoving == false){
|
||||
this.touchmoving = true;
|
||||
}
|
||||
Z.E.forbidden(ev);
|
||||
var touch = ev.touches[0];
|
||||
this.touchMoveX = touch.pageX;
|
||||
|
||||
//设置translate
|
||||
var metabolicX = this.touchMoveX - this.touchStartX;
|
||||
|
||||
//两个滚动素材的情况
|
||||
if (this.length == 2){
|
||||
this.$touch.css("transform","translate3d("+(metabolicX+this.touchBase)+"px,0,0)");
|
||||
return;
|
||||
}
|
||||
|
||||
this.$activeItem.css("transform","translate3d("+metabolicX+"px,0,0)");
|
||||
this.$activeNext.css("transform","translate3d("+(metabolicX + this.width)+"px,0,0)");
|
||||
this.$activePrev.css("transform","translate3d("+(metabolicX - this.width)+"px,0,0)");
|
||||
},
|
||||
touchEnd: function(ev)
|
||||
{//触摸事件结束
|
||||
if (this.touchmoving == false){
|
||||
return;
|
||||
}
|
||||
this.touchmoving = false;
|
||||
Z.E.forbidden(ev);
|
||||
|
||||
//执行自动
|
||||
this.autoPlay();
|
||||
|
||||
//判断滑动结果
|
||||
var metabolicX = this.touchMoveX - this.touchStartX;
|
||||
|
||||
if (metabolicX == 0 || Math.abs(metabolicX) < this.width/2){
|
||||
this.sliderStay();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.$activeItem) this.$activeItem.css("transition-duration",this.transDur+"ms");
|
||||
if (metabolicX < 0){
|
||||
if (this.$activeNext) this.$activeNext.css("transition-duration",this.transDur+"ms");
|
||||
this.sliderNext();
|
||||
} else {
|
||||
if (this.$activePrev) this.$activePrev.css("transition-duration",this.transDur+"ms");
|
||||
this.sliderPrev();
|
||||
}
|
||||
},
|
||||
sliderNext: function()
|
||||
{//后一个展示
|
||||
if (this.length == 2){
|
||||
this.doubleSlide(1);
|
||||
return;
|
||||
}
|
||||
this.sliderPlay(1);
|
||||
},
|
||||
sliderStay: function ()
|
||||
{//保持展示
|
||||
if (this.length == 2){
|
||||
this.doubleSlide(0);
|
||||
return;
|
||||
}
|
||||
this.sliderPlay(0);
|
||||
},
|
||||
sliderPrev: function()
|
||||
{//前一个展示
|
||||
if (this.length == 2){
|
||||
this.doubleSlide(-1);
|
||||
return;
|
||||
}
|
||||
this.sliderPlay(-1);
|
||||
},
|
||||
sliderPlay: function(step)
|
||||
{//滑动方法
|
||||
var step = +step;
|
||||
var $activeItem = this.$touch.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
$activeItem.removeClass("z-active");
|
||||
|
||||
//即将展示对象的索引值
|
||||
var shouldIndex = activeIndex + step;
|
||||
if (shouldIndex >= this.length) shouldIndex = 0;
|
||||
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
||||
|
||||
//即将新定位的active，以及前后两个
|
||||
var $shouldActive = Z(this.$$items[shouldIndex]);
|
||||
var $shouldNext = Z(this.$$items[shouldIndex + 1] || this.$$items[0]);
|
||||
var $shouldPrev = Z(this.$$items[shouldIndex - 1] || this.$$items[this.length - 1]);
|
||||
|
||||
//touch item新定位
|
||||
$shouldActive.addClass("z-active").css("transform","translate3d(0,0,0)")
|
||||
.css("transition-duration",this.transDur+"ms");
|
||||
$shouldNext.css("transform","translate3d("+this.width+"px,0,0)");
|
||||
$shouldPrev.css("transform","translate3d(-"+this.width+"px,0,0)");
|
||||
|
||||
//前后两个判断是否动画
|
||||
var nextDur = prevDur = this.transDur+"ms";
|
||||
if (step > 0){ nextDur = "0ms";}
|
||||
else if(step < 0){ prevDur = "0ms";}
|
||||
$shouldNext.css("transition-duration",nextDur);
|
||||
$shouldPrev.css("transition-duration",prevDur);
|
||||
|
||||
//btn 展示
|
||||
Z(this.$$tabs[shouldIndex]).addClass("z-active")
|
||||
.siblings("span").removeClass("z-active");
|
||||
},
|
||||
doubleSlide: function(step)
|
||||
{//两个滚动素材的动画
|
||||
var step = +step;
|
||||
var $activeItem = this.$touch.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
$activeItem.removeClass("z-active");
|
||||
|
||||
var num = shouldIndex = activeIndex + step;
|
||||
if (shouldIndex >= this.length) shouldIndex = 0;
|
||||
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
||||
Z(this.$$items[shouldIndex]).addClass("z-active");
|
||||
|
||||
this.$touch.css("transform", "translate3d("+(-num*this.width)+"px,0,0)")
|
||||
.css("transition-property","transform");
|
||||
|
||||
//btn 展示
|
||||
Z(this.$$tabs[shouldIndex]).addClass("z-active")
|
||||
.siblings("span").removeClass("z-active");
|
||||
},
|
||||
doubleSlideEnd: function()
|
||||
{//两图片的滚动结束
|
||||
var $activeItem = this.$touch.find(".z-active");
|
||||
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
||||
this.$touch.css("transition-property","none");
|
||||
if(activeIndex == 0){
|
||||
this.$touch.css("transform", "translate3d(0,0,0)");
|
||||
}
|
||||
if(activeIndex == 1){
|
||||
this.$touch.css("transform", "translate3d("+(-this.width)+"px,0,0)");
|
||||
}
|
||||
},
|
||||
transitionFixed: function()
|
||||
{//兼容写法
|
||||
var $div = document.createElement('div');
|
||||
if ($div.style["transition"] !== undefined ){
|
||||
$div = null;
|
||||
return "transitionend";
|
||||
}
|
||||
if ($div.style["OTransition"] !== undefined ){
|
||||
$div = null;
|
||||
return "oTransitionEnd";
|
||||
}
|
||||
if ($div.style["WebkitTransition"] !== undefined ){
|
||||
$div = null;
|
||||
return "webkitTransitionEnd";
|
||||
}
|
||||
},
|
||||
//end of Z.ZmSlider.prototype
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
@@ -0,0 +1,272 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
|
||||
+(function(Z)
|
||||
{
|
||||
//BEGIN
|
||||
|
||||
/**
|
||||
* WebGL+three.js 3D动画，当前有波浪和光线球两种
|
||||
*/
|
||||
Z.WebGLThree = Z.Class.newInstance();
|
||||
Z.WebGLThree.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
//常量
|
||||
SEPARATION: 125,
|
||||
AMOUNTX: 35,
|
||||
AMOUNTY: 35,
|
||||
|
||||
//传入参数
|
||||
threePath: null,
|
||||
target: null,
|
||||
|
||||
//内部对象
|
||||
camera: null,
|
||||
scene: null,
|
||||
renderer: null,
|
||||
particles_ware: [],
|
||||
particles_globe: [],
|
||||
|
||||
//运行时
|
||||
count: 0,
|
||||
mouseX: 0,
|
||||
mouseY: 0,
|
||||
windowHalfX: window.innerWidth / 2,
|
||||
windowHalfY: window.innerHeight / 2,
|
||||
rotation_speed: .002,
|
||||
timeout: null
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{
|
||||
if (Z.B.mobile || Z.B.msieVer <= 9)
|
||||
{//移动端和IE9以下不支持
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.threePath == null || this.target == null)
|
||||
{//两个参数必须
|
||||
return;
|
||||
}
|
||||
|
||||
if (Z.Types.isString(this.target))
|
||||
this.target = Z("#"+this.target);
|
||||
else if (Z.Types.isElement(this.target))
|
||||
this.target = Z(this.target);
|
||||
else
|
||||
return;
|
||||
|
||||
//先加载three.js，再初始化init
|
||||
Z.loads(this.threePath, Z.bind(this.initWebGL, this));
|
||||
},
|
||||
|
||||
initWebGL: function()
|
||||
{
|
||||
var animationType = Math.floor(2 * Math.random());
|
||||
if (animationType == 0)
|
||||
{//波浪
|
||||
this.initWave();
|
||||
this.animateWave();
|
||||
}
|
||||
else
|
||||
{//光球
|
||||
this.initGlobe();
|
||||
this.animateGlobe();
|
||||
}
|
||||
|
||||
//增加事件处理
|
||||
Z(document).mousemove(this.onDocumentMouseMove, this)
|
||||
.on("touchstart", this.onDocumentTouchStart, this)
|
||||
.on("touchmove", this.onDocumentTouchMove, this);
|
||||
Z(window).resize(this.onWindowResize, this);
|
||||
},
|
||||
|
||||
/******************************************************************************************/
|
||||
//光球
|
||||
/******************************************************************************************/
|
||||
initGlobe: function initGlobe()
|
||||
{
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4),
|
||||
this.camera.position.z = 500,
|
||||
this.scene = new THREE.Scene;
|
||||
|
||||
for (var t = 2 * Math.PI, i = function (e) {e.beginPath(), e.arc(0, 0, 25, 0, t, true), e.fill()}, t = 2 * Math.PI, n = 0; 500 > n; n++)
|
||||
{
|
||||
var o = new THREE.SpriteCanvasMaterial({color: 16777215,
|
||||
transparent: true,
|
||||
program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
|
||||
var particle = new THREE.Sprite(o);
|
||||
particle.position.x = 2 * Math.random() - 1;
|
||||
particle.position.y = 2 * Math.random() - 1;
|
||||
particle.position.z = 2 * Math.random() - 1;
|
||||
particle.position.normalize();
|
||||
particle.position.multiplyScalar(10 * Math.random() + 450);
|
||||
particle.scale.multiplyScalar(4 + 2 * Math.random());
|
||||
particle.material.opacity = .1;
|
||||
this.scene.add(particle);
|
||||
this.particles_globe.push(particle);
|
||||
}
|
||||
for (var n = 0; 500 > n; n++)
|
||||
{
|
||||
var s = new THREE.Geometry;
|
||||
var r = new THREE.Vector3(2 * Math.random() - 1, 2 * Math.random() - 1, 2 * Math.random() - 1);
|
||||
r.normalize();
|
||||
r.multiplyScalar(450);
|
||||
s.vertices.push(r);
|
||||
|
||||
var a = r.clone();
|
||||
a.multiplyScalar(.3 * Math.random() + 1), s.vertices.push(a);
|
||||
var l = new THREE.Line(s, new THREE.LineBasicMaterial({color: 16777215, opacity: .3}));
|
||||
this.scene.add(l)
|
||||
}
|
||||
this.renderer = new THREE.CanvasRenderer({alpha: true});
|
||||
this.renderer.setClearColor(0, 0);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.target.append(this.renderer.domElement)
|
||||
},
|
||||
|
||||
animateGlobe: function()
|
||||
{
|
||||
requestAnimationFrame(Z.bind(this.animateGlobe, this));
|
||||
this.renderGlobe();
|
||||
},
|
||||
|
||||
renderGlobe: function()
|
||||
{
|
||||
var e = Z("body:hover"), t = this.camera.position.x, i = this.camera.position.y, n = this.camera.position.z;
|
||||
if (e.length != 0 && this.timeout != null)
|
||||
{
|
||||
this.camera.position.x += .05 * (this.mouseX - this.camera.position.x);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.camera.position.x = t * Math.cos(this.rotation_speed) - n * Math.sin(this.rotation_speed);
|
||||
this.camera.position.z = n * Math.cos(this.rotation_speed) + t * Math.sin(this.rotation_speed);
|
||||
}
|
||||
|
||||
this.camera.position.y += .05 * (-this.mouseY + 200 - this.camera.position.y);
|
||||
this.camera.lookAt(this.scene.position);
|
||||
|
||||
Z(document).mousemove(function () {
|
||||
this.timeout !== null && clearTimeout(this.timeout), this.timeout = setTimeout(function () {this.timeout = null}, 600)
|
||||
});
|
||||
|
||||
for (var o = 0; o < this.particles_globe.length; o++)
|
||||
{
|
||||
var particle = this.particles_globe[o++];
|
||||
temp = 50 * Math.sin(.3 * (o + this.count)) + .5 * Math.sin(.5 * (o + this.count));
|
||||
opacity = Math.abs(temp) / 50 + .1;
|
||||
opacity > 1 && (opacity = 1);
|
||||
particle.material.opacity = opacity;
|
||||
}
|
||||
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.count += .1;
|
||||
},
|
||||
|
||||
/******************************************************************************************/
|
||||
//波浪
|
||||
/******************************************************************************************/
|
||||
initWave: function()
|
||||
{
|
||||
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1e4);
|
||||
this.camera.position.z = 1e3;
|
||||
this.camera.position.y = 100;
|
||||
this.camera.position.y = 1e3;
|
||||
|
||||
this.scene = new THREE.Scene;
|
||||
for (var t = 2 * Math.PI, i = 0, n = 0; this.AMOUNTX > n; n++)for (var o = 0; this.AMOUNTY > o; o++)
|
||||
{
|
||||
var s = new THREE.SpriteCanvasMaterial({color: 16777215,
|
||||
transparent: true,
|
||||
program: function (e) {e.beginPath(), e.arc(0, 0, .5, 0, t, true), e.fill()}});
|
||||
|
||||
var particle = this.particles_ware[i++] = new THREE.Sprite(s);
|
||||
particle.position.x = n * this.SEPARATION - this.AMOUNTX * this.SEPARATION / 2;
|
||||
particle.position.z = o * this.SEPARATION - this.AMOUNTY * this.SEPARATION / 2;
|
||||
this.scene.add(particle), particle.material.opacity = .4;
|
||||
}
|
||||
|
||||
this.renderer = new THREE.CanvasRenderer({alpha: true});
|
||||
this.renderer.setClearColor(0, 0);
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
this.target.append(this.renderer.domElement);
|
||||
},
|
||||
|
||||
animateWave: function()
|
||||
{
|
||||
requestAnimationFrame(Z.bind(this.animateWave, this));
|
||||
this.renderWave();
|
||||
},
|
||||
|
||||
renderWave: function()
|
||||
{
|
||||
this.camera.position.x += .01 * (this.mouseX - this.camera.position.x),
|
||||
this.camera.position.y += .005 * (this.mouseY - this.camera.position.y),
|
||||
this.camera.lookAt(this.scene.position);
|
||||
|
||||
for (var e = 0, t = 0; this.AMOUNTX > t; t++)
|
||||
{
|
||||
for (var i = 0; this.AMOUNTY > i; i++)
|
||||
{
|
||||
var particle = this.particles_ware[e++];
|
||||
particle.position.y = 50 * Math.sin(.3 * (t + this.count)) + 50 * Math.sin(.5 * (i + this.count));
|
||||
particle.scale.x = particle.scale.y = 4 * (Math.sin(.3 * (t + this.count)) + 1) + 4 * (Math.sin(.5 * (i + this.count)) + 1);
|
||||
opacity = Math.abs(particle.position.y) / 100;
|
||||
opacity < .5 && (opacity = .5);
|
||||
opacity > 1 && (opacity = 1);
|
||||
particle.material.opacity = opacity;
|
||||
}
|
||||
}
|
||||
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
this.count += .03
|
||||
},
|
||||
|
||||
/******************************************************************************************/
|
||||
//事件处理
|
||||
/******************************************************************************************/
|
||||
|
||||
onWindowResize: function()
|
||||
{//缩放
|
||||
this.windowHalfX = window.innerWidth / 2,
|
||||
this.windowHalfY = window.innerHeight / 2,
|
||||
this.camera.aspect = window.innerWidth / window.innerHeight,
|
||||
this.camera.updateProjectionMatrix(),
|
||||
this.renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
},
|
||||
|
||||
onDocumentMouseMove: function(e)
|
||||
{//鼠标移动
|
||||
this.mouseX = e.clientX - this.windowHalfX, this.mouseY = e.clientY + 150;
|
||||
},
|
||||
|
||||
onDocumentTouchStart: function(e)
|
||||
{//iOS触摸开始
|
||||
1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
|
||||
},
|
||||
|
||||
onDocumentTouchMove: function(e)
|
||||
{//iOS触摸移动
|
||||
1 === e.touches.length && (e.preventDefault(), this.mouseX = e.touches[0].pageX - this.windowHalfX, this.mouseY = -e.touches[0].pageY);
|
||||
}
|
||||
};
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
Reference in New Issue
Block a user