📝 代码查看
使用runcode.html页面

2
查看次数
2025-11-30
创建时间
2025-11-30
最后更新
<link rel="stylesheet" href="/d/file/computer/programme/html_div_css/2025-11-30/cf3be4d5616c8a02e1dff76db072a540.css" />
<h1>jQuery生成阴影插件jquery.shadow.js</h1>

		<div class="container">
			<div class="box standard">
			        <p><code>$('.box.standard')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow();</code></p>
			    </div>

			    <div class="box lifted">
			        <p><code>$('.box.lifted')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('lifted');</code></p>
			    </div>
			            
			    <div class="box perspective">
			        <p><code>$('.box.perspective')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('perspective');</code></p>
			    </div>
			    
			    <div class="box raised">
			        <p><code>$('.box.raised')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow('raised');</code></p>
			    </div>

			    <div class="box sides-vt-1">
			        <p><code>$('.box.sides-vt-1')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'vt-1'});</code></p>
			    </div>

			    <div class="box sides-vt-2">
			        <p><code>$('.box.sides-vt-2')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'vt-2'});</code></p>
			    </div>
			    
			    <div class="box sides-hz-1">
			        <p><code>$('.box.sides-hz-1')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'hz-1'});</code></p>
			    </div>
			    
			    <div class="box sides-hz-2">
			        <p><code>$('.box.sides-hz-2')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.shadow({type:'sides', sides:'hz-2'});</code></p>
			    </div>


			    <div class="box rotated">
			        <p><code>$('.box.rotated')<br/>&nbsp;&nbsp;&nbsp;&nbsp;.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>
<script src="https://static.cdsy.xyz/script/jquery.min.js"></script>
<script src="/d/file/computer/programme/html_div_css/2025-11-30/c7f18b9f24b0192641732794756892ca.js"></script>
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;
		}
$(document).ready(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'});
		});

👁️ 实时预览