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
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
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
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)
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
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/
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
%>
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
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
asp生成CODE39码制的条形码
Function barCode(ByVal codeStr)
'code 39码制条形码
codeStr=UCase(codeStr)
If emp(codeStr) Then Exit Function Else codeStr=UCase(cStr(codeStr))
Dim s : s=codeStr
If Not regTest(s, "^[abcdefghijklmnopqrstuvwxyz1234567890 +\-%$./]{1,40}$") Then Exit Function Else s="*"&codeStr&"*"
s=Replace(s,"0","_|_|__||_||_|")
s=Replace(s,"1","_||_|__|_|_||")
s=Replace(s,"2","_|_||__|_|_||")
s=Replace(s,"3","_||_||__|_|_|")
s=Replace(s,"4","_|_|__||_|_||")
s=Replace(s,"5","_||_|__||_|_|")
s=Replace(s,"7","_|_|__|_||_||")
s=Replace(s,"6","_|_||__||_|_|")
s=Replace(s,"8","_||_|__|_||_|")
s=Replace(s,"9","_|_||__|_||_|")
s=Replace(s,"A","_||_|_|__|_||")
s=Replace(s,"B","_|_||_|__|_||")
s=Replace(s,"C","_||_||_|__|_|")
s=Replace(s,"D","_|_|_||__|_||")
s=Replace(s,"E","_||_|_||__|_|")
s=Replace(s,"F","_|_||_||__|_|")
s=Replace(s,"G","_|_|_|__||_||")
s=Replace(s,"H","_||_|_|__||_|")
s=Replace(s,"I","_|_||_|__||_|")
s=Replace(s,"J","_|_|_||__||_|")
s=Replace(s,"K","_||_|_|_|__||")
s=Replace(s,"L","_|_||_|_|__||")
s=Replace(s,"M","_||_||_|_|__|")
s=Replace(s,"N","_|_|_||_|__||")
s=Replace(s,"O","_||_|_||_|__|")
s=Replace(s,"P","_|_||_||_|__|")
s=Replace(s,"Q","_|_|_|_||__||")
s=Replace(s,"R","_||_|_|_||__|")
s=Replace(s,"S","_|_||_|_||__|")
s=Replace(s,"T","_|_|_||_||__|")
s=Replace(s,"U","_||__|_|_|_||")
s=Replace(s,"V","_|__||_|_|_||")
s=Replace(s,"W","_||__||_|_|_|")
s=Replace(s,"X","_|__|_||_|_||")
s=Replace(s,"Y","_||__|_||_|_|")
s=Replace(s,"Z","_|__||_||_|_|")
s=Replace(s,"-","_|__|_|_||_||")
s=Replace(s,"*","_|__|_||_||_|")
s=Replace(s,"/","_|__|__|_|__|")
s=Replace(s,"%","_|_|__|__|__|")
s=Replace(s,"+","_|__|_|__|__|")
s=Replace(s,".","_||__|_|_||_|")
s=Replace(s," ","_|__||_|_||_|")
s=Replace(s,"$","_|__|__|__|_|")
s=Replace(s, "_", "<i></i>")
s=Replace(s, "|", "<b></b>")
barCode="<style>div.barcode{clear:both;margin:0;padding:0;width:auto !important;background:#fff;}div.barcode i,div.barcode b{display:block;float:left;height:50px;font-size:0;overflow:hidden;}div.barcode i{width:2px;background:#fff;}div.barcode b{width:0;border-left:2px solid #000;}div.barcode div{clear:both;font-family:verdana;font-size:14px;line-height:20px;letter-spacing:25px;color:#333;}</style><div class=""barcode"">"&s&"<div>"&codeStr&"</div></div>"
End Function
Function regTest(ByVal str, p)
Dim re
Set re = New RegExp
re.Pattern = p
re.IgnoreCase = true
re.Global = true
regTest = re.Test(str)
End Function
