1.浮动置控制及切换

<div class="banner1"></div><div class="bot_banner">
    <a href="javascript:;" class="close" title="关闭"><img src="data:images/close.gif" alt="关闭"/></a>
    <div  style="width:990px;margin:0 auto;">
        <div class="div1"><img src="data:images/bot_bannerimg.png" /></div>
        <div class="div2">
            <div class="erweima">
            <a href="#"><img src="data: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{;;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>

浮动框控制及切换、banner随机数js的更多相关文章

  1. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  2. selenium处理Ajax浮动框方法

    package com.allin.pc;import java.util.List;import org.openqa.selenium.WebElement;import org.openqa.s ...

  3. 切换加上延迟加载js代码

    切换加上延迟加载js代码 (function(){ var tit = $("#tab02 li"), con = $("#wrapmp>div"), c ...

  4. 8 cocos2dx加入场景切换效果,控制场景切换彻底完毕之后再运行动画

     1 加入场景切换效果 供场景切换的类: CCTransitionJumpZoom CCTransitionProgressRadialCCW CCTransitionProgressRadial ...

  5. div 浮动框

  6. 轮播图切换 纯html+js+css

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码代码如下: <div class="wrapper"> <div id=&quo ...

  7. IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍

    有不少网页的页面,还在使用 iframe 标签,而此时,相当于页面有两个 window 对象,一个为当前页面 window ,另一个则为 iframe 页面下的 window .因为,有时候需要在 c ...

  8. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  9. css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title> ...

随机推荐

  1. 中文编程语言Z语言开源正式开源!!!

    (Z语言基于.NET环境,源码中有很多高技术的代码,让更多的人知道对大家有会有很好的帮助,请管理员一点要批准放在首页) 本人实现的中文编程语言Z语言现在正式开源,采用LGPL协议. 编译器核心的网址为 ...

  2. Java基本概念(2)J2EE里面的2是什么意思

    J2EE里面的2是什么意思 J2SE,J2SE,J2ME中2的含义要追溯要1998年.1998年Java 1.2版本发布,1999年发布Java 1.2的标准版,企业版,微型版三个版本,为了区分这三个 ...

  3. 夺命雷公狗-----React---25--小案例之react经典案例todos(单选框的修改)

    还是老样子,首先给li里面的单选框一个函数,然后通过props来对她进行处理 然后在ul里面对父组建进行传送 补充一下啊第一步,因为到时候要用到index属性,所以我们需要发送多一个index过来 然 ...

  4. 在jfinal中使用druid,并配置查看权限

    首先导入druid包,然后配置configPlugin @Override public void configPlugin(Plugins me) { /**配置druid数据连接池插件**/ Dr ...

  5. 每天一个linux命令--locate

    linux下,不知道自己安装的程序放在哪里了,可以使用locate命令进行查找. [hongye@dev107 ~]$ locate activemq.xml /home/hongye/hongyeC ...

  6. [CLR via C#]18. Attribute

    attribute可以说是Microsoft .NET Framework提出的最具创意的技术之一了.利用attribute,可以声明性的为自己的代码构造添加注解,从而实现一些特殊的功能.attrib ...

  7. hdu 4009 Transfer water(最小型树图)

    Transfer water Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others)To ...

  8. NOIP 2013 提高组 day2 积木大赛

      积木大赛 描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第

  9. MySQL删除重复记录只保留一条

    删除表中重复记录,只保留一条: delete from 表名 where 字段ID in (select * from (select max(字段ID) from 表名 group by 重复的字段 ...

  10. NYOJ 536 开心的mdd【矩阵链乘】

    题意:给出n个矩阵组成的序列,问最少的运算量 看的紫书: dp[i][j]表示从第i个矩阵到第j个矩阵最少的乘法次数 dp[i][j]=min(dp[i][j],dp[i][k]+dp[k+1][j] ...