(JS-PHP)使用RSA算法进行加密通讯

用户名密码明文直接POST到后端,很容易被别人从监听到。注:包括使用MD5等哈希函数处理后的数据,这里也算做明文(现在MD5爆破网站已经很多了~)。对安全性要求较高的网站,比如银行和大型企业等都会使用HTTPS对其进行加密通讯。但是由于效率原因,使用HTTPS的代价是及其昂贵的,对于访问量稍大的网站就会造成严重的性能瓶颈。解决方法一般只能采用专门的SSL硬件加速设备如F5的BIGIP等。所以很多网站选择了模拟SSL的做法,使用RSA来对密码等安全信息进行公钥加密,服务端用私钥解密。

通常是对密码进行加密,具体如下:

第一步: 加载三个RSA的js库文件,可以到这里下载 http://www.ohdave.com/rsa/

20150612180052

第二步: 获取秘钥

1. 相关信息

通常情况下网站的SSL证书是由专门的CA机构(如VeriSign)颁发,同时需要交纳一定数额的费用。可是对于平时开发测试或其他情况下,我们自己也可以充当CA来生成自己颁发的证书。当然与前者相比缺点很明显:不能获得各个浏览器的信任,会弹出警告提示。不过,好消息是,对安全性要求稍低的网站现在可以考虑使用免费的CA认证(貌似是其级别最低的证书)。

