月度归档： 2016年9月

【CSS公用库】xbtn v1.0 按钮

xbtn v1.0

/*example:
*<button class="xbtn-sm xbtn-trans-radius-success">提交</button>
*/
/*===========================================xbtn
*作者：Janing
*日期：2016-9-18
*/
/*===========================================大小*/
[class*="xbtn"]{
	height:30px;
	line-height:30px;
	min-width:80px;
	padding:0 5px;
	border:1px solid transparent;
	transition: all 0.2s ease-in-out 0s;
}
[class*="xbtn"][class*="sm"]{
	height:25px;
	line-height:25px;
	min-width:30px;
}

/*===========================================主题颜色*/
[class*="xbtn"][class*="-success"]{
	background:#04be02;
	color:#04be02;
	border-color:#04be02;
}
[class*="xbtn"][class*="-primary"]{
	background:blue;
	color:blue;
	border-color:blue;
}
[class*="xbtn"][class*="-danger"]{
	background:#FF6D6E;
	color:#FF6D6E;
	border-color:#FF6D6E;
}
[class*="xbtn"][class*="-warming"]{
	background:#FF9466;
	color:#FF9466;
	border-color:#FF9466;
}
[class*="xbtn"][class*="-info"]{
	background:#00d5ec;
	color:#00d5ec;
	border-color:#00d5ec;
}
[class*="xbtn"][class*="-white"]{
	background:#fff;
	color:#1B1E25;
	border-color:rgba(0,0,0,.2);
}
[class*="xbtn"]:hover{
	opacity: .8;
}
/*===========================================形状*/
[class*="xbtn"].xbtn-success,[class*="xbtn"].xbtn-info,[class*="xbtn"].xbtn-danger,[class*="xbtn"].xbtn-primary,[class*="xbtn"].xbtn-warming{
	color:#fff;
}
[class*="xbtn"][class*="-trans"]{
	background:transparent;
}
[class*="xbtn"][class*="-radius"]{
	border-radius:5px;
}
[class*="xbtn"][class*="-line"]{
	background:transparent;
	border-width: 0;
}
[class*="xbtn"][class*="-line"]:hover{
	border-bottom:1px solid;
	opacity: 1;
}

 

【CSS公用库】改变滚动条样式

改变滚动条样式

/*===========================================滚动条样式*/
::-webkit-scrollbar {
		  width: 10px;
		  height:10px;
	} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
		  background-color: #eee;
	} /* 滚动条的滑轨背景颜色 */

	::-webkit-scrollbar-thumb {
		  background-color: #666; 
	} /* 滑块颜色 */

	::-webkit-scrollbar-button {
		  display:none;
	} /* 滑轨两头的监听按钮颜色 */

	::-webkit-scrollbar-corner {
		  background-color: #eee;
	} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

生效浏览器：chrome 不生效浏览器：Firefox 未测试浏览器：edge/IE系

(function(){})() 立即执行函数（匿名函数）

来源：【知乎-前端学习指南】方应杭-https://zhuanlan.zhihu.com/p/22465092

什么是立即执行函数

/*先创建匿名函数，然后立即进行调用。
*/
function(){alert('我是匿名函数')}()

 

例题，为什么点击打印出来的都是6

/*
*/
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
  }
}

因为此处，i的值是全局变量，并没有单独为每个li赋值i。

而使用立即执行函数，可避免变量污染。

/*
*/
var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(ii){
    liList[ii].onclick = function(){
      alert(ii) // 0、1、2、3、4、5
    }
  }(i)
}

 

 

java jq 跨域问题、Json数据传递 【Access-Control-Allow-Origin】

来源：http://yuxisanren.iteye.com/blog/2019666

Java服务器端

/*
*java
*coder:宝贤
*/
 String callback = request.getParameter("jsonpCallback");  
		String result = callback + "(" +output+ ")";  
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		
		response.addHeader("Access-Control-Allow-Origin","*");//'*'表示允许所有域名访问，可以设置为指定域名访问，多个域名中间用','隔开
		
		if("IE".equals(request.getParameter("type"))){
	           response.addHeader("XDomainRequestAllowed","1");
	       }
	       out.print("success");
	       
		out.print(result);
		out.close();

前端Js

/*
*js
*coder:janing
*/

url="http://xxxxxx/Pay2/View2.java";
_post="";
$.ajax({
  "url" : url,
  "type":"post",
  "data":_post,
  "success":function(ret){
    console.log($.parseJSON(ret));
  }
})

 

css动画 animation-timing-function 缓动效果取值

/*
*/

linear：
线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start：
等同于 steps(1, start)
step-end：
等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?)：
接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>)：
特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

 

监测鼠标滚轴动作

/*
*/
<label for="wheelDelta"> 滚动值:</label>(IE/Opera)<input id="wheelDelta" type="text" />

<label for="detail"> 滚动值:(Firefox)</label><input id="detail" type="text" />

<script type="text/javascript">
     var oTxt=document.getElementById("txt");
    /***********************
    * 函数：判断滚轮滚动方向
    * 作者：walkingp
    * 参数：event
    * 返回：滚轮方向 1：向上 -1：向下
    *************************/
    var scrollFunc=function(e){
        var direct=0;
        e=e || window.event;

        var t1=document.getElementById("wheelDelta");
        var t2=document.getElementById("detail");
        if(e.wheelDelta){//IE/Opera/Chrome
            t1.value=e.wheelDelta;
        }else if(e.detail){//Firefox
            t2.value=e.detail;
        }
        ScrollText(direct);
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
    </script>