zoukankan      html  css  js  c++  java
  • 浮动框控制及切换、banner随机数js

    1.浮动置控制及切换

    <div class="banner1"></div>
    <
    div class="bot_banner"> <a href="javascript:;" class="close" title="关闭"><img src="images/close.gif" alt="关闭"/></a> <div style="990px;margin:0 auto;"> <div class="div1"><img src="images/bot_bannerimg.png" /></div> <div class="div2"> <div class="erweima"> <a href="#"><img src="images/qrcode_s131029.png" /></a> <div class="erweimaimg"></div> </div> <a href="#" class="iphone"></a><a href="#" class="android"></a> </div> </div> </div>
    <style type="text/css">
    *{ padding:0px; margin:0px;}
    *html{background-image:url(about:blank);background-attachment:fixed;}/*解决IE6下滚动抖动的问题*/
    .div1{float:left;padding:11px 0 0 15px;}
    .div2{float:left;padding:11px 0 0 257px;}
    .div2 a.iphone,.div2 a.android{display:inline-block;background: url(images/iphoneAndimg1.png) no-repeat;width: 175px;height: 48px;margin-right: 18px;}
    .div2 .iphone{background-position: 0 0 !important;}
    .div2 .iphone:hover{background-position: 0 bottom !important;}
    .div2 .android{background-position: right 0 !important;}
    .div2 .android:hover{background-position: right bottom !important;}
    /*.div2 a:hover img{filter:alpha(opacity=90);opacity:0.9;}*/
    /*.bot_banner.bg{background:none;filter:alpha(opacity=100);opacity:1;}*/
    .bot_banner{ background:url(images/bot_bannerbj.png) repeat-x left bottom;position:fixed;height:71px;width:100%;left:0;bottom:0px;z-index:200;display:none;}
    .close{float:right;margin:6px;}
    
    .bot_banner{_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.
    offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));_margin-bottom:0px;}/**/
    
    </style>
         $(".bot_banner").hide();
            var botBanner = $('.banner1').height();
            //浮动置控制及切换
            $(window).on('scroll',function(){
                var scrollT = $(this).scrollTop();
                if(scrollT >= (botBanner - 200)){
                    $(".bot_banner").slideDown(800);
                }else{
                    $(".bot_banner").hide();
                }
        });

    1.随机效果代码部分

    //banner随机数 
        var imgArr=["banner1","banner2"]
        var radom=Math.floor(Math.random() * 2)
        $(".banner1").addClass(imgArr[radom])//根据生成的随机数(0-5),从imgArr数组中得到图像名称,0表示第一
    <div class="banner1"></div>
    .banner1{height:438px;overflow:hidden;background:url(../images/banner1.jpg) no-repeat center top;}
    .banner2{height:438px; overflow:hidden;background:url(../images/banner2.jpg) center top;}
    <script type="text/ecmascript">
            var imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]
            var radom = Math.floor(Math.random() * 5)
            document.getElementById("img").value = imgArr[radom];//根据生成的随机数(0-5),从imgArr数组中得到图像名称,0表示第一个
    </script>
    <input type="text" id="img" />
    <div id="box"></div>
  • 相关阅读:
    SecureCRT远程控制ubuntu
    zedboard启动过程分析
    zedboard之ubuntu环境变量设置
    理解 pkg-config 工具
    linux下 tar解压 gz解压 bz2等各种解压文件使用方法
    zedboard搭建交叉编译环境
    一步一步学ZedBoard & Zynq(四):基于AXI Lite 总线的从设备IP设计
    zedboard 中SDK 修改串口设置(波特率。。。。)
    VC 2010下安装OpenCV2.4.4
    VS2010恢复默认编辑环境的设置
  • 原文地址:https://www.cnblogs.com/ninali/p/3546197.html
Copyright © 2011-2022 走看看