底部悬浮通栏可以关闭广告位的实现方法


Posted in Javascript onJune 01, 2016

效果一:

底部悬浮通栏可以关闭广告位的实现方法

1.首先,整个底部悬浮通栏广告是固定在浏览器的底部,随着浏览器的滚动,底部悬浮广告始终在浏览器窗口中。这里有几个关键点:通栏,固定,黑色。

所以:首先我们必须给悬浮通栏广告整体一个100%的宽度,其次给它设定固定定位,固定在浏览器底部,背景色为黑色,透明度为0.7。

.footfixed{
width:100%; 

height:140px;   /* 图片大小,宽度必须100% */

position:fixed;

bottom:0;     /*固定定位,固定在浏览器底部。*/

background: #081628;

opacity: .7;  /*Chrome、Safari、Firefox、Opera */ 

 filter:alpha(opacity=70);/* 针对 IE8 以及更早的版本 */
}

2. 底部悬浮通栏广告的图片,可以看出比背景要高(背景height:140px,内图height: 218px)

且整体内容部分居中。

.fimg {
   height: 218px;    /*注意此处图片高度高于140px*/
   width: 1190px; 
   margin: 0px auto;  /*整体内容部分居中*/
 }

然而由于底部悬浮广告内容部分高度218px大于设定的父元素的高度140px,高度相差78px

产生如下效果,图片没能完成的展现出来:

 底部悬浮通栏可以关闭广告位的实现方法

这需要图片上移78px,需要对整个底部悬浮广告内容部分整体做相对定位

.fimg {
   position: relative;  /*父元素相对定位*/
   top:-78px;
 }

结果:

底部悬浮通栏可以关闭广告位的实现方法

这里有个问题:

图片不是很清楚,因为加了透明度。

解决这个问题,用一个div来设置背景,而不在.footfixed里设置背景色。

<div class="ftbj"></div>
.ftbj{
  position: absolute;
  background:#081628;
  height:100%;
  width:100%;
  top: 0;
  left: 0;
  opacity: .7;/*Chrome、Safari、Firefox、Opera */ 
  filter: alpha(opacity=70);}/* 针对 IE8 以及更早的版本 */
.footfixed{
  width:100%; 
  height:140px;   /* 图片大小,宽度必须100% */
  position:fixed;
  bottom:0;     /*固定定位,固定在浏览器底部。*/
  background: #081628;
  opacity: .7;    /*Chrome、Safari、Firefox、Opera */     

filter:alpha(opacity=70);/* 针对 IE8 以及更早的版本 */
}

这样一来,效果图片:

底部悬浮通栏可以关闭广告位的实现方法

这样就清楚多了。

3.其中关闭按钮的效果:

首先按钮是由图片通过定位实现固定在整个底部悬浮广告图片右上角。需设定图片大小,图片引入路径,需要对整个底部悬浮广告内容部分整体做相对定位,关闭按钮是做绝对定位

.fimg {
  position: relative;  /*父元素相对定位*/
}
.close {
  width: 33px;
  height: 33px;     /* 图片大小 */
  background: url(images/close.png) no-repeat center center;  /*图片引入路径 */
  position: absolute;
  right: 15px;
  top: 85px;       /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */
}

其次,鼠标移到关闭按钮上,有小手出现,关闭按钮旋转。

为了产生动画效果,加transition

.close {
  transition: .5s;
  cursor: pointer; /*通过定位实现固定固定在整个底部悬浮广告图片右上角 */
}
.close:hover {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);     /* IE 9 */
  -moz-transform: rotate(180deg);    /* Firefox */
  -webkit-transform: rotate(180deg);  /* Safari 和 Chrome */
  -o-transform: rotate(180deg);    /* Opera */
} /*旋转 图片*/

然后是点击关闭按钮,广告消失,侧边出现效果

底部悬浮通栏可以关闭广告位的实现方法

#fimg-min{
  width: 80px;
  height: 140px;           /* 图片大小 */
  position: fixed; 
  bottom: 0px; 
  left: 0px;             /*定位*/  
  display: none;          /*隐藏*/
  cursor: pointer;        /*小手 */
}

点击图中圈出来的图标,底部广告再次出现

<script>
$(document).ready(function(){
  $(".close").click(function () {
    $('.footfixed').animate(
      {height: '10px', opacity: '0.4'}, "slow", function () {
    $('.footfixed').hide();
    $('#fimg-min').show();
    });
  });  
  $('#fimg-min').click(function(){
      $('.footfixed').show().css({height:'140px',opacity:'1'});
      $('#fimg-min').hide();
  });  
});
</script>

注:在ie9以下浏览器中关闭按钮图片旋转效果未能实现。

以上这篇底部悬浮通栏可以关闭广告位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
深入理解node exports和module.exports区别
Jun 01 #Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 #Javascript
jQuery图片轮播插件——前端开发必看
May 31 #Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 #Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 #Javascript
基于jQuery实现点击列表加载更多效果
May 31 #Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 #Javascript
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
关于vue组件事件属性穿透详解
2019/10/28 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python读取文件名并改名字的实例
2019/01/07 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
竞选团支书演讲稿
2014/04/28 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
党员自我评价范文2015
2015/03/03 职场文书
士兵突击观后感
2015/06/16 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
Redis读写分离搭建的完整步骤
2021/09/14 Redis
详解JAVA的控制语句
2021/11/11 Java/Android
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android