小教程：自己创建一个jQuery长阴影插件(3)_H5之家

由于这个插件是可配置的，可以应用于任何图像，多个图像以及参数值的无尽组合，想象力是你唯一的限制。如果我们index.html像这样调整HTML ：

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.longshadows.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
body{
background:rebeccapurple;
padding: 0;
margin:0;
}
.text{
display: inline-block;
margin-top: 50px;
width: 400px;
}
h1 {
color:white;
font-family: sans-serif;
font-size:46px;
}
p{
color:white;
font-size:18px;
}
#logo{
vertical-align: top;
}
</style>
</head>
<body>
<img src="heart.png" id="logo">
<div class="text">
<h1>Long Shadows jQuery Plugin</h1>
<p>Long shadow design is a variation of flat design to which shadows are added creating the illusion of depth and resulting in a design that looks 3-dimensional.</p>
</div>
</body>
</html>

此外，如果我们script.js使用这些参数调用插件：

$(document).ready(function(){
$("img").longshadows({
spacing:150,
shadowOpacity:20,
shadowAngle:160,
shadowLength:400,
shadowColor:'#330000'
});
});

我们得到这个结果，这是完美的网站标题设计：

使用长阴影效果的示例：

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.longshadows.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">

.text{
display: inline-block;
margin-top: 0px;
margin-left: 10px;
width: 400px;
}
h1 {
font-family: sans-serif;
font-size:36px;
margin-top: 0;
}
p{
font-size:14px;
}
#logo{
vertical-align: top;
}

</style>
</head>
<body>
<img style="background-color:#e37e52;" src="tutsplus.png" id="logo">
<div class="text">
<h1>Tuts+</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body>
</html>

Congratulations

你现在有了创建一个jQuery插件的基础，它为你的图标添加了长阴影。你可以在此插件之上构建，使其适用于文本，或组合多个图像和阴影效果。

via code.tutsplus.com