jQuery实现漂亮的长阴影效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现漂亮的长阴影效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>jQueryʵ��Ư���ĳ���ӰЧ��</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
	<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
  <script type="text/javascript" src="js/jquery.flatshadow.js"></script>
  <style>
    html {
      height: 100%;
    }
    body {
      background: #f4eedf;
      padding: 0;
      text-align: center;
      font-family: 'open sans';
      position: relative;
      margin: 0;
      height: 100%;
    }
    h1, h2 {
      width: 100%;
      float: left;
    }
    h1 {
      margin-top: 170px;
      color: #555;
      margin-bottom: 5px;
    }
    h2 {
      color: #999;
      font-weight: 100;
      margin-top: 0;
      margin-bottom: 60px;
    }
    
		.flat-icon {
		  text-align: center;
      padding:23px 28px;
      font-weight: bold;
      display: inline-block;
      line-height: 100%;
      overflow: hidden;
      text-transform: uppercase;
      margin-right: 15px;
      width: 40px;
      font-size: 50px;
      border-radius: 50px;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
    }
    
    .reload, .btn{
      display: inline-block;
      border: 4px solid #FFF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: rgba(255,255,255, 0.75);
      display: inline-block;
      line-height: 100%;
      padding: 0.7em;
      text-decoration: none;
      opacity: 0.7;
      color: #555;
      width: 100px;
      line-height: 140%;
      font-size: 17px;
      font-family: open sans;
      font-weight: bold;
    }
    .reload:hover, .btn:hover {
      background: white;
    }
    .btn {
      margin-left: 10px;
      width: 200px;
    }
    .btns {
      width: 380px;
      margin: 50px auto;
    }
    .credit {
      text-align: center;
      color: #999;
      padding: 10px;
      margin: 0;
      background: rgba(255,255,255,0.5);
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    .credit a {
      color: #555;
      text-decoration: none;
      font-weight: bold;
    }
	</style>
	<script>
	  $(document).ready(function(){
			$(".flat-icon").flatshadow({
        fade: true
      });
		});
		
	</script>
</head>
<body>
  <h1>jQuery Flat Shadow by Pete R.</h1>
  <h2>Add depth to your flat UI with jQuery Flat Shadow</h2>
	<div class="flat-icon"> A </div>
  <div class="flat-icon"> B </div>
  <div class="flat-icon"> C </div>
  <div class="flat-icon"> D </div>
<br><br>
</body>
</html>

JS代码(jquery.flatshadow.min.js):

!function(e){
	function s(e,t){
	e=e.replace("#","");
	r=parseInt(e.substring(0,2),16);
	g=parseInt(e.substring(2,4),16);
	b=parseInt(e.substring(4,6),16);
	result="rgba("+r+","+g+","+b+","+t/100+")";
	return result}
function o(e,t){
	e=String(e).replace(/[^0-9a-f]/gi,"");
	if(e.length<6){
	e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]}
t=t||0;
	var n="#",r,i;
	for(i=0;
	i<3;
	i++){
	r=parseInt(e.substr(i*2,2),16);
	r=Math.round(Math.min(Math.max(0,r+r*t),255)).toString(16);
	n+=("00"+r).substr(r.length)}
return n}
var t=new Array("#1ABC9C","#2ecc71","#3498db","#9b59b6","#34495e","#f1c40f","#e67e22","#e74c3c");
	var n=new Array("NE","SE","SW","NW");
	var i={
	fade:false,color:"random",boxShadow:false,angle:"random"}
;
	e.fn.flatshadow=function(r){
	var u=e.extend({
}
,i,r);
	return this.each(function(){
	el=e(this);
	if(u.fade==true){
	width=Math.round(el.outerWidth()/3);
	height=Math.round(el.outerHeight()/3)}
else{
	width=Math.round(el.outerWidth());
	height=Math.round(el.outerHeight())}
if(u.boxShadow!=false){
	var r=u.boxShadow}
if(u.color!="random"&&!el.attr("data-color")){
	var i=u.color}
else{
	var i=t[Math.floor(Math.random()*t.length)];
	if(el.attr("data-color")){
	var i=el.attr("data-color")}
}
if(u.angle!="random"&&!el.attr("data-angle")){
	var a=u.angle}
else{
	var a=n[Math.floor(Math.random()*n.length)];
	if(el.attr("data-angle")){
	var a=el.attr("data-angle")}
}
var f=o(i,-.3);
	var l="";
	if(u.boxShadow!=false){
	var c=""}
else{
	var c="none"}
switch(a){
	case"N":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+="0px "+h*2*-1+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+="0px "+h*-1+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"NE":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+=h*2+"px "+h*2*-1+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h+"px "+h*-1+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"E":for(var h=1;
	h<=width;
	h++){
	if(u.boxShadow!=false)c+=h*2+"px "+"0px 0px "+s(r,50-h/width*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h+"px "+"0px 0px "+p;
	if(h!=width){
	l+=",";
	c+=","}
}
break;
	case"SE":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+=h*2+"px "+h*2+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h+"px "+h+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"S":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+="0px "+h*2+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+="0px "+h+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"SW":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+=h*2*-1+"px "+h*2+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h*-1+"px "+h+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"W":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+=h*2*-1+"px "+"0px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h*-1+"px "+"0px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break;
	case"NW":for(var h=1;
	h<=height;
	h++){
	if(u.boxShadow!=false)c+=h*2*-1+"px "+h*2*-1+"px 0px "+s(r,50-h/height*100);
	if(u.fade!=false){
	var p=s(f,100-h/height*100)}
else{
	var p=f}
l+=h*-1+"px "+h*-1+"px 0px "+p;
	if(h!=height){
	l+=",";
	c+=","}
}
break}
el.css({
	background:i,color:o(i,1),"text-shadow":l,"box-shadow":c}
)}
)}
}
(window.jQuery)

附件:下载该文件资源,减少时间成本(增值服务)