前端大本营

HTML5,CSS3,Responsive,资料站

jQuery 2018年最好用的轮播插件

2018年最好用的jQuery轮播插件

JavaScript使用简单,但是从零开始编写代码是非常困难的。 因此,使用大家通常使用框架和库,其中jQuery具有很强的普及性。
jQuery插件可以通过简单地加载插件来实现大部分的基本功能,这是初学者非常喜欢的。
这一次,我们介绍了9个简单方便的jQuery轮播插件。 在2018让这些插件丰富我们的网站吧。

1. slick

jQuery slick slider

slick 是最方便和易于使用的jQuery轮播插件。 这是一个全能的插件,大多数你想要的功能都够被实现。
轮播功能能够完美的响应,并根据容器的大小而变化。 通过设置断点,还可以根据设备的大小显示不同的方式,还可以在智能手机上打开/关闭滑动操作。 您也可以设置一个无限循环,令人惊喜的是,您还可以使用键盘进行控制。
即使你是个新手,我们可以使用最少的代码来实现非常完美的效果。

2. Felicity

jQuery  slick slider

Felicity 首先支持自适应,可手控滑动的jQuery轮播插件。
轮播的设置侧重于CSS侧而不是jQuery侧的设置,所以非程序员也可以很容易地设置“我不知道jQuery或JavaScript,但是我可以使用CSS设置”。
这个插件有很多选择和API,这不仅令初学者满意,而且对于有经验的人也是如此。 它也支持自动播放和无限循环。

Posted in 本站原创 | jQuery 2018年最好用的 9款 轮播插件任你选择已关闭评论
背景

日企头头的需要,使用日本Monaca的HTML5 APP开发,制作一款简单的国内网页式APP,(本内容针对安卓,所以如果你是iOS系统可以略过)。制作其实简单,将静态页面上传到 Monaca的工作目录即可。可是还要弄个什么push推送,由于安卓的推送老祖是谷歌,当然在国内是被屏蔽的,那么Monaca的自带后台push也是基于谷歌的,当然选择不能用啊。
经过2天的摸索,总算叫我利用国内的极光推送服务,成功的实现了功能。

1. 注册极光
注册网站: https://www.jiguang.cn/
成功后,在后台,选择【极光开发者服务】→ 【创建应用】
在应用名称处,输入应用名称。
应用图标处,上传你的应用ICON,即可。
这样你在你的应用信息版面可以看到你刚刚创建的应用,选择设置,你就可以看到你的应用的 AppKey了,这个很重要,请自行复制好,之后要用到。
在下面找到【推送设置】,进入选择 【Android】, 在应用包名的地方输入你的 app的 パッケージ名, 即可。这里例子用”com.ttwinbug.app” 这个名称很重要,请自行复制好,之后要用到。


2. 下载极光
下载客户端集成插件 ,因为我们是基于HTML5开发的,所以下载PhoneGap版 https://github.com/jpush/jpush-phonegap-plugin
下载后不要着急上传到你的monaca 项目里,我们需要进行一些修改。


3. 修改极光推送插件的配置文件
使用文本编辑器,打开压缩文件根目录里的plugin.xml文件,找到 部分,并按照下面的样子进行修改。
    <!-- dependencies -->
    <dependency id="org.apache.cordova.device" />
    <dependency id="cordova-plugin-device" />
    <dependency id="cordova-plugin-jcore" />


查找 ,并按照第2步里面的 应用包名进行修改。

<category android:name="com.impresstech.compare"></category> 

查找 并按照第2步里面的 AppKey进行修改。
<meta-data android:name="JPUSH_APPKEY" android:value="2e4ba62d79de5febf2ace3bd" />

都是多数替换,不要只复制一处, 修改好后压缩成zip文件。 上传到你的monaca项目里的 【プロジェクト】下的【Condovaプラグイン】进行 Condovaプラグインのインポート
安装完后,在【有効なプラグイン】会显示JPush块,选择设置
填入你的AppKey
APP_KEY=2xxsdfsefdsfesdfesfd