跟VeriSign一样,StartSSL(网址:http://www.startssl.com,公司名:StartCom)也是一家CA机构,它的根证书很久之前就被一些具有开源背景的浏览器支持(Firefox浏览器、谷歌Chrome浏览器、苹果Safari浏览器等)。在2009年9月份,StartSSL竟然搞定了微软:微软在升级补丁中,更新了通过Windows根证书认证程序(Windows Root Certificate Program)的厂商清单,并首次将StartCom公司列入了该认证清单,这是微软首次将提供免费数字验证技术的厂商加入根证书认证列表中。现在,在Windows 7或安装了升级补丁的Windows Vista或Windows XP操作系统中,系统会完全信任由StartCom这类免费数字认证机构认证的数字证书,从而使StartSSL也得到了IE浏览器的支持。

2. 要生成获得证书所需的密钥等文件

openssl genrsa -des3 -out server.pem 1024 
openssl req -new -key server.pem -out server.csr 
openssl rsa -in server.pem -out server.pem

161344272369

使用上面的命令就会创建一个证书申请,这里我们会要求输入国家、组织、姓名等信息,但是不会要求输入证书有效天数,因为证书有效天数是CA认证中心给我们的;然后我们会把这个生成好的cert.csr(Certificate Signing Request (CSR):证书签名申请)发给CA认证中心。CA认证中心通过后,会反馈(通常是邮件)回来认证的信息,再导入即可。

把上面生成的文件内容提交给CA,即可换取证书;若自行生成则:

openssl x509 -req -days 365 -in server.csr -signkey server.pem -out server.crt

161343106110

3. 获取十六进制的密钥

数据是用ASN.1编码过的,所以可以用openssl命令从密钥文件(key或pem)提取秘钥

openssl asn1parse -out temp.ans -i -inform PEM < server.pem

161354007522

 

4. javascript 加密代码

function rsa_pwd(content){ 
//十六进制公钥  
var rsa_n = "BC6539FEAD9E086D02E1268FF36E46A2843797559D15BE09...."; 
setMaxDigits(131);
 //131 => n的十六进制位数/2+3  
var key = new RSAKeyPair("10001", '', rsa_n); //10001 => e的十六进制  
content_rsa = encryptedString(key, content); 
//不支持汉字  
return content_rsa;
 }

 5. php 加密/解密代码

<?php 
/** * 公钥加密 
 * * @param string 明文 
 * @param string 证书文件(.crt) 
 * @return string 密文(base64编码) 
 */ 
function publickey_encodeing($sourcestr, $fileName) { 
      $key_content = file_get_contents($fileName); 
      $pubkeyid = openssl_get_publickey($key_content);
      if (openssl_public_encrypt($sourcestr, $crypttext, $pubkeyid)) { 
            return base64_encode("".$crypttext); 
       } 
} 
/** * 私钥解密 
* * @param string 密文(二进制格式且base64编码) 
* @param string 密钥文件(.pem / .key) 
* @param string 密文是否来源于JS的RSA加密 
* @return string 明文 
*/ 
function privatekey_decodeing($crypttext, $fileName, $fromjs = FALSE) { 
          $key_content = file_get_contents($fileName); 
          $prikeyid = openssl_get_privatekey($key_content); 
          $crypttext = base64_decode($crypttext); 
          $padding = $fromjs ? OPENSSL_NO_PADDING : OPENSSL_PKCS1_PADDING; 
          if (openssl_private_decrypt($crypttext, $sourcestr, $prikeyid, $padding)) { 
                     return $fromjs ? rtrim(strrev($sourcestr)) : "".$sourcestr; 
           } 
           return ''; 
}
 ?>

6. 测试代码

//JS->PHP 测试 $_POST['password']是js加密后的信息 
$txt_en = $_POST['password']; 
$txt_en = base64_encode(pack("H*", $txt_en)); 
$file = 'ssl/server.pem'; 
$txt_de = privatekey_decodeing($txt_en, $file, TRUE); 
var_dump($txt_de); 
//PHP->PHP 测试  $data = "汉字:1a2b3c"; 
$config = Core::getInstance()->config; 
$file1 = 'ssl/server.crt'; 
$file2 = 'ssl/server.pem'; 
$a = publickey_encodeing($data, $file1); 
$b = privatekey_decodeing($a, $file2); 
var_dump($b);

7. 需注意

PHP中openssl扩展公私钥加密函数只支持小数据,加密时117字节,解密时128字节。若不然得自己循环加密后合并。

SSL本身也只是用RSA来进行密钥加密,数据加密则是利用这个加密的密钥进行对称加密,以保证速度。所以万不可将其用于大数据量加密!

8. 本方案几处优点

1、安全性高。基于非对称的RSA算法加密数据,只要在私钥不被暴露的前提下,密钥长度足够长,短时间内基本是无法破解的。

2、使用方便。前端使用现成的JS库来实现加密,PHP端则可直接使用现成的openssl扩展,而不用RSA的PHP源码实现或自己开发扩展。

3、速度靠谱。由于RSA解密算法相当复杂,而该操作交由PHP端扩展来实现,效率上比网上的PHP代码要高许多。

4、便于升级。密钥是直接从linux下openssl工具生成的证书中获取,不仅不用其他密钥生成工具,也方便今后升级到真正的HTTPS。

9. 参考文章

http://www.jishuer.com/static/article-270.html

http://blog.csdn.net/linvo/article/details/5619807

http://blog.sina.com.cn/s/blog_4fcd1ea30100yh4s.html

http://blog.csdn.net/fenglibing/article/details/8610280

10. 来源

http://www.haodaima.net/art/2483284

jQuery插件制作: 语音播报jspeech

在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能。在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音。这些都是给手机app(android、ios)提供sdk包,然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能,大致也是调用百度的语言功能。请看如下实现步骤。

第一步: 下载JQuery文件,并导入到html文件中

20150113163229

第二步: html文件布局实现

20150113163406

第三步: jspeech插件实现

1. 创建jspeech文件,然后根据jquery插件的基本格式把基本框架写好

20150113163805

2. 设置默认配置信息

var defaults = {
			//通过点击链接播报,还是直接播报
			"jspeech_a":true,
			//链接按钮的宽度
			"jspeech_a_width":"16px",
			//链接按钮的高度
			"jspeech_a_height":"13px",
			//链接按钮的背景图片
			"jspeech_a_png":"url(./image/icon.png) no-repeat",
			//直接播报内容
			"jspeech_content":"测试"
		};

20150113164901

3. 设置点击链接播报方式

//如果是通过点击链接播报
				//获得文本内容
				var content = $(this).text();
				//生成链接
				var speechClick = "<a href='javascript:void(0);' class='jspeech_a'></a>";
				$(this).append(speechClick);
				//设置链接样式
				$(this).find(".jspeech_a").css({
												width:options.jspeech_a_width,
												height:options.jspeech_a_height,
												"display":"inline-block",
												"background":options.jspeech_a_png
												});
				$(this).find(".jspeech_a").click(function(){
					//捕获点击事件
					var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + content;
					if($(this).find(".jspeech_iframe").length > 0){
						$(this).find(".jspeech_iframe").attr("src",src);
					}else{
						var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
						$(this).append(iframe);
					}
				});

 

 

20150113165008

 

4. 设置直接播报方式

var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + options.jspeech_content;
				if($(this).find(".jspeech_iframe").length > 0){
					$(this).find(".jspeech_iframe").attr("src",src);
				}else{
					var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
					$(this).append(iframe);
				}

20150113165146

 

5. 说下实现原理

其实就是通过调用百度翻译的语音播放功能,然后对应的将文字传进去就可以了,然后百度翻译的语言播报功能接口就会生成video标签自动播放。所以我只需要传递文字,然后把返回来的video放到iframe里即可。

20150113165525

 

6. 整体源码

(function($){
	$.fn.jspeech = function(options){
		var defaults = {
			//通过点击链接播报,还是直接播报
			"jspeech_a":true,
			//链接按钮的宽度
			"jspeech_a_width":"16px",
			//链接按钮的高度
			"jspeech_a_height":"13px",
			//链接按钮的背景图片
			"jspeech_a_png":"url(./image/icon.png) no-repeat",
			//直接播报内容
			"jspeech_content":"测试"
		};
		var options = $.extend(defaults, options);
		this.each(function(){
			if(options.jspeech_a){
				//如果是通过点击链接播报
				//获得文本内容
				var content = $(this).text();
				//生成链接
				var speechClick = "<a href='javascript:void(0);' class='jspeech_a'></a>";
				$(this).append(speechClick);
				//设置链接样式
				$(this).find(".jspeech_a").css({
												width:options.jspeech_a_width,
												height:options.jspeech_a_height,
												"display":"inline-block",
												"background":options.jspeech_a_png
												});
				$(this).find(".jspeech_a").click(function(){
					//捕获点击事件
					var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + content;
					if($(this).find(".jspeech_iframe").length > 0){
						$(this).find(".jspeech_iframe").attr("src",src);
					}else{
						var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
						$(this).append(iframe);
					}
				});
			}else{
				var src = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=' + options.jspeech_content;
				if($(this).find(".jspeech_iframe").length > 0){
					$(this).find(".jspeech_iframe").attr("src",src);
				}else{
					var iframe = "<iframe height='0' width='0' class='jspeech_iframe' scrolling='no' frameborder='0' src='"+src+"' ></iframe>";
					$(this).append(iframe);
				}
			}
		});
	};
})(jQuery);

20150113165819

第四步: 调用插件

1. 点击链接播报

20150113165640

2. 效果

20150113170026

3. 直接播报

20150113170116

4. 效果

20150113170205

JQuery插件制作:倒计时countdown

关于倒计时的插件可能网上很多,但是都不能满足自己想要的需求,所以作为程序员的我就开始来写一个JQuery倒计时插件countdown。

第一步: 下载JQuery文件

既然编写JQuery插件,那肯定是需要JQuery文件。

20150108021654

第二步: 把JQuery文件导入到html文件中

20150108022333

第三步: 网页布局

20150108023332

第四步: 编写JQuery插件countdown

1. 创建countdown.js文件,并且导入到html文件中。

20150108023748

2.  根据jquery插件的基本格式把基本框架写好。

jquery插件的基本格式:

(function($){
	$.fn.插件名称 = function(options){
		var defaults = {
			//相关属性设置	
		}
		var options = $.extend(defaults, options);
		this.each(function(){
			//实现的功能设置		
           });
	};
})(jQuery);

20150108024430

3. 设置默认配置信息

20150108024643

4. 添加一个倒计时方法timedown

首先添加三个全局变量,第一个是用来保存插件传进来的this,第二个是用来保存的配置信息,第三个是定时器对象

var jthis = null;
var opts = null;
var countdowtime = null;

然后给这三个变量赋值

opts = $.extend({}, defaults, options);
jthis = this;
countdowtime = setInterval(timedown,1000);

20150108030035

然后添加倒计时方法

/*倒计时方法*/
	function timedown(){
		//时间默认值
		var day=0,hour=0,minute=0,second=0;
		
		var end = false;
		
		//遍历该标签元素
		jthis.each(function(index){
			//如果没有开始时间就返回
			if(!opts.timestartClass)
				return;
			//开始时间
			var timestart = $(this).find("."+opts.timestartClass).html();
			//结束时间
			var timeend = $(this).find("."+opts.timeendClass).html();
			//如果没有结束时间,就找开始时间样式中的data属性值为结束时间
			if(!timeend){
				timeend = $(this).find("."+opts.timestartClass).attr("data");
			}
			if(!timestart || !timeend)
				return;
			//开始时间秒数
			var ts = (new Date(timestart)).getTime()/1000;
			//结束时间秒数
			var te = (new Date(timeend)).getTime()/1000;
			//现在时间秒数
			var now = (new Date()).getTime()/1000;
			if(now < ts){
				//进行倒计时
				end = true;
				var changeTime = ts - now;
				day = Math.floor(changeTime / (60 * 60 * 24));
				hour = Math.floor(changeTime / (60 * 60)) - (day * 24);
				minute = Math.floor(changeTime / 60) - (day * 24 * 60) - (hour * 60);
				second = Math.floor(changeTime) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
				var htmlCode = day ? day+"天" : "";
				htmlCode += hour ? ((hour<=9 ? "0"+hour : hour)+"时") : "";
				htmlCode += minute ? ((minute<=9 ? "0"+minute : minute)+"分") : (hour ? "00分" : "");
				htmlCode += second ? ((second<=9 ? "0"+second : second)+"秒") : (minute ? "00秒" : "");
				$(this).find("."+opts.timeshowClass).html(htmlCode);
				$(this).find("."+opts.statusClass).css({color:opts.startStatusColor});
				$(this).find("."+opts.timeshowClass).css({color:opts.timeshowColor,"font-size":opts.timeshowSize,"font-weight":"700"});
			}else if(now >= ts && now <= te){
				//进行中
				$(this).find("."+opts.timeshowClass).html("进行中");
				$(this).find("."+opts.statusClass).css({color:opts.ingStatusColor});
			}else if(now > te){
				//已结束
				$(this).find("."+opts.timeshowClass).html("已结束");
				$(this).find("."+opts.statusClass).css({color:opts.endStatusColor});
			}
		});
		
		//如果都没有倒计时就关闭定时器
		if(!end){
			clearInterval(countdowtime);
		}
	}

 第五步: 调用JQuery插件countdown

<script type="text/javascript">
			$(document).ready(function() {
				$(".countdown").countdown({
					//开始时间样式
					"timestartClass":"timestart",
					//结束时间样式
					"timeendClass":"timeend",
					//展示时间样式
					"timeshowClass":"timeshow",
					//展示时间字体颜色
					"timeshowColor":"red",
					//展示时间字体大小
					"timeshowSize":"14px",
					//状态样式
					"statusClass":"timestatus",
					//开始状态颜色
					"startStatusColor":"#f18519",
					//进行中状态颜色
					"ingStatusColor":"#ff0000",
					//结束状态颜色
					"endStatusColor":"#999",
				});
			});
		</script>

20150108030851

第六步: 效果

20150108030951

[JQuery]实现点赞加1效果

通过ajax异步更新数据库,并返回当前点赞数,来实现文章点赞功能,而需要一个加1的效果,逐渐变大而消失,请看如下图片:

20140315130847

 

实现代码:

(function($){
            $.fn.extend({
                addOne: function(options) {
                    options = $.extend({
                        str: "+1",
                        startSize: "14px",
                        endSize: "40px",
                        interval: 500,
                        color: "red",
                        style: "",
                        callback: function() {}
                    }, options);

                    $("body").append("<span class='tips_box' style='"+ options.style +"'>"+ options.str +"</span>");
                    var box = $(".tips_box");
                    var self = $(this);
                    var top = self.offset().top;
                    var left = self.offset().left + self.width() / 2 - box.width() / 2;
                    //alert(layer.width());
                    box.css({
                        "position": "absolute",
                        "top": top,
                        "left": left,
                        "font-size": options.startSize,
                        //"font-weight": "bold",
                        "color": options.color
                    });
                    box.animate({
                        "top": top - self.height() / 2,
                        "opacity": 0,
                        "font-size": options.endSize
                    }, options.interval, function() {
                        box.remove();
                        options.callback();
                    });
                }
            });
        })(jQuery);

然后对链接添加点击事件,来实现加1效果。

$("a").addOne({
                    style: 'font-weight:bold;',
                    endSize: "60px",
                    interval:800
                });

即可实现该动态效果功能!

[JQuery]实现描点平滑移动

以前写过[定位到某个锚点]功能,使用的是#+描点名称,没有采用平滑功能。而实现平滑移动功能就需要用到JQuery的animate方法来实现动态的移动。请看如下代码:

/**
 * 描点平滑移动
 * 如果传递元素ID,则描点到该元素的位置
 * 如果没有传递元素ID(为空),则返回到顶部
 * @param {type} elements
 * @returns {undefined}
 */
function goto(elements) {
    var pos = 0;
    if (elements !== "") {
        // 定义将要去的描点位置
        pos = $(elements).offset().top;
    }
// 实现平滑移动 1000代表时间ms
    $("html,body").animate({scrollTop: pos-20}, 1000);
}

[JQuery]清除标签的style样式

对于html标签而言,一般都是在css文件中,通过id或者class来添加标签样式,所以想给标签换样式的话,就直接可以更换标签的class属性值。但是需要修改标签的style属性值,例如想清除掉style属性的样式值。实现代码如下:

HTML代码:

<div id="jhonse" style="padding:5px; "></div>

JQuery代码:

$("#jhonse").removeAttr("style"); //ie,ff均支持

$("#jhonse").attr("style","");   //ff支持,ie不支持

[JQuery]模拟鼠标点击事件

在页面弹出框,采用的是lightbox_me插件,而需要用到一个模拟点击关闭事件,大致功能是当异步提交数据之后,如果数据正常提交,提示提交成功,并把弹出框隐藏,当时想到的是重新写个方法来实现,但是弹出框中有一个关闭按钮,刚好实现了如上功能,所以只需模拟鼠标点击该按钮即可。请看如下截图:

20140208094236

 

实现模拟点击事件代码如下:

$(".close").trigger("click");

方法说明:

定义和用法

trigger() 方法触发被选元素的指定事件类型。

触发事件

规定被选元素要触发的事件。

语法

$(selector).trigger(event,[param1,param2,...])
参数 描述
event 必需。规定指定元素要触发的事件。

可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。

[param1,param2,…] 可选。传递到事件处理程序的额外参数。

额外的参数对自定义事件特别有用。

[JQuery]实现设为首页以及加入收藏功能

在做企业官网项目的时候,总是会有设为首页、加入收藏功能,索性用JS实现出来,保存博客当中,以备下次所用!

设为首页

//设为首页
function SetHome(obj){
	try{
		obj.style.behavior='url(#default#homepage)';
		obj.setHomePage('http://blog.jhonse.com');
	}catch(e){
		if(window.netscape){
			try{
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			}catch(e){
				alert("抱歉,此操作被浏览器拒绝!\n\n请在浏览器地址栏输入“about:config”并回车然后将[signed.applets.codebase_principal_support]设置为'true'");
			};
		}else{
			alert("抱歉,您所使用的浏览器无法完成此操作。\n\n您需要手动将'http://blog.jhonse.com/'设置为首页。");
		};
	};
};

 加入收藏

//加入收藏
function AddFavorite(sURL, sTitle){
	try{
		window.external.addFavorite(sURL, sTitle);
	}
	catch(e){
		try{
			window.sidebar.addPanel(sTitle, sURL, "");
		}
		catch(e){
			alert("加入收藏失败,请使用Ctrl+D进行添加");
		};
	};
};

【JQuery】Ecshop与Jquery冲突的完美解决方案

ECShop把AJAX事件和JSON解析的模块放在common/transport.js之中,可以说它也有自己封装的一套工具,这其实是很正常的。

但恰恰的,在封装JSON各种方法的同时对object的模型进行了重写,这个就跟jQuery冲突了。因为众所周知的,jQuery对各种JavaScript对象进行了扩展。
这一切其实都很容易理解,各有各的理由十分自然,但头痛和无奈的就变得在我们这些使用者身上了。在ECShop论坛上原来也有很多朋友提出了这个问题,也提出了各种各样的方法,我尝试了一些,不好或者甚至无用,所以只好自己动手了。
解决思路大概就是屏蔽ECshop扩展的toJSONString方法,用别的函数代替。
为了照顾下小菜们,就写详细点吧。

一,修改默认js文件

1、首先复制一份 transport.js 改名为 transport.org.js 提供给后台使用
2、屏蔽掉transport.js里的toJSON功能 行数大概有497-737行之间
由if ( ! Object.prototype.toJSONString) { 开头的代码。
修改352行为:
legalParams = “JSON=” + $.toJSON(params);

修改408行为:

result = $.evalJSON(result);

屏蔽掉global.js里的如下代码(第10-13行):

Object.prototype.extend = function(object)
{
  return Object.extend.apply(this, [this, object]);
}

3、修改index.js文件44行改为:

var res = $.evalJSON(result);
4、修改common.js文件
第34行改为:
Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), addToCartResponse, ‘POST’, ‘JSON’);

