文档章节

小教程:自己创建一个jQuery长阴影插件

igeekbar
 igeekbar
发布于 2017/08/16 10:29
字数 2405
阅读 9
收藏 0

长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计。在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标。

http://igeekbar.com

 

戳我查看效果图

 

在本节教程中,我们将介绍长阴影设计的元素,我们将创建一个简单的jQuery插件,让我们来设计这些元素。 

 

让我们开始吧!

 

长阴影元素设计设计是什么?

 

我们将把这个元素分离为不同的部分,以此组成一个完整的长阴影设计:

 

  • 主要元素,或元素投射阴影。
  • 阴影长度通常很长,因此给出了效果的名称。阴影长度也给出了主要元素具有深度的幻觉。
  • 阴影方向或角度。在现实世界中,这取决于光源的位置。通常,光源投射的所有阴影都有相同的方向。
  • 阴影颜色和不透明度。光源颜色影响阴影的颜色。而且,光源越强,阴影越黑暗。

 

这些元素叠加在一起构成了3D立体效果。

 

 

创建长阴影jQuery插件

 

要创建jQuery长阴影插件,我们将设置一个基本的jQuery插件项目结构,如下所示:

 

  • 创建一个文件夹来保存项目文件。我们可以为这个文件夹取名为  long-shadows-jquery-plugin
  • 在项目文件夹中,创建一个 index.html。这将包含我们的HTML代码。
  • 创建一个文件,调用它  jquery.longshadows.js,并将其放在文件夹中。这将包含我们的jQuery插件的JavaScript代码。
  • 为了保持模块分离,我们还将在此文件夹中创建另一个JavaScript文件并将其命名  script.js。我们将在这里使用我们刚刚创建的jQuery插件。
  • 在项目文件夹中,heart.png可以在本教程的附件中找到可以找到的  图标。

我们  index.html将包含一个基本的HTML结构,并且还将包括jQuery和我们的JavaScript文件。我们需要包含jQuery库,因为我们将实现一个jQuery插件。该  index.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>
</head>
<body>
    <img src="heart.png" id="logo">
</body>
</html>

 

  jquery.longshadows.js文件将包含jQuery插件代码,我们将向下面一样实现它:

 

(function($) {
    $.fn.longshadows = function(options) {
        var settings = $.extend({
            //options defaults go here
            ...
        }, options);
        //this applies the plugin to all matching elements
        return this.each(function() {
            //code of the plugin comes here
            ...
        });
    }
})(jQuery);

 

我们将从script.js文件中调用插件  。需要的参数有:

 

  • shadowColor:主元素投射的阴影的颜色。
  • shadowLength:投影的长度。
  • shadowAngle阴影的角度。
  • shadowOpacity:阴影是不透明或透明的。
  • spacing:我们需要这个变量来扩展我们创建长阴影的元素周围的空间。这样,效果就会更明显。

 

要创建长阴影,我们将使用HTML5画布组件。我们可以创建一个内存画布,我们将在其上绘制原始图像元素及其阴影的副本。要绘制阴影,我们将简单地将图像元素的副本绘制在另一个的顶部,稍微带点偏移。

 

使用基于shadowLength和  shadowAngle参数的简单极坐标变换来计算份数和偏移量  。另外,我们必须根据shadowColor参数设置的阴影的颜色对这些副本进行着色  。 

 

因为我们将阴影画成彼此之间的多个图像,所以我们将以相反的顺序从后到前绘制它们,从最远离图像元素的阴影开始。然后我们必须通过shadowOpacity参数设置所产生阴影的不透明度  。

 

绘制阴影后,我们将简单地绘制原始图像。

 

我们来看看这个如何转换成jquery.longshadows.js文件中的代码  :

 

(function($) {
    $.fn.longshadows = function(options) {
        var settings = $.extend({
            shadowColor: "black",
            shadowLength: 100,
            shadowAngle: 45,
            shadowOpacity: 100,
            spacing: 0
        }, options);
 
        return this.each(function() {
            var img = this;
            img.onload = function() {
 
                var self = this;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                canvas.width = self.width + settings.spacing;
                canvas.height = self.height + settings.spacing;
 
                for (var r = settings.shadowLength; r >= 1; r--) {
                    var x = Math.round(r * Math.cos(settings.shadowAngle * Math.PI / 180));
                    var y = Math.round(r * Math.sin(settings.shadowAngle * Math.PI / 180));
 
                    ctx.save();
                    ctx.translate(x + settings.spacing / 2, y + settings.spacing / 2);
                    ctx.drawImage(self, 0, 0);
                    ctx.globalCompositeOperation = 'source-in';
                    ctx.fillStyle = settings.shadowColor;
                    ctx.rect(0, 0, canvas.width, canvas.height);
                    ctx.fill();
                    ctx.restore();
                }
                 
                var tempCanvas = copyCanvas(canvas, settings.shadowOpacity / 100.0);
 
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(tempCanvas, 0, 0);
                ctx.drawImage(self, settings.spacing / 2, settings.spacing / 2);
 
                self.onload = null;
                $(self).attr("src", canvas.toDataURL("image/png"));
            };
            img.src = img.src;
        });
    };
})(jQuery);
 
function copyCanvas(canvas, opacity) {
    var canvasDest = document.createElement("canvas");
    canvasDest.width = canvas.width;
    canvasDest.height = canvas.height;
    canvasDest.getContext("2d").globalAlpha = opacity;
    canvasDest.getContext("2d").drawImage(canvas, 0, 0);
    return canvasDest;
}

 