4. 在代码中输入相应的js代码
<script>
document.addEventListener("deviceready",function(){    
    //插件初始化	
    window.plugins.jPushPlugin.init();
    }, 
    false
);
</script>

之后你就可以顺利的进行安卓的生成了。将生成好的apk安装到手机

5. push送信
我们再次回到极光推送的后台,进入你的应用
选择【推送】→ 【发送通知】
填好内容,选择好 安卓平台,立即送信即可。这样我们就完成了整个推送app的制作过程。
Posted in Monaca App开发, 本站原创 | Monaca 安卓app如何添加国内push推送(极光推送)已关闭评论

随着响应式设计的诞生, 一个页面在不同终端运行已经成为可能
同时,PC下的大图片为手机端带来了很多的问题,如数据流量大,速度慢,严重影响了用户的访问及体验。
这时候HTML5适时的提供了2个属性一个元素来解决这个问题。

  1. srcset属性
  2. sizes属性
  3. picture元素
srcset属性

以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像。每一个字符串由以下组成:

  1. 一个图像的 URL。
  2. 可选的,空格后跟以下的其一:
    • 一个宽度描述符,这是一个正整数,后面紧跟 ‘w’ 符号。该整数宽度除以sizes属性给出的资源(source)大小来计算得到有效的像素密度,即换算成和x描述符等价的值。
    • 一个像素密度描述符,这是一个正浮点数,后面紧跟 ‘x’ 符号。

如果没有指定源描述符,那它会被指定为默认的 1x。
在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时,会导致该值无效。重复的描述符(比如,两个源 在相同的srcset两个源都是 ‘2x’)也是无效的。
浏览器选择在给出的时间点显示大部分 adequate 图片。

以上为 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img 对srcset属性的说明

实际使用的例子
<img srcset = "img-320w.jpg 320w, img-480w.jpg 480w, img-768.jpg 768w" src="img-1024.jpg" sizes="...." alt="srcset" />

这样我们就可以根据窗体的宽度来自动使用不同尺寸的图片了

sizes属性

表示资源大小的以逗号隔开的一个或多个字符串。每一个资源大小包括:

  1. 一个媒体条件。最后一项一定是被忽略的。
  2. 一个资源尺寸的值。

资源尺寸的值被用来指定图像的预期尺寸。当srcset使用 ‘w’ 描述符时,用户代理使用当前图像大小来选择srcset中合适的一个图像URL。 被选中的尺寸影响图像的显示大小(如果没有CSS样式被应用的话)。如果没有设置srcset属性,或者没值,那么sizes属性也将不起作用。

以上为 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img 对sizes属性的说明

实际使用的例子
<img srcset = "...." sizes="(max-width:320px) 100vm, (max-width:480px) 80vm, 768px" src="img-1024.jpg" alt="sizes" /> #其中vm代表相对于视窗的宽度或高度,取决于哪个更小

*PS 注意,sizes和srcset要配合使用。 否则无效

picture 元素

picture 元素和media属性旨在使艺术设计变得容易。通过为不同情形提供不同图片(通过媒体查询进行测试),无论什么分辨率,我们都能始终将图像中最重要的元素保持在焦点。

<picture><source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"><img src="big.jpg" alt="picture"></picture>

通过这些HTML5的技术,我们可以更好的减少资源浪费。给用户带来跟快速的体验

Tags:
Posted in 本站原创 | HTML5带来的新技术1 响应使图片技术已关闭评论

虽然CSS3已经流行很久了,但是总有一部分人还在使用IE8的浏览器。
没有办法,作为一个负责人的前端人员,总是要求满足客户的需求, 如何才能叫IE8 实现rgba的效果呢?

在IE8实现背景透明的效果
div{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
    background: rgba(0, 0, 0, 0.4);
}
div:not(:target){
    filter: none;
}
代码说明

