王新阳

jquery.transit.js插件-CSS3过渡效果插件

http://code.ciaoca.com/jquery/transit/

http://github.com/rstacruz/jquery.transit

2015-08-02

CSS3之animation

@keyframes 自定义名称 {
 0% {
  Properties:Properties value;
 }
 Percentage {
  Properties:Properties value;
 }
 100% {
  Properties:Properties value;
 }
}
Percentage的单位是%，不可省略
浏览器兼容性写法：
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
@keyframes

例：
<style>
@-webkit-keyframes wobble{
 0% {
  margin-left: 100px;
  background: green;
 }
 40% {
  margin-left: 150px;
  background: orange;
 }
 60% {
  margin-left: 75px;
  background: blue;
 }
 100% {
  margin-left: 100px;
  background: red;
 }
}
.demo1{
 width: 50px;
 height: 50px;
 margin-left: 100px;
 background: blue;
 -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
 -webkit-animation-duration: 10s;/*动画持续时间*/
 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
 -webkit-animation-delay: 2s;/*动画延迟时间*/
 -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/
 -webkit-animation-direction: alternate;/*定义动画方式*/
 /*-webkit-animation:wobble 10s ease-in-out 2s 10 alternate; 合到一行的写法*/
}
</style>
<div class="demo1"></div>

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 
也可以每个属性单独写：
1、animation-name: none 或 Keyframes创建的动画名（多个动画名用逗号分隔）
2、animation-duration: time 动画播放持续时长，多个用逗号分隔，单位s、ms
3、animation-timing-function 变化速率：linear、ease、ease-in、ease-out、ease-in-out
4、animation-delay 延时
5、animation-iteration-count 动画循环次数，默认为1，infinite无限次
6、animation-direction 动画播放方向，默认normal每次循环向前；alternate偶数次向前，奇数次反向播放
7、animation-play-state 动画播放状态，默认running，paused暂停。此属性基本不用

来源：http://www.w3cplus.com/content/css3-animation

2015-08-02

回应

CSS3之transition

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 

transition主要包含四个属性值：
transition-property 执行变换的属性
transition-duration 变换延续的时间，单位s、ms
transition-timing-function 变化速率：ease变慢、linear匀速、ease-in加速、ease-out减速、ease-in-out
transition-delay 变换延迟时间

例：
transition: all 0.5s ease-in;
transition: all 0.5s ease-in 100ms;
指定属性变化时执行：
transition: background 0.5s ease-in, color 0.3s ease-out;

浏览器兼容写法：
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;

来源：http://www.w3cplus.com/content/css3-transition

2015-08-02

回应

CSS3之text-shadow、box-shadow

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur >=0) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
text-shadow:0, 1px 1px #fff;
text-shadow:0 0 20px red;
text-shadow:0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
color:transparent; text-shadow:0 0 5px #f96;
color: transparent;text-shadow:0 0 6px #F96, -1px -1px  #FFF, 1px -1px  #444;
下面是3D效果
text-shadow: -1px -1px rgba(197, 223, 248,0.8),-2px -2px rgba(197, 223, 248,0.8),-3px -3px rgba(197, 223, 248,0.8),-4px -4px rgba(197, 223, 248,0.8),-5px -5px rgba(197, 223, 248,0.8),-6px -6px rgba(197, 223, 248,0.8);

box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径(>=0) 阴影扩展半径 阴影颜色
投影方式：默认不填为外投影，inset为内投影
其他同text-shadow

text-shadow效果见：http://www.w3cplus.com/node/52
box-shadow效果见：http://www.w3cplus.com/content/css3-box-shadow

2015-08-02

回应

CSS3之rgba