第850行改为:

Ajax.call(‘flow.php?step=add_package_to_cart’, ‘package_info=’ + $.toJSON(package_info), addPackageToCartResponse, ‘POST’, ‘JSON’);

第1056行改为:

Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), addToCartResponse, ‘POST’, ‘JSON’);
5、修改compare.js文件
第49行改为:
 this.data = $.evalJSON(cookieValue);

第67行改为:

var obj = $.evalJSON(cookieValue);

第133行改为:

document.setCookie(“compareItems”, $.toJSON(this.data));

6、修改global.js文件

第16行改函数名 :

function $e()

第114和126行都改为:

var element = $e(element);

 二,修改后台调用部分

7、<!———–路径修改———–>

修改后台头部引入transport.js路径 admin/templates/pageheader.htm 第9行改为:

{insert_scripts files=”../js/transport.org.js,common.js"}

admin/templates/menu.htm

151行改成

 {insert_scripts files="../js/global.js,../js/utils.js,../js/transport.org.js"}

  三,修改前台模板部分

8、修改themes/default/library/page_header.lbi文件在

{insert_scripts files=’transport.js,utils.js’}

上面加上如下代码

{insert_scripts files=’jquery.js,jquery.json.js’}

9、<!—–修改文件—–>

library/comment_list.lbi
第188行 :
Ajax.call(‘comment.php’, ‘cmt=’ + $.toJSON(cmt), commentResponse, ‘POST’, ‘JSON’);
10、compare.dwt
第20行 :
var obj = $.evalJSON(document.getCookie(“compareItems”));

第24行 :

document.setCookie(“compareItems”, $.toJSON(obj));
11、flow.dwt
第138行 :
Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), collect_to_flow_response, ‘POST’, ‘JSON’);