利用IE以前制作过渡效果的代码,我们可以将起始颜色,和结束颜色设置为相同, 这样就可以实现半透明状态。
startColorstr=#66000000 其中66为透明度, 后面的000000为16进制的颜色代码
透明度的设置可以参考以下表格

透明度 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
00 1A 33 4D 66 80 99 B3 CC E6 FF

Tags: , ,
Posted in 本站原创 | 使用Hack,让IE8实现 rgba的效果已关闭评论

在使用这个插件的时候, 出现很多的问题,首先就是网上大家都遇到的只显示工具栏,没有按钮的问题(iOS开发)。
多处查找资料,最后还是在国外的网站上发现了解决方法,国内的说明很多都失效或是干脆没用。

无按钮解决方法
var ref = cordova.ThemeableBrowser.open(url, '_blank', {
                statusbar: {
                    color: '#ffffff00'  #元代码为#ffffffff,导致状态栏纯白什么也看不见。最后两位为透明度设置。
                },
                toolbar: {
                    height: 44,
                    color: '#f0f0f0ff'
                },
                title: {
                    color: '#003264ff',
                    showPageTitle: true
                },
                backButton: {
                    wwwImage: 'img/back@2x.png',  #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/back_pressed.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    width: 15,
                    height: 22,
                    align: 'left',
                    wwwImageDensity: 1,
                    event: 'backPressed'
                },
                forwardButton: {
                    wwwImage: 'img/forward@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/forward_pressed@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImageDensity: 1,
                    align: 'right',
                    event: 'forwardPressed'
                },
                backButtonCanClose: true
            }).addEventListener('backPressed', function(e) {
                //alert('back pressed');
            }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
                console.error(e.message);
            }).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
                console.log(e.message);
            }).addEventListener('loadstop', function(event) {
                // login & passの保存
                var set_login = 'localStorage.setItem("login", $("#user_login").val() );';
                var set_pass = 'localStorage.setItem("pass", $("#user_pass").val() );';
                ref.executeScript({ code: '$("#wp-submit").click(function(){' + set_login + set_pass + '});' });
            });

看了我代码里的说明还不赶快去试试。

附带插件地址

Posted in Monaca App开发, 本站原创 | PhoneGap的 In-App Browsers扩展插件 ThemeableBrowser插件的使用方法已关闭评论

6月底刚结束佳X公司的产品公布,紧接着7月份又接到一份制作产品比较的MiniSite任务。任务说起来也不难,一份excel表,一个xd原型设计。接着就是经理Barabara的讲了一堆(好似没记住)。项目内容

  1. 制作两个页面,一个是产品列表,总共13个产品。一个是比较结果页面。
  2. 两个页面均要对要对应Responsive(响应式设计)
  3. 产品列表页要求首部要一个整屏banner, banner中间有一个一直居中的标题。点里面的Get Started按钮自动翻篇到下面的列表
  4. 产品列表部分,每一个产品都有一个compare按钮,单击后产品反转,背景发生改变及Compare按钮的名称改为Selected,并在页面的下面做一个固定的显示几个被选中的提示栏
  5. 下面的提示栏有一个按钮,单击后会转到比较结果页面,并将选中的产品ID传给比较结果页面
  6. 比较结果页面,要求使用Ajax技术,根据产品ID,获得产品资料
  7. 比较结果页面,要求可以手动拖拽页面
  8. 比较结果页面,要求有帮助功能。及顶部固定提示产品名称栏
7月7日

一天将PC版的展示做了出来,当然功能没有做。本来这里打算用BootStrap, 后来觉得用框架用的太多,好久没自己手写了。索性来了一把手写Responsive

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EOS Compare</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--Responsive的关键部分,控制屏幕缩小后的显示比例-->
<meta name="WT.cg_abc" content="">
<meta name="WT.cg_refer" content="">
<!-- 由于没有太多需要打开页面就加载的内容js不放在这里影响速度-->
<link href="css/site.css" rel="stylesheet" />   <!--本人的样式表->
</head>

