• 用jquery向网页添加背景图片 拉伸 模糊 遮罩层 代码


    方法一:手动添加

    1.在body内任意位置添加html代码

    <div id="web_bg" style=" position:fixed; _position:absolute; top:0; 100%; height:100%; z-index:-2">
                <img style="position:fixed;" src="http://img.bizhi.sogou.com/images/2014/07/02/701582.jpg" height="100%" width="100%" />
    </div>
    <div class="" id="web_bg_mask" style="height:100%; 100%; position:fixed; _position:absolute; top:0; z-index:-1;"></div>

    2.添加jquery.js文件(省略)

    3.页面加载完成后渲染背景(写在html页面中)

    <script>
                $().ready(function() {
                    blurWebBackground(2);
                    maskWebBackground(4);
                });
    </script>

    4.编写 blurWebBackground(); maskWebBackground();代码(写在外部js文件或本页面script标签内都可)

    <script>
    function
    blurWebBackground(blur) { blur = blur + "px"; $("#web_bg").css('-moz-filter', 'blur(' + blur + ')'); $("#web_bg").css('-webkit-filter', 'blur(' + blur + ')'); $("#web_bg").css('-o-filter', 'blur(' + blur + ')'); $("#web_bg").css('-ms-filter', 'blur(' + blur + ')'); $("#web_bg").css('filter', 'blur(' + blur + ')'); } function maskWebBackground(opacity) { $("#web_bg_mask").css('opacity', opacity / 10); $("#web_bg_mask").css('filter', ' alpha(opacity=' + opacity * 10 + ')'); $("#web_bg_mask").css('background-color', '#333'); }
    </script>

    方法二:直接用jquery自动完成

    1.编写ready函数,页面加载完成以后生成背景图片并处理

    <script>
                $().ready(function() {
             addBackgroundImg();
    blurWebBackground(
    2);
              addMask(); maskWebBackground(
    4); }); </script>

    2.各种方法实现

    function blurWebBackground(blur)
    {
        blur = blur + "px";
        $("#web_bg").css('-moz-filter', 'blur(' + blur + ')');
        $("#web_bg").css('-webkit-filter', 'blur(' + blur + ')');
        $("#web_bg").css('-o-filter', 'blur(' + blur + ')');
        $("#web_bg").css('-ms-filter', 'blur(' + blur + ')');
        $("#web_bg").css('filter', 'blur(' + blur + ')');
    }
    
    function maskWebBackground(opacity)
    {
        $("#web_bg_mask").css('opacity', opacity / 10);
        $("#web_bg_mask").css('filter', ' alpha(opacity=' + opacity * 10 + ')');
        $("#web_bg_mask").css('background-color', '#333');
    }
    //可以指定加载的图片名称,前提是必须在src处填好预设的你的图片存储uri地址,只需替换ImgName(图片名称)即可
    function addBackgroundImg(ImgName){ var BacImg= "<div id='web_bg' style=' position:fixed; _position:absolute; top:0; 100%; height:100%; z-index:-2'>"; BacImg += "<img style='position:fixed;' src='img/"+ImgName+".jpg' height='100%' width='100%' />"; BacImg += "</div>";
        $(document.body).append(BacImg);
    }

    //固定图片
    function addBackgroundImg(){ var BacImg= "<div id='web_bg' style=' position:fixed; _position:absolute; top:0; 100%; height:100%; z-index:-2'>"; BacImg += "<img style='position:fixed;' src='http://img.bizhi.sogou.com/images/2014/07/02/701582.jpg' height='100%' width='100%' />"; BacImg += "</div>";
        $(document.body).append(BacImg);
    }


    //也可以指定图片Uri
    function addBackgroundImg(ImgUri){
        var BacImg= "<div id='web_bg' style='position:fixed; _position:absolute;  top:0; 100%; height:100%; z-index:-2'>";
        BacImg += "<img style='position:fixed;' src='"+ImgUri+"' height='100%' width='100%' />";
        BacImg += "</div>";
        $(document.body).append(BacImg);
    }

    function addMask()
    {
        var BacMask = "<div id='web_bg_mask' style='height:100%; 100%; position:fixed; _position:absolute; top:0; z-index:-1;'></div>";
        $(document.body).append(BacMask);
    }
  • 相关阅读:
    AGC002
    ICPC 北美Mid Central 2019 Regional
    【洛谷 5020】货币系统
    【洛谷 1109】学生分组
    【洛谷 2915】奶牛混合起来
    【洛谷 4162】最长距离
    【YCOJ 3805】竞选
    【洛谷 2807】最长路
    【洛谷 2918】买干草Buying Hay
    【LOJ 10172】涂抹果酱
  • 原文地址:https://www.cnblogs.com/AndrewXu/p/5294824.html
Copyright © 2020-2023  润新知