第199行 :

 Ajax.call(‘flow.php?step=add_to_cart’, ‘goods=’ + $.toJSON(goods), fittings_to_flow_response, ‘POST’, ‘JSON’);

12、<!—–jquery文件需置顶的dwt文件—-jquery.js文件需要在compare.js文件加载前加载,否则会报错—–>

brand.dwt
brand_list.dwt
category.dwt
exchange_list.dwt
search.dwt
如:
{* 包含脚本文件 *}
{insert_scripts files=’jquery.js,jquery.json.js’}
{insert_scripts files=’common.js,global.js,compare.js’}

注:本文来自于Ecshop模板堂

【JQuery】动画与效果

1.基本效果

匹配元素从左上角开始变浓变大或缩小到左上角变淡变小

①隐藏元素

除了可以设置匹配元素的display:none外,可以用以下函数

hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次

slow=600毫秒  normal=400毫秒  fast=200毫秒

以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。

②显示元素

show(speed,[callback])    以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。

③交替显示隐藏

toggle(speed,[callback])  以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。

<input type="button" id="hide1" value="hide()" />
<input type="button" id="show1" value="show()" />
<input type="button" id="toggle1" value="toggle()" />
<div  id="1" style="width:100px; height:100px; background-color:Green;"></div>
$(function(){
$("#hide1").click(function(){$("#1").hide(700)});
$("#show1").click(function(){$("#1").show(700)});
$("#toggle1").click(function(){$("#1").toggle(700)});
})