color:rgba(100%,0,0,0.5)
background-color:rgba(0,0,0,0.5)
border-color:rgba(0,0,0,0.5)
text-shadow:0 2px 1px rgba(255,0,0,0.5)
background-image:-webkit-linear-gradient(top, rgba(255,0,0,0.5), #ff0000)

2015-08-02

回应

CSS3之gradient渐变

线性渐变 point: top从上到下、left从左到右、left top左上到右下、top right右上到左下；angle角度
-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
径向渐变-基本不用 point除了线性渐变的值外，径向梯度允许你指定渐变的形状（圆形circle或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）
-radial-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
重复渐变
repeating-radial-gradient
浏览器兼容写法
-webkit-linear-gradient()
-moz-linear-gradient()
-ms-linear-gradient()
-o-linear-gradient()
linear-gradient()
例
background-image:linear-gradient(to top, #000, #fff, #eee);
background-image:-webkit-linear-gradient(top, #000, #fff, #eee);
background-image:-webkit-linear-gradient(30deg, #000, #fff, #eee);

background: -moz-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(-45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

更复杂的效果见：http://www.w3cplus.com/node/44

我的示例

body{
	background-color:#fdf8ec;
	background-image:linear-gradient(to bottom, #fdf8ec, #fff);
	background-image:-webkit-linear-gradient(top, #fdf8ec, #fff);
}

2015-08-02

回应

CSS3之transform

2D效果

translate(x, y) 位移
translateX(num) 水平位移
translateY(num) 垂直位移
scale(x, y) 缩放，不改变元素形状
scaleX(num) 水平缩放
scaleY(num) 垂直缩放
rotate(deg) 旋转，正值顺时针旋转，负值逆时针旋转
skew(x, y) 旋转，改变元素形状
skewX(deg) 沿水平轴旋转
skewY(deg) 沿垂直轴旋转

多种效果，不能写多个transform，否则后面的会覆盖前面的效果
transform: translate(100px, -100px) sacle(1.5, 1.5), rotate(180deg);

下面是兼容各种浏览器写法
-moz-transform: scaleY(1.2);
-webkit-transform: scaleY(1.2);
-o-transform: scaleY(1.2);
-ms-transform: scaleY(1.2);
transform: scaleY(1.2);

transform 3D详细教程：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

2015-08-02

回应

ASP遍历xml树

<%@ Language="VBScript" CODEPAGE="65001"%>
<%
Option Explicit
Session.CodePage=65001
Response.Charset="UTF-8"

Dim xmlStr, xml
xmlStr="<?xml version=""1.0"" encoding=""UTF-8""?>"&_
"<books>"&_
"	<book>"&_
"		<name>三国演义</name>"&_
"		<price>99</price>"&_
"	</book>"&_
"	<book>"&_
"		<name>水浒传</name>"&_
"		<price><![CDATA[22]]></price>"&_
"	</book>"&_
"</books>"

Set xml = Server.CreateObject("MSXML2.DOMDocument")
xml.preserveWhiteSpace = true
xml.async = false
xml.LoadXML(xmlStr)
If xml.parseError.errorCode <> 0 Then
	Response.Write "Description: " & xml.parseError.reason & "Line: " & xml.parseError.Line
Else
	Dim book, i
	'方法1
	Set book=xml.selectNodes("/books/book")
	For i=0 To book.length-1
		Response.Write book(i).selectSingleNode("name").text&"："&book(i).selectSingleNode("price").text&"<br>"
	Next
	Response.Write "----<br>"
	'方法2
	For i=0 To book.length-1
		Response.Write book(i).selectSingleNode("name").text
		Response.Write book(i).childNodes(1).text&"："&book(i).childNodes(3).text&"<br>"
	Next
	Response.Write "----<br>"
	'方法3
	For i=0 To book.length-1
		Response.Write book(i).getElementsByTagName("name").Item(0).text&"："&book(i).getElementsByTagName("price").Item(0).text&"<br>"
	Next
	Response.Write "----<br>"
	'方法4
	Dim n, p
	Set n=xml.getElementsByTagName("name")
	Set p=xml.getElementsByTagName("price")
	For i=0 To n.length-1
		Response.Write n(i).text&"："&p.item(i).text&"<br>"
	Next
	Response.Write "----<br>"
	'方法5
	Set n=xml.selectNodes("/books/book/name")
	Set p=xml.selectNodes("/books/book/price")
	For i=0 To n.Length-1
		Response.Write n(i).text&"："&p.item(i).text&"<br>"
	Next
End If
Set xml=Nothing
%>

2015-07-31

回应

ASP发起SOAP请求

Dim xml, http
Set xml = Server.CreateObject("MSXML2.DOMDocument")
xml.preserveWhiteSpace = true
xml.async = false

set http=server.createobject("MSXML2.XMLHTTP")
http.open "POST","请求地址",false
http.setRequestHeader "SOAPAction", 响应端提供的SOAPAction
http.setRequestHeader "Content-Type", "text/xml;charset=utf-8"
http.setRequestHeader "HOST","响应端域名或IP"
http.setRequestHeader "Content-Length",发送xml内容长度 '非必须
http.send(要发送的xml)
If http.readystate=4 then
	xml.Load(http.ResponseBody)
	'xml.save(Server.MapPath("abc.xml"))
	'对接收到的xml进行解析
End If
Set http=Nothing

2015-07-31

回应

LODOP打印控件的基本使用

<object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> 
	<embed id="LODOP_EM" type="application/x-print-lodop"  width=0 height=0 pluginspage="install_lodop32.exe" />
</object>
<script>
//打印功能
function p(id, num){
	var td=$('tr#tr'+id+' > td');
	var LODOP=getLodop();

	//初始化并命名打印程序
	LODOP.PRINT_INIT('汽博会观众入场券打印程序');

	//设置纸张尺寸及名称，单位0.1mm
	LODOP.SET_PRINT_PAGESIZE(1, 750, 1050, '汽博会观众入场券');

	//添加背景图
	LODOP.ADD_PRINT_SETUP_BKIMG("<img border='0' src='http://127.0.0.1/2015/201506/08qibohui/images/ticket.jpg'>");
	//背景图显示模式
	//在预览中显示
	LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW",1);
	//打印背景图
	//LODOP.SET_SHOW_MODE("BKIMG_PRINT",1);	
	//背景图的位置及尺寸
	//LODOP.SET_SHOW_MODE('BKIMG_TOP', 1);
	//LODOP.SET_SHOW_MODE('BKIMG_LEFT', 1);
	//LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '75mm');
	//LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '105mm');

	//添加打印内容，默认尺寸单位为像素，可选单位及换算关系：1英寸 = 2.54cm = 25.4mm = 72pt = 96px
	//ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)
	//用SET_PRINT_STYLE设置打印式样，该接口只对位于其后方的内容有效
	//设置字号，单位是pt
	LODOP.SET_PRINT_STYLE("FontSize",18);
	//是否加粗
	LODOP.SET_PRINT_STYLE("Bold",1);
	//设置字体
	LODOP.SET_PRINT_STYLE("FontName",'宋体');
	//添加打印内容
	LODOP.ADD_PRINT_TEXT('45mm','25mm','RightMargin:5mm','6mm','入场券');
	
	LODOP.SET_PRINT_STYLE("FontSize",10);
	LODOP.SET_PRINT_STYLE("Bold",0);
	LODOP.SET_PRINT_STYLE("FontName",'微软雅黑');
	LODOP.ADD_PRINT_TEXT('60mm','15mm','RightMargin:5mm','6mm','姓名：'+td.eq(1).text());
	LODOP.ADD_PRINT_TEXT('66mm','15mm','RightMargin:5mm','6mm','单位：'+td.eq(3).text());
	LODOP.ADD_PRINT_TEXT('72mm','15mm','RightMargin:5mm','6mm','城市：'+td.eq(3).text());

	//也可以用SET_PRINT_STYLEA接口设计字体，此接口位于添加打印内容接口（ADD_PRINT_TEXT和ADD_PRINT_HTM）后面
	//数字2是姓名栏的顺序号（ADD_PRINT_TEXT或ADD_PRINT_HTM出现的顺序，从1开始；如果顺序号为0，则对SET_PRINT_STYLEA之前最后添加的打印内容有效）
	//LODOP.SET_PRINT_STYLEA(2, "FontSize", 10);
	//LODOP.SET_PRINT_STYLEA(2, "Bold", 0);
	//LODOP.SET_PRINT_STYLEA(2, "FontName", '微软雅黑');
	//LODOP.SET_PRINT_STYLEA(2, "FontColor", '#ff0000');
	//添加html
	//LODOP.ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight, document.getElementById('id').innerHTML);

	//设置输出以纸张边缘为基
	LODOP.SET_PRINT_MODE("POS_BASEON_PAPER",true);

	//打印维护，只能对现有字段进行维护，不能添加或删除新字段
	//LODOP.PRINT_SETUP();

	//打印设计，可以添加、删除打印字段
	//LODOP.PRINT_DESIGN();

	//打印预览
	//LODOP.PREVIEW();

	//选择打印机
	//LODOP.PRINTA();

	//打印
	//if (LODOP.SET_PRINT_COPIES(num)){
	//	LODOP.PRINT();
	//}else{
	//	alert("设置打印份数失败！");
	//}
	LODOP.PRINT();
}
</script>

LODOP官方使用说明及样例：http://www.lodop.net/demo.html

2015-07-27

回应(1)

1...29 30 31 32 33 34 35 36 37 38 ...39