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


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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
JS加载解析Markdown文档过程详解
May 19 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
JS前端使用canvas实现扩展物体类和事件派发
Aug 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
php读取mysql的简单实例
2014/01/15 PHP
php中session使用示例
2014/03/29 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
CI框架的安全性分析
2016/05/18 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
js的对象与函数详解
2019/01/21 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
react native 仿微信聊天室实例代码
2019/09/17 Javascript
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
类如何去实现接口
2013/12/19 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
大学生预备党员自我评价分享
2013/11/16 职场文书
旅游项目开发策划书
2014/01/18 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
美容院营销方案
2014/03/05 职场文书
村抢险救灾方案
2014/05/09 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
财务部岗位职责
2015/02/03 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server