2.滑动效果

①向上收缩效果

slideUp(speed,[callback])  通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。

②向下展开效果

slideDown(speed,[callback])  通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。

③交替伸缩效果

slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。

$("#slideup1").click(function(){$("#1").slideUp(700)});
$("#slidedown2").click(function(){$("#1").slideDown(700)});
$("#slidetoggle").click(function(){$("#1").slideToggle(700)});

3.淡入淡出效果

通过控制匹配元素的不透明度来实现元素的显示与隐藏

①淡入效果

fadeIn(speed,[callback])  通过不透明度的变化逐渐将匹配元素显现出来

$(“#fadein”).click(function(){$(“#1”).fadeIn(“slow”)});

②淡出效果

fadeOut(speed,[callback])  通过不透明度的变化逐渐将匹配元素隐藏起来

③自定义不透明度

淡入或淡出的最终结果为自定义的透明度

fadeTo(speed,opacity,[callback])  opacity的值域是0~1之间

4.自定义动画效果

①自定义动画

animate(params,duration,[easing],[callback])  返回值:jQuery  参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:”100%”,width:”70%”,fontSize:”4em”,color:”white”}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size   duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number  easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String   callback:和前面一样

这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置border,却在params中这样设置{borderStyle:”solid”,borderWidth:”1px”}     2.就是前面提到过的样式属性的骆驼命名法      3.有些样式属性animate是不支持的,即便你在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置了backgroundColor样式属性。

<div id="3" style="width:200px; height:300px; border:solid 1px; position:absolute; left:-180px;">
 用户名:<input type="text" /><br />
 密码:<input type="password" /></div>
$(function(){
$("#3").mouseover(function(){$(this).stop().animate({left:"0px"})
}).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)})
})

②jQuery动画队列

把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行

如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示

$(“#id”).animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})

以上俩动画会同时执行,总耗时1秒,而

$(“#id”).animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

这俩动画会一个一个执行,总耗时2秒