jquery插件-div跟随屏幕宽度变化

最新推荐文章于 2020-11-19 22:18:18 发布

AsaZyf

最新推荐文章于 2020-11-19 22:18:18 发布

阅读量635

点赞数

文章标签：插件 jquery

本文链接：https://blog.csdn.net/AsaZyf/article/details/82455923

版权

jQuery插件同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery初级

11 篇文章 0 订阅

订阅专栏

html：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
       <script type="text/javascript" src="js/center-1.2.js" ></script>
   </head>
   <body>
       <div id="box">

       </div>
       <script>
           $("#box").center()
       </script>

   </body>
</html>

js：

;(function($){
   function Center(el,opt){
       this.$el = el
       this.defaults = {
           "background":"red",
           "width":100,
           "height":100,
           "position":"absolute"
       }
       this.options = $.extend(this.defaults,opt);
   }
   Center.prototype = {
       init:function(){
           this.$el.css({
               "background":this.options.background,
               "width":this.options.width,
               "height":this.options.height,
               "position":this.options.position
           })
           this.center() //调用center方法
           return this.$el
       },
       center:function(){
           this.$el.css({
               "top":($(window).height()-this.options.height)/2,
               "left":($(window).width()-this.options.width)/2
           })
           this.size() //调用size方法
       },
       size:function(){
           //完成div跟随屏幕宽度变化
           var _this=this
           $(window).resize(function(){
               _this.$el.css({
   "top":($(window).height()-_this.options.height)/2,
               "left":($(window).width()-_this.options.width)/2
               })
           })
       }
   }
   $.fn.center = function(options){
//       console.log(this)
       var center = new Center(this,options)
       return center.init()
   }
})(jQuery)