jquery.shadow是一款生成阴影效果的jquery插件

jquery.shadow是一款生成阴影效果的jquery插件

jquery.shadow是一款生成阴影效果的jquery插件

使用方式:

第一步引入bfwone 加载依赖项jquery

第二步use插件及css和主题css

第三步配置参数

参数类型默认值描述
typeString"standart"阴影的类型,可以是:"standard", "lifted", "perspective", "raised", "sides"。
radiusInteger4圆角半径,单位像素。
sidesString''当类型为"sides"时可用,可取值有:vt-1, vt-2, hz-1, hz-2。
rotateString"-3deg""transform:rotate"属性的值。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.shadow", "jquery.shadow"], function() {
                $('.box.standard').shadow();
                $('.box.lifted').shadow('lifted');
                $('.box.perspective').shadow('perspective');
                $('.box.raised').shadow('raised');
                $('.box.sides-vt-1').shadow({
                    type: 'sides', sides: 'vt-1'
                });
                $('.box.sides-vt-2').shadow({
                    type: 'sides', sides: 'vt-2'
                });
                $('.box.sides-hz-1').shadow({
                    type: 'sides', sides: 'hz-1'
                });
                $('.box.sides-hz-2').shadow({
                    type: 'sides', sides: 'hz-2'
                });
                $('.box.rotated').shadow({
                    type: 'rotated', rotate: '-5deg'
                });
            });
        });
    </script>
    <style>
    	body {
		    font:12px/1.5 Arial, sans-serif;
		    text-align:center;
		    color:#333;
		    background:#f3f3f1;
		}
		.container {
		    position:relative;
		    z-index:1;
		    width:600px;
		    padding:20px;
		    margin:0 auto;
		}
		.container:after {
		    content:"";
		    display:block;
		    clear:both;
		    visibility:hidden;
		    height:0;
		    font-size:0;
		}
		.box {
		    float:left;
		    height:100px;
		    width:40%;    
		    padding:1em; 
		    margin:2em 10px 4em; 
		    background:#fff;
		}
    </style>
</head>
<body>
    <div class="container">
        <div class="box standard">
            <p>
                <code>$('.box.standard')<br />    .shadow();</code>
            </p>
        </div>
        <div class="box lifted">
            <p>
                <code>$('.box.lifted')<br />    .shadow('lifted');</code>
            </p>
        </div>
        <div class="box perspective">
            <p>
                <code>$('.box.perspective')<br />    .shadow('perspective');</code>
            </p>
        </div>
        <div class="box raised">
            <p>
                <code>$('.box.raised')<br />    .shadow('raised');</code>
            </p>
        </div>
        <div class="box sides-vt-1">
            <p>
                <code>$('.box.sides-vt-1')<br />    .shadow({type:'sides', sides:'vt-1'});</code>
            </p>
        </div>
        <div class="box sides-vt-2">
            <p>
                <code>$('.box.sides-vt-2')<br />    .shadow({type:'sides', sides:'vt-2'});</code>
            </p>
        </div>
        <div class="box sides-hz-1">
            <p>
                <code>$('.box.sides-hz-1')<br />    .shadow({type:'sides', sides:'hz-1'});</code>
            </p>
        </div>
        <div class="box sides-hz-2">
            <p>
                <code>$('.box.sides-hz-2')<br />    .shadow({type:'sides', sides:'hz-2'});</code>
            </p>
        </div>
        <div class="box rotated">
            <p>
                <code>$('.box.rotated')<br />    .shadow({type:'rotated',<br />rotate:'-5deg'});</code>
            </p>
        </div>
        <div class="box rotated lifted">
            <p>
                <code>.rotated.lifted</code>
            </p>
        </div>
        <div class="box rotated perspective">
            <p>
                <code>.rotated.perspective</code>
            </p>
        </div>
        <div class="box rotated raised">
            <p>
                <code>.rotated.raised</code>
            </p>
        </div>
    </div>
</div>
</body>
</html>


立即下载jquery.shadow.js查看所有js插件

网友评论0

程序员在线工具箱