简单介绍用一种快捷的方法实现大图居住全屏显示,要使用jquery中的技术

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #div{
            background: url(bg.jpg) no-repeat;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //获取浏览器的分辨率
            var clientWidth = $(window).width();
            var clientHeight = $(window).height();
            //设置div的宽和高,div的背景图就是你的大图
            $('#div').css({
                width: clientWidth,
                height: clientHeight
            });
        })
    </script>

</head>
<body>
    <div id="div"></div>
</body>
</html>
如果想要图片不缩放,请在css里面设置 background-position:100% 100%;

一个好用的JS 提示信息插件 noty

Github: https://github.com/needim/noty new Noty({ text: 'NOTY - a dependency-free notification library!', animation: { o...

阅读全文

chartjs —— jquery柱状图插件

官网地址: http://www.chartjs.org 文档:http://www.chartjs.org/docs/latest/charts/bar.html CDN: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2....

阅读全文

简单功能强大的jQuery图片剪裁插件Image Cropper

引入必要的js和css核心文件 <script src="/path/to/jquery.js"></script><!-- jQuery is required --> <link href="/path/to/cropper...

阅读全文

欢迎留言