元旦活动页面总结

1一个日历插件

代码格式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        .box{margin: 200px auto;width: 500px;}
        </style>
        <link rel="stylesheet" href="css/mobiscroll.2.13.2.css" />
        <script src="js/jquery-3.0.0.js"></script>
        <script type="text/javascript" src="js/mobiscroll.2.13.2.js" ></script>
    </head>
    <body>
        <div class="box">
            <input type="text" name="one" id="one" value="2016-01-02" />
            <input type="text" name="one" id="two" value="2016-01-02" />
        </div>
    </body>
</html>
<script>
     $(function () {  
        $("#one").mobiscroll().date({  
            theme: "android-ics light",  
            lang: "zh",
            startYear:2015,
            cancelText: null,  
            dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式  
            // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现  
            //onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮  
            headerText: function (valueText) { //自定义弹出框头部格式  
                array = valueText.split('-');  
                return array[0] + "年" + array[1] + "月" +array[2] + "日";  
            }
        });
        
        $("#two").mobiscroll().date({  
            theme: "android-ics light",  
            lang: "zh",
            startYear:2015,
            cancelText: null,  
            dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式  
            // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现  
            //onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮  
            headerText: function (valueText) { //自定义弹出框头部格式  
                array = valueText.split('-');  
                return array[0] + "年" + array[1] + "月" +array[2] + "日";  
            }
        });  
        });  
</script>

2、获取一个元素的高度：height（）;innerHeight();outerHeight();

3、获取一个元素定位后 距离顶部的距离:$('.ele').positiong().top;

4、背景渐变

#box{
                width: 600px;
                height: 300px;
                background: linear-gradient(125deg ,rgb(35, 207, 252) 20%,rgb(135, 107, 152) 40%, rgb(195, 105, 199) 60%,rgb(15, 205, 99) 80%, rgb(225, 175, 19) 100%);
            }

 

posted @ 2016-12-23 14:39  盖大楼  阅读(204)  评论(0)    收藏  举报