js及jquery常用插件

1、backstretch背景图片插件 可实现背景自适应效果

<script src="dist/js/lib/backstretch/jquery.backstretch.min.js"></script>
$("body").backstretch("dist/img/background_index.png");

2、滚动条插件

<script src="dist/js/lib/nicescroll/jquery.nicescroll.min.js"></script>
$(".cityContainer ul").niceScroll({
  //滚动条配置
});

3、将某个页面元素钉在某个位置

<script src="dist/js/lib/jquery.pin-gh-pages/jquery.pin.js"></script>
$(".pinned").pin({
    containerSelector: ".container"  //钉在某个容器内
    minWidth: 940                    //在小尺寸屏幕上禁用
});

4、echarts图表使用

<script src="dist/js/lib/echarts/echarts4.js"></script>
var clientWidth = document.documentElement.scrollWidth; //获取屏幕尺寸
var scale = clientWidth / 1920; //缩放比例
var llncharts = echarts.init(document.getElementById('id'));
var option = {};
llncharts.setOption(option);
//随屏幕大小改变刷新echarts图
window.onresize = function() {
    llncharts .resize();
}

5、城市三级联动

<div class="zcityGroup" city-range="{'level_start':1,'level_end':3}" city-ini="广东,深圳市,龙华新区"></div>
<script type="text/javascript" src="dist/js/zcity.js"></script>
zcityrun('.zcityGroup');

6、日历框

<input type="text" id="test1" placeholder="请选择日期">
<script src="dist/js/lib/laydate/laydate.js"></script>
laydate.render({
    elem:'#test1'
})

7、手机端弹框选择

<link rel="stylesheet" href="dist/js/lib/mobileSelect.js-master/css/mobileSelect.css">
<div id="trigger1" class="trStyle">请填写</div>
<script src="dist/js/lib/mobileSelect.js-master/js/mobileSelect.js"></script>
var cardType = ['身份证', '护照', '军官证', '士兵证', '回乡证', '临时身份证'];
var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1',
    title: '单项选择',
    wheels: [{
        data: cardType
    }],
    position: [0], //初始化定位 打开时默认选中的哪个 如果不填默认为0
});

8、