<body>
*******省略*******
</body>
</html>
这里遇到第一个问题,产品列表页打开后,有一个整屏,内容上下左右居中。

为了保证能够整屏, 我把html, body, section_top, top_banner都设成了100%高度。背景图片要一直居中,所以设置了一个居中背景,之前说的难点上下左右居中,设置了元素的高宽,position设置成absolute后,就简单了。top:0; right=0; bottom:0; left:0; margin:auto; 这回去看看吧,不论在什么情况下这个元素都居中。这里没有太多的难点

HTML
<div class="section_top">
    <div class="header">
        <div class="h_logo"><img src="img/logo.png" alt="" title=""></div>
        <div class="sub_logo"><img src="img/sub_logo.png" alt="" title=""></div>
        <div class="mb0"></div>
    </div>
    <div class="top_banner">
        <div class="top_in">
            <h1 class="size60 pb20">EOS COMPARE</h1>
            <a href="#camera" class="blue_bg button size24">Get started</a>
        </div>
    </div>
</div>
CSS
body{font:14px/1.2 'RyomCN-sanserif-li', 'Microsoft Yahei', Arial, Helvetica, SimHei, san-serif; color: #333; height: 100%;}
html,body{*background-image:url(#); background-attachment:fixed;} /*background-attachment:fixed 设置这个可以防止absolute做伪fixed时抖动的问题,其实这里没有任何关系*/
a{color: #FFF; text-decoration: none;}
/*INDEX PAGE*/
.contriant{min-height: 100%;}
.header{position:relative; z-index: 1;}
.header .h_logo{float: left; margin: 20px 0 0 30px;}
.header .sub_logo{float: right; margin: 25px 30px 0 0;}
.section_top{width: 100%; min-height: 100%; position: relative; display: block; box-sizing: border-box;}
.top_banner{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/top.jpg) no-repeat center; background-size:cover;} /*做一个一直居中的背景,并随着屏幕的尺寸自动调整*/
.top_banner h1{color: #FFF; font-weight: normal;}
.top_in{height: 140px; text-align: center; width: 1024px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

接下来制作四列产品列表,这里的问题出自于如何做一个统一格式的列表框,不用切割。我的想法就是大家左右上下都设10px的margin,背景是白色居中 + 响应式设计基本没问题。

<div class="camera_list" id="camera">
            <div class="col-4 center">
                <img class="pb10" src="img/80d.png" alt="eos 80d" />
                <img class="pb30" src="img/80d_logo.png" alt="eos 80d" />
                <a data-id="1" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/77d.png" alt="eos 77d" />
                <img class="pb30" src="img/77d_logo.png" alt="eos 77d" />
                <a data-id="2" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/800d.png" alt="eos 800d" />
                <img class="pb30" src="img/800d_logo.png" alt="eos 800d" />
                <a data-id="3" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/760d.png" alt="eos 760d" />
                <img class="pb30" src="img/760d_logo.png" alt="eos 760d" />
                <a data-id="4" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/750d.png" alt="eos 750d" />
                <img class="pb30" src="img/750d_logo.png" alt="eos 750d" />
                <a data-id="5" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/700d.png" alt="eos 700d" />
                <img class="pb30" src="img/700d_logo.png" alt="eos 700d" />
                <a data-id="6" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/200d.png" alt="eos 200d" />
                <img class="pb30" src="img/200d_logo.png" alt="eos 200d" />
                <a data-id="7" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/100d.png" alt="eos 100d" />
                <img class="pb30" src="img/100d_logo.png" alt="eos 100d" />
                <a data-id="8" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/1300d.png" alt="eos 1300d" />
                <img class="pb30" src="img/1300d_logo.png" alt="eos 1300d" />
                <a data-id="9" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m5.png" alt="eos m5" />
                <img class="pb30" src="img/m5_logo.png" alt="eos m5" />
                <a data-id="10" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m6.png" alt="eos m6" />
                <img class="pb30" src="img/m6_logo.png" alt="eos m6" />
                <a data-id="11" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m3.png" alt="eos m3" />
                <img class="pb30" src="img/m3_logo.png" alt="eos m3" />
                <a data-id="12" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="col-4 center">
                <img class="pb10" src="img/m10.png" alt="eos m10" />
                <img class="pb30" src="img/m10_logo.png" alt="eos m10" />
                <a data-id="13" class="button blue_bg" href="javascript:;">选择</a>
            </div>
            <div class="mb0 pb40"></div>
        </div>
.col-4{width: 236px; height: 260px; margin: 10px; border-radius: 7px; border: 1px solid #CCC; float: left; padding: 0; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.col-4.gray_bg{transform: rotateY(360deg);}

样式表简单说明 border-radius圆角, transform-style: preserve-3d设置3D旋转,速度定为0.8秒内完成 cubic-bezier自定义过渡效果 rotateY(360deg) Y轴360度旋转

Posted in 本站原创 | 【项目1】产品比较页面已关闭评论
2017 02/22 周三

代码简洁之路

在我们进行项目并进行代码之前,首先我们要了解,作为程序员,应该了解写代码的几个基本问题,

代码简洁

代码简洁换句话说,神在细节之中。我一直推荐代码中的战斗机 5S哲学(参考 代码整洁之道)
  1. 整理(Seiri), 弄清楚项目的目的,想要做什么,怎么做
  2. 整顿(Seiton), 将每段代码都放到它该在的地方。
  3. 清楚(Seiso),将每段代码都做好注释,必要时制作文档
  4. 清洁(SeiKetsu), 制作标准文档,严格执行
  5. 身美(Shitsuke),在实践中贯彻规程,并且要乐于改进。

如何写出简洁的代码?

你可以先要求和问问自己 1. 是否在意你的代码 2. 能否通过所有的测试 3. 尽可能的小,只做一件事 4,.不要重复 5.写出易读的代码

接下来,我们就开始谈谈如何写出简洁的代码

一,有意义的命名

1. 名副其实, 能够体现本意的名称。 2. 避免误导, List, Group完全不同的两个意思。不要混淆 3. 做有意义的区分。Name, NameInfo,就是一个不好的例子 4. 使用读的出来的名称,减少自造词(国人比较苦逼),也可以使用拼音 5. 使用可以搜索的名称,作用在于出问题的时候,便于找到 6. 尽量不使用前缀或后缀 7. 避免思维映射, 避免读者错误的领会你的名称 8. 类名尽量用名词或名词短语,不要使用动词 9. 方法名应当是动词或动词短语,可以使用is, get, set, save等做前缀 10. 给每个概念对应一个词,并使其贯穿始终。 11. 不要使用双关语,即一词多个方法。容易混淆读者 12. 添加适当的语境, 告诉读者此变量属于哪里,也可以使用类 13. 不要添加没有用的语境

二,如何写函数

01. 首先函数要短小, 可能的话,将函数控制在20行以内。 也不要叫一行写的太长。像if, else, while等语句内代码块,我们可以使用函数来代替。减少了缩进层级,更容易理解。 02. 函数应该做一件事, 做好这件事,只做这一件事 03. 没个函数一个抽象层级, 没个函数尽量保持一个层级。 04. 使用描述性的名称。 05. 函数参数,尽可能保持2个参数以下,不得已用3个,4个参数的时候,完全是一场噩梦
  1. △尽量不要使用判断型参数
  2. △给函数起一个好名字,使之便于记忆
06. 分隔指令和询问 07. 使用异常替代返回错误码
  1. △将try/catch代码从主代码中抽离出来,是代码更易于理解和修改
  2. △处理错误就是一件事。
08. 别重复自己,尽量消除代码中的重复,它导致了程序臃肿 09. 以上的内容都属于函数的打磨阶段,没有谁能够一上来就能够按照规则写出代码。我们将代码当作文章一样,反复推敲,打磨才能成为最后简洁的代码

三,注释

先借用原作者的话,“什么也比不上放置良好的注释来的有用,什么也不会比乱七八糟的注释更有本事搞乱一个模块。什么也不会比陈旧,提供错误信息的注释更有破坏性” 代码存在的越久远,就离其所描述的代码越远,越来越变得全然错误,原因很简单,程序员不能坚持维护注释,所以尽可能用代码来代替注释,不过这个很难,所以我们尽量减少注释 01. 注释不能美化糟糕的代码 写注释的常见动机之一就是糟糕的代码的存在, 把注释写好,不如把代码弄干净 02. 用代码阐述,尽量少些注释 03. 写好的注释,不过要记住,唯一真正好的注释是你想办法不去写注释
  1. △法律信息,公司规范等信息注释,完全可以不用写在文件注释内, 转到一个许可或是文档更好
  2. △用注释来提供基本信息
  3. △用注释来说明某个方法的意图
  4. △把难懂的参数或返回值翻译成某种可读形式
  5. △用注释来警示其他程序员
  6. △用注释来放大某些看起来不合理的代码的重要性
  7. △删除注释掉的代码,你很可能永远也不会用他们
  8. △注释不需要太多的信息,简短精悍

四,格式

格式很重要,代码格式不可忽略,必须严肃对待。代码格式关乎沟通,而沟通是专业开发者的头等大事。 01. 垂直格式
  1. △注意垂直方向的区隔,通过区隔来分开两个函数,方法等
  2. △紧密相关的代码需要垂直的靠近,减少中间的注释段
  3. △关系密切的方法函数,尽量放到一个文件内,位置靠近。
  4. △垂直顺序, 将被调用的函数放置在执行函数的后面。建立一个自顶向下贯穿源代码模块的良好信息流
02. 横向格式 程序员们更喜欢短代码(20~60字符)
  1. △在赋值操作符周围加上空格字符,以此达到强调目的。
  2. △不要再函数名和括号之间加空格,函数与其参数密切相关。
  3. △注重运算符优先级,乘除左右不用空格,加减使用
  4. △去掉没有必要的水平对其,它容易使人忽略重点
  5. △利用好缩进,来洞悉文件的结构,代码的结构
  6. △删除没有用的空范围,所谓的空范围就是if, while里面不存在任何内容
03. 制定一套完善的团队代码规则 一组开发者应当认同一种风格的代码,每个成员都应该采用那种风格。

五,对象和数据结构

过程式代码(使用数据结构的代码)便于在不改动既有数据结构的前提下添加新函数。面向对象代码便于在不改动既有函数的前提下添加新类。 得墨忒尔律 认为,模块不应该了解它所操作对象的内部情形。方法不应该调用有任何函数返回的对象的方法。换言之,只跟朋友说话,不与陌生人谈话。

五. 错误处理

代码整洁需要错误处理,错误处理要从主体中分离出去。 尽量减少Null的输出和判断。

六. 类

类可以说是所有面向对象编程的高层次结构,编写代码简洁的类,应该注意什么? 01. 类应该短小
  1. △单一权责原则, 系统应该由许多短小的类而不是少量巨大的类组成。没个小类封装一个权责,只有一个修改的原因,并与少数其他类一起协同达到期望的系统行为。
  2. △内聚,如果一个类中的每一个变量都被每个方法所使用,则该类具有最大的内聚性。
  3. △保持内聚性就会得到许多短小的类
Tags: , ,
Posted in 本站原创 | 代码简洁之路已关闭评论
升级了新版后的Firefox浏览器后,打开如淘宝之类的网站,经常会在浏览器的上班弹出一个询问是否可以的提示条,即使你选择了 长期允许,在你打开下一页的时候,还是会弹出 火狐淘宝插件 非常的令人烦恼。 解决方案 Step1. 按Alt键调出隐藏的菜单,选择工具 → 附加组件 Step2. 在附加组件管理器中选择相应弹出的插件名称 → 将状态改成总是激活 火狐淘宝插件 这样我们的火狐浏览器访问有指定插件的网站时,就不会老是弹出烦人的提示了。
Posted in 本站原创 | 关闭 火狐浏览器 烦人的插件询问已关闭评论

使用 jQuery 和 CSS 判断 iPhone6 PLUS 及各种技巧

iPhone6 PLUS *************************************************************************************** 前提 苹果公司发布了 iPhone6 及 iPhone6 PLUS, 同时,苹果手机产品的屏幕尺寸又发生了新的变化。 作为合格的前端,我们又该在Javascript 和 CSS中添加相应的代码来适应苹果的各种改变。 使用Javascript (jQuery) 来判断是否是 iPhone6 PLUS Javascript可以通过 devicePixelRatio 获取显示器的 Ratio值 iPhone6 PLUS 的这个值是 3 iPhone5/5s/6 的devicePixelRatio值是 2
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        alert('iPhone6 Plus!!'); //「iPhone6 Plus」処理
    }
}
使用Javascript 判断 iPhone6 PLUS 的屏幕状态(横向? 竖向?)
if(navigator.userAgent.indexOf('iPhone') > 0){
    if(window.devicePixelRatio == 3) {
        window.onorientationchange = setView;
        setView();
 
        function setView(){
            if(window.orientation == 0){
                alert('portrait:iPhone6 PLUS 竖向'); 
            } else {
                alert('landscape:iPhone6 PLUS 横向'); 
            }
        }
    }
}
为 iPhone6 PLUS 横向的时候添加 Class
<script>
$(function(){
    var lsClass = 'ip6landscape';
    if(navigator.userAgent.indexOf('iPhone') > 0){
        if(window.devicePixelRatio == 3) {
            window.onorientationchange = setView;
            setView();
 
            function setView(){
                if(window.orientation == 0){
                    $('body').removeClass(lsClass);
                } else {
                    $('body').addClass(lsClass);
                }
            }
        }
    }
});
</script>
利用CSS来判断 iPhone6 PLUS
@media screen and (-webkit-device-pixel-ratio:3) {
    body {
        color: #fff;
        background: #333;
    }
}
利用CSS来判断 iPhone6 PLUS的屏幕状态(横向? 竖向?)
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: portrait) {
    body {
        color: #fff;
        background: #333;
    }
}
@media screen and (-webkit-device-pixel-ratio:3) and (orientation: landscape) {
    body {
        color: #000;
        background: #ccc;
    }
}
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: , ,
Posted in 本站原创 | 使用 jQuery 和 CSS 判断 iPhone6 PLUS 及各种技巧已关闭评论

默认状态

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

#scroll-all-1 .scroll-box{
	overflow: auto;
}

自定义纵版

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s2.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s2.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}

自定义横版

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s3.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #a3d2a0;
}
.s3.scroll-box::-webkit-scrollbar:horizontal{
	height: 5px;
	background: #a3d2a0;
}
.s3.scroll-box::-webkit-scrollbar-thumb{
	background: #479443;
	border-radius: 2px;
}
.s3.scroll-box::-webkit-scrollbar-thumb:horizontal{
	background: #479443;
	border-radius: 2px;
}

自定义纵横样式

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s4..scroll-box::-webkit-scrollbar:horizontal{
	height: 5px;
	background: #a3d2a0;
}
.s4.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}
.s4.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s4.scroll-box::-webkit-scrollbar-thumb:horizontal{
	background: #479443;
	border-radius: 2px;
}

自定义滚动条及背景色

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s5.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s5.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}
.s5.scroll-box::-webkit-scrollbar-track-piece:start{
	background: #9aadfc;
}
.s5.scroll-box::-webkit-scrollbar-track-piece:end{
	background: #a3d2a0;
}
Tags: ,
Posted in 本站原创 | 教你如何自定义Android和iPhone 浏览器中显示滚动条已关闭评论