首页 > 代码库 > base.js

base.js

2024-11-05 07:52:39   203人阅读

目的：记录自己发现并编写的js继承方案。

js作用：为移动应用中，不同大小屏幕上显示不同大小字体的问题提供解决方案。

base.js:

var basejs = function () {    this.base = {        model: {            /*屏幕宽*/            ScreenWidth: $(window).width()        },        /*计算页面相关文字字体，图标宽度*/        calcSize: function () {            var model = this.model;            //产品字体大小,子级a标签大小             var psize = model.ScreenWidth * (12 / 320);            psize = psize > 16 ? 16 : psize;            //星星大小            var star_img = model.ScreenWidth * (11 / 320);            star_img = star_img > 18 ? 18 : star_img;            //供应商牌牌大小            var supplier_ico = model.ScreenWidth * (35 / 320);            supplier_ico = supplier_ico > 42 ? 42 : supplier_ico;            /*********样式***********/            var css = "<style type=\"text/css\">";            //产品字体大小            css += ".page_js_font{font-size:" + psize + "px} ";            //子级a标签大小             css += ".page_js_next_pa a{font-size:" + psize + "px }"            //星星大小            css += ".page_js_star{width:" + star_img + "px;}";            //供应商牌牌大小            css += ".page_js_supplier_ico{width:" + supplier_ico + "px;}";            css += "</style>";            $("html").append(css);        }    };};

 

应用实例:

js:

/// <reference path="../AppExtends.js" />/// <reference path="base.js" />/// <reference path="../lib/underscore.js" />/// <reference path="../lib/iscroll.js" />var air = {    index: new basejs()};air.index.ready = function () {    var _fn = air.index.fn;    var _model = air.index.model;    var _base = air.index.base;    _base.calcSize();    _fn.swperLoad();};air.index.model =    {    };air.index.fn =    {        getmodel: function () {            return air.index.model;        },        swperLoad: function () {            new Swiper(‘.swiper-container‘,                {                    slideElement: "a",                    pagination: ".pagination",                    calculateHeight: true                });        }    };

 

html实例：

     <div class="warp_jgl_Rb">                    <i class="f_L"><span class="page_js_font">Reviews:</span></i>                    <img class="page_js_star" src="http://www.mamicode.com/" />                    <img class="page_js_star" src="http://www.mamicode.com/" />                    <img class="page_js_star" src="http://www.mamicode.com/" />                    <img class="page_js_star" src="http://www.mamicode.com/" />                    <img class="page_js_star" src="http://www.mamicode.com/" />                </div>

 

base.js


联系
我们