这个插件通过options传递参数。这些参数将与默认值合并并存储在  settings变量中。这样我们可以快速地使用插件,而不需要传递任何参数。

 

  img变量将保存于我们应用效果原始图像元素的引用。我们需要监听图像的onload 事件,以确保在应用效果时图像被完全加载。此外,将注意到,在onload 之后  还有一个img.src = img.src;。这将触发  onload功能,因为我们不确定浏览器加载图像和脚本的顺序。

 

在onload 处理程序内部  ,我们创建内存  canvas元素,我们将在其中绘制最终结果,与图像的大小相同spacing。然后,从最远点向中心开始,我们使用绘制的图像的偏移的极坐标变换绘制画布上的图像副本:

 

var x = Math.round(r * Math.cos(settings.shadowAngle * Math.PI / 180));
var y = Math.round(r * Math.sin(settings.shadowAngle * Math.PI / 180));

 

要在画布上绘制图像,我们使用画布2D上下文并调用  drawImage()函数。这将在画布上绘制图像的副本,但是我们需要的是它的彩色版本。为此,我们利用画布合成操作。在这个教程中,将 source-in与用shadowColor填充的矩形一起使用,这将使图像副本与原始图像具有相同形状但颜色是 shadowColor。 

 

请注意,如果你有多种颜色的图像,则结果将全部为相同的颜色,因为我们正在绘制阴影,而阴影通常是相同的颜色。

 

for循环负责绘制阴影; 然而,它是完全不透明的。我们希望能够使用shadowOpacity参数设置阴影不透明度  。为此,我们使用 copyCanvas()函数,该函数利用临时画布并将canvas内容的不透明度设置为指定的值。

 

我们必须在整个阴影被绘制出来时进行这一步,否则堆叠透明图像在彼此之上将导致渐变效果。

 

让我们来看看onload处理程序的最后两行  :

 

self.onload = null;
$(self).attr("src", canvas.toDataURL("image/png"));

 

第一行onload从图像中移除 处理程序。我们这样做是因为在下一行中,我们想将在画布上绘制的图像设置src为原始图像的新  图像。如果我们没有删除处理程序,那么我们将进入一个无限循环。

 

如何使用jQuery长阴影插件?

 

现在我们已经实现了这个插件,我们来看看我们如何实际使用它以及它产生的结果。为此,我们将使用该  script.js文件,我们将在其中调用刚创建的插件。

 

调用插件的最简单的方法是:

$(document).ready(function(){
    $("#logo").longshadows();
});

 

这将指示浏览器当页面完成加载时,调用longshadows()函数.

 

调用这样的插件将使用默认参数。由于使用这些默认参数的结果并不是很好,我们来看看我们如何改变它们。让我们像这样调用插件:

 

$(document).ready(function(){
    $("#logo").longshadows({
        spacing:50,
        shadowOpacity:30,
        shadowAngle:30,
        shadowLength:400
    });
});

这导致像这样的图像:

 

从我们的插件得到的图像

由于这个插件是可配置的,可以应用于任何图像,多个图像以及参数值的无尽组合,想象力是你唯一的限制。如果我们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插件的基础,它为你的图标添加了长阴影。你可以在此插件之上构建,使其适用于文本,或组合多个图像和阴影效果。

更多精彩内容请详见:http://igeekbar.com/igeekbar/post/328.htm

 

© 著作权归作者所有

igeekbar
粉丝 0
博文 12
码字总数 12613
作品 0
私信 提问
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
0
0
分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1
2011/07/19
2.1K
0
40 个让你的网站更加友好的 jQuery 插件

一个插件的基本功能是执行一个含有元素集合的函数数组。每个方法和jQuery核心组成一个插件,如.fadeOut()或.addClass()。一个jQuery插件是一个基本的可以扩充jQuery 原型对象的方法。当原型对...

oschina
2013/08/26
12.7K
25
2012年初的10个绝对让你惊喜的jQuery插件

日期:2012-3-29 来源:GBin1.com 今天GBin1分享给大家带来10个相当不错的jQuery插件,尤其是第一个和第二个,绝对超棒,希望大家能够应用到自己的项目和网站中。 1. jQuery Geo v1.0a4 来自...

gbin1
2012/03/31
4.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

枚举 创建/获取key,name,list

创建枚举 public enum MessageTypeEnum { // 类型:0.一般消息,1.公告消息,2交易消息,3.活动消息,4.其他消息 type_general("一般消息", "0"), type_ann("公告消息", "1")......

龘游戏人生龘
6分钟前
0
0
Linus 本尊来了!为什么 KubeCon 越来越火?

阿里妹导读: 从200人的小会议到3500 多位云原生和开源领域工程师齐聚一堂的大会,KubeCon 只用了四年,昨天,在KubeCon China 2019 上阿里巴巴宣布开源 OpenKruise,今天,Linus 本尊竟然现...

阿里云云栖社区
42分钟前
2
0
五小时构建云原生电商平台 | KubeCon SOFAStack Workshop 详解

本文根据 KubeCon China 2019 同场活动 SOFAStack Cloud Native Workshop 内容整理, 文末包含文档、PPT 地址,欢迎试用和提出建议。 2019 年 6 月 25 日,在 KubeCon China 2019,全球知名开...

SOFAStack
43分钟前
6
0
跨平台开发框架DevExtreme v19.1.4正式发布|附下载

DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动、Web开发框架,可以直接在Visual Studio集成开发环境,构建iOS,Android,Tizen和Windows Phone 8应用程序。D...

FILA6666
44分钟前
2
0
数据库链接断开 Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

报错信息如下: Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failureThe last packet successfully received from the server was 97,130 mill......

为了美好的明天
50分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部