jQuery Backstretch动态设置背景图片插件

页面导航:首页 > 网络编程 > JavaScript > jQuery Backstretch动态设置背景图片插件

jQuery Backstretch动态设置背景图片插件

来源: 作者: 时间:2016-02-20 09:49 【

示例图:示例图为bootstrap3 0做的登录界面,后面的背景图为可切换的动态背景图。Backstretch是一款简单的jQuery插件,可以帮助你给网页添加一个动态的背景图片,可以自动调整大小适应屏

示例图:

\


示例图为bootstrap3.0做的登录界面,后面的背景图为可切换的动态背景图。<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGJyPgo8L3A+CjxwPkJhY2tzdHJldGNoysfSu7/uvPK1pbXEalF1ZXJ5suW8/qOsv8nS1LDv1vrE47j4zfjSs8ztvNPSu7j2tq/MrLXEsbO+sM28xqyjrL/J0tTX1LavtffV+7Tz0KHKytOmxsHEu7XEs9+056OstbHIu9Xi0fnX9rXEyLG148rHtbHNvMass9+057HIxsHEu9ChtcTKsbryLM28xqy74dLyzqrX1Lav0dPJ7Lb4seTQzqOsy/nS1M7Sw8e/ydLUvqLBv8q508O437fWsebCyrTzs9+057XEzbzGrNf2sbO+sCy4/NbY0qq1xMrH1qez1s28xqy1xNfUtq/H0Lu7oaM8YnI+CjwvcD4KPHA+z8LU2LXY1rejumh0dHBzOi8vZ2l0aHViLmNvbS9zcm9iYmluL2pxdWVyeS1iYWNrc3RyZXRjaDxicj4KPC9wPgo8cD48YnI+CjwvcD4KPHA+yejWw2JvZHm1xLGzvrCjqLK71ri2qMjOus7UqsvYo6m0+sLryOfPwqO6PC9wPgo8cD48L3A+CjxwcmUgY2xhc3M9"brush:java;"><script src="Scripts/jquery-1.8.2.min.js"></script> <script src="Scripts/jquery.backstretch.min.js"></script> <script type="text/javascript"> $.backstretch("bg.jpg"); </script>
指定元素实现背景切换,设置切换的图片与图片切换的间隔时间duration,代码如下:

<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/jquery.backstretch.min.js"></script>
$(function () {
            $(".container").css({ opacity: .8 });   //设置透明度
            $.backstretch([
                  "Images/backgrounds/101_1.jpg",
                  "Images/backgrounds/44_1.jpg"
            ], { duration: 3000, fade: 750 });
        });
 </script>














Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<