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{ background:url(images/bot_bannerbj.png) repeat-x left bottom;position:fixed;height:71px;width:100%;left:;bottom:0px;z-index:;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添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

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

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

  4. Ionic Js十四:浮动框

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

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

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

  6. selenium处理Ajax浮动框方法

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

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

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

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

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

  9. webdriver高级应用- 在ajax方式产生的浮动框中,单击选择包含某个关键字的选项

    Ajax简介: Ajax:局部刷新,原理上也是一个js,js调用服务器的远程接口刷新局部页面数据. Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集). Ajax 是一种用 ...

随机推荐

  1. Mysql数据库优化

    to be add... --------------------------------------------------------------------------------------- ...

  2. How to use PEM of PPAS

    -bash-4.1$ pwd/opt/PostgresPlus/9.3AS/client-v4/scripts -bash-4.1$ lsclient launchPEMClient.sh -bash ...

  3. [原创]java WEB学习笔记99:Spring学习---Spring Bean配置:自动装配,配置bean之间的关系(继承/依赖),bean的作用域(singleton,prototype,web环境作用域),使用外部属性文件

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. 获取访问者ip的方法

    package com.mi.util; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang3.S ...

  5. 关于SQL Server无法查询中文的问题

    SQL Server 的版本是2016,随便试了一条 带有 where 子句的查询.如下: select * from Roles where RoleName like '%系统%' 呐尼,怎么一条 ...

  6. Linq join

    MXS&Vincene  ─╄OvЁ  &0000022─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...

  7. Struts2&Hibernate&Spring框架目录

      第3章 Struts2框架 Struts是流行和成熟的基于MVC设计模式的Web应用程序框架 使用目的:减少在运用MVC设计模型来开发Web应用的时间 3.1 Struts2框架概述 3.1.1 ...

  8. free查看可用缓存

    本篇转自:http://www.cnblogs.com/coldplayerest/archive/2010/02/20/1669949.html 解释一下Linux上free命令的输出. 下面是fr ...

  9. Linux和Windows下ping命令详解(转:http://linux.chinaitlab.com/command/829332.html)

    一.Linux下的ping参数 用途 发送一个回送信号请求给网络主机. 语法 ping [ -d] [ -D ] [ -n ] [ -q ] [ -r] [ -v] [ \ -R ] [ -a add ...

  10. IDispatch error #3092

    在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...