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添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

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

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

  3. Ionic Js十四:浮动框

    $ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框. 实例 HTML 代码 <p> <button ng-click="open ...

  4. hover时显示可跟随鼠标移动的浮动框,运用函数节流与去抖进行优化

    在很多笔试面试题中总能看到js函数去抖和函数节流,看过很多关于这两者的讨论,最近终于在一个需求中使用了函数去抖(debounce)和函数节流(throttle). 需要完成的效果是,鼠标在表格的单元格 ...

  5. selenium处理Ajax浮动框方法

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

  6. swiper3d横向滚动多张炫酷切换banner

    最近有了个新需求,swiper3d横向滚动多张炫酷切换banner要和elementUI里边走马灯的卡片化card 类似,但是还需要h5手机触摸滚动啊啊啊啊,昨天折腾了半个早上总算完成,今天乖乖跑来m ...

  7. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

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

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

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

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

随机推荐

  1. PHP unset销毁变量并释放内存

    PHP的unset()函数用来清除.销毁变量,不用的变量,我们可以用unset()将它销毁.但是某些时候,用unset()却无法达到销毁变量占用的内存!我们先看一个例子: <?php $s=st ...

  2. 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程

    JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...

  3. iOS7适配之设计篇

    (注:文章简要翻译自 Apple <iOS 7 UI Transition Guide>,由于该文档为开发者预览版,并非最终文档,所以 iOS7 正式上线可能有部分不同) 准备工作 iOS ...

  4. ubuntu zendDebugger.so 加载不上的问题

    参考文章   http://blog.sina.com.cn/s/blog_6612d5810101dapf.html 装zenDdebugger是为了在eclipse中调试用!!!!!!!结果搞了半 ...

  5. NSLocalizedString不起作用

    程序TESTAPP 环境:XCODE 4.6 OSX  10.8.4 MAC BOOK AIR 2011年版 代码 [doneButton setTitle:NSLocalizedString(@&q ...

  6. Core Animation中的基础动画

    基础动画 在开发过程中很多情况下通过基础动画就可以满足开发需求,前面例子中使用的UIView代码块进行图像放大缩小的演示动画也是基础动画(在iOS7 中UIView也对关键帧动画进行了封装),只是UI ...

  7. 制作流程图,activity,好不容易找到的

    Star UML指导手册 Module by: Stephen Wong 原著:Stephen Wong            翻译:火猴 1.   综述:http://pan.baidu.com/s ...

  8. nginx+tomcat安装配置

    nginx+tomcat安装配置 # nginx+tomcat安装配置 #创建网站目录 mkdir -p /www/wwwroot cd /www #安装配置 wget http://mirrors. ...

  9. 批处理文件:windows下关闭指定端口

    @echo offsetlocal enabledelayedexpansionset /p port=please input port number:for /f "tokens=1-5 ...

  10. 深度学习中Embedding的理解

    这学期为数不多的精读论文中基本上都涉及到了Embedding这个概念,下面结合自己的理解和查阅的资料对这个概念进行一下梳理. ===================================== ...