[学习交流] 【济南校区】引入前端“插件”方法总结

2018-11-26 22:13 上传

本帖最后由大山哥哥于 2018-11-26 22:32 编辑

引入前端“插件”方法总结

该技术贴，面向主要从事后台开发对前台有一定兴趣的程序员。（文章末尾附资源下载链接）

最近和好多学生聊天，普遍反映感觉自己前端好弱。不知道前端框架该怎么学，好多前端效果都不会做，如果进入公司以后，如果公司没有专门的前端开发人员，前端的各种效果如果让自己做应该怎么办？

下面以一个前端效果“购物车飞入”为例，给大家分析总结一下如何引入已经编写好的前端“插件”。

一、“购物车飞入”

第一步：首先，从网上下载“购物车飞入”插件，这种类似的插件在网上有很多，分享两个我自己常用的网站 “17素材网：http://www.17sucai.com/ ”，“jQuery插件库 http://www.jq22.com/”

第二步：查看网页效果，并分析如何把效果移植到自己的项目中

分析页面源码

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>jQuery加入购物车飞入动画特效</title>
<!--引入购物车飞入相关js,css文件-->
<link rel="stylesheet" type="text/css" href="css/fly.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fly.min.js"></script>
<script>
<!--页面购物车具体实现JS代码-->
$(function() {
        var offset = $("#end").offset();<!--设置购物车飞入效果在页面的最终位置-->
        $(".addcar").click(function(event){<!--点击“加入购物车”按钮，触发“购物车”飞入效果-->
                var addcar = $(this);<!--获取当前点击的“按钮”标签-->
                var img = addcar.parent().find('img').attr('src');<!--获取标签的父类，并在父类下查找img标签且获取img标签的src的属性值，即:图片地址-->
                var flyer = $('<img class="u-flyer" src="'+img+'">');<!--构建“购物车飞入图片”-->
                flyer.fly({<!--调用Jquery封装的fly方法，实现飞入效果-->
                        start: {<!--飞入的初始位置-->
                                left: event.pageX,<!--点击位置的X轴位置-->
                                top: event.pageY <!--点击位置的Y轴位置-->
                        },
                        end: {<!--飞入的最终位置-->
                                left: offset.left+10,
                                top: offset.top+10,
                                width: 0,
                                height: 0
                        },
                        onEnd: function(){<!--飞入效果实现后，触发该事件-->
                                $("#msg").show().animate({width: '250px'}, 200).fadeOut(1000);
                                addcar.css("cursor","default").removeClass('orange').unbind('click');
                                this.destory();
                        }
                });
        });
});
</script>
</head>
<body>
<div id="main">
        <div class="demo"><!--商品列表位置-->
                <div class="box"><!--单个商品，每个商品一个div,后台获取商品列表后，遍历该div即可-->
                        <div class="info">
                                <img src="images/lg.jpg" width="180" height="180"><!--商品图片-->
                                <h4>¥<span>3499.00</span></h4><!--商品价格-->
                                <p>LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计</p><!--商品标题-->
                        </div>
                        <a href="javascript:void(0)" class="button orange addcar">加入购物车</a><!--加入购物车按钮-->
                </div>
                <div class="box">
                        <div class="info">
                                <img src="images/hs.jpg" width="180" height="180">
                                <h4>¥<span>3799.00</span></h4>
                                <p>Hisense/海信 LED50T1A 海信电视官方旗舰店</p>
                        </div>
                        <a href="#" class="button orange addcar">加入购物车</a>
                </div>
                <div class="box">
                        <div class="info">
                                <img src="images/cw.jpg" width="180" height="180">
                                <h4>¥<span>¥3999.00</span></h4>
                                <p>Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视</p>
                        </div>
                        <a href="#" class="button orange addcar">加入购物车</a>
                </div>
                <div class="box">
                        <div class="info">
                                <img src="images/ls.jpg" width="180" height="180">
                                <h4>¥<span>6969.00</span></h4>
                                <p>乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视</p>
                        </div>
                        <a href="#" class="button orange addcar">加入购物车</a>
                </div>        
        </div>
        </div>
        <div class="m-sidebar">
                <div class="cart">
                        <i id="end"></i>
                        <span>购物车</span>
                </div>
        </div>        
        <div id="msg">已成功加入购物车！</div>
</div>
</body>
</html>

第三步：把“插件”应用到项目中。

根据上述的源码分析，可以看到我们如果要使用“购物车飞入”插件，需要做的一下几步：

1.把静态页面所使用到的静态资源引入项目页面

2.把“购物车飞入”效果具体实现JS代码引入项目页面

   3.在页面定义购物车飞入效果“购物车”所在位置（即：图片飞入的最终位置）；购物车飞入事件触发条件&图片飞入开始位置

只需要按照上述方式操作，各种“前端效果”基本上信手拈来，再也不用担心前端效果的问题了。

总结：前台效果的实现总共分三步，1.找到适合的资源 2.分析页面源码 3.应用到项目中。当然分析页面源码的随着经验的提升会越来越容易，甚至后期我们还可以对已有的效果，根据我们自身项目的业务需求进行相应的修改，使它适应我们的业务需求。

购物车飞入.zip (202.59 KB, 下载次数: 8)

一个人一座城0.0 · 一个人一座城0.0

到此一游。。

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【济南校区】引入前端“插件”方法总结

1 个回复