js 右侧浮动层效果实现代码(跟随滚动)


Posted in Javascript onNovember 22, 2015

实现代码一、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>无标题文档</title>
 <!--***********开始*************-->

 <script type="text/javascript">
  //<![CDATA[ 
  var tips; var theTop = 200/*这是默认高度,越大越往下*/; var old = theTop;
  function initFloatTips() {
   tips = document.getElementById('floatTips');
   moveTips();
  };
  function moveTips() {
   var tt = 50;
   if (window.innerHeight) {
    pos = window.pageYOffset
   }
   else if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop
   }
   else if (document.body) {
    pos = document.body.scrollTop;
   }
   pos = pos - tips.offsetTop + theTop;
   pos = tips.offsetTop + pos / 10;
   if (pos < theTop) pos = theTop;
   if (pos != old) {
    tips.style.top = pos + "px";
    tt = 10;
   }
   old = pos;
   setTimeout(moveTips, tt);
  }
  //!]]> 
 </script>

 <style type="text/css">
  .floatTips
  {
   position: absolute;
   border: solid 1px #777;
   padding: 3px;
   top: 250px;
   right: 5px;
   width: 30px;
   height: 300px;
   background: #cccccc;
   color: white;
  }
  .showDiv
  {
   position: absolute;
   border: solid 1px #777;
   padding: 3px;
   top: 250px;
   right: 5px;
   width: 300px;
   height: 300px;
   background: #cccccc;
   color: white;
  }
 </style>
 <script type="text/javascript">
  function FunOnmouseUp() {
   var objFloatTips = $("floatTips");
   var objActivityContext = $("activityContext");
   objFloatTips.className = "showDiv";
   objActivityContext.style.display = "";
  }
  function FunMouseOut() {
   var objFloatTips = $("floatTips");
   var objActivityContext = $("activityContext");
   objFloatTips.className = "floatTips";
   objActivityContext.style.display = "none";
  }

  function $(objID) {
   return document.getElementById(objID);
  }
 </script>

</head>
<body onload="initFloatTips()">
 <div id="floatTips" onmouseover="FunOnmouseUp()" onmouseout="FunMouseOut()" class="floatTips">
  最新的活动
  <div id="activityContext" style="display: none">
   显示最新的活动
  </div>
 </div>
 <!--**********结束***************-->
 <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7">
  <tr>
   <td height="2101">
   </td>
  </tr>
 </table>
</body>
</html>

如果有时间的话 会稍作美化 然后加上动画效果 应该就能算是个不错的浮动隐藏层了。

方法二、

一、把以下代码插入<body></body>标签中:

<div id="FloatDIV" style="position: absolute;top: 0px; border-right: activeborder 1px solid; border-top: activeborder 1px solid; border-left: activeborder 1px solid; border-bottom: activeborder 1px solid;">
   浮动层示例:<br />
        <a target="_blank" href="tencent://message/?uin=101535223&Site=https://3water.com&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:101535223:3" alt="有事您说话"></a>
 </div>

二、把以下代码插到</body>标签之后,设置MarginLeft、MarginTop、Width、Heigth四个变量的值

<script language="javascript" type="text/javascript">
var MarginLeft = 30; //浮动层离浏览器右侧的距离
var MarginTop = 50;  //浮动层离浏览器顶部的距离
var Width = 120;  //浮动层宽度
var Heigth= 45;  //浮动层高度

//设置浮动层宽、高
function Set()
{
 document.getElementById("FloatDIV").style.width = Width;
 document.getElementById("FloatDIV").style.height = Heigth;
}

//实时设置浮动层的位置
function Move()
{
 document.getElementById("FloatDIV").style.top = document.documentElement.scrollTop + MarginTop;
 document.getElementById("FloatDIV").style.left = document.documentElement.clientWidth - Width - MarginLeft;
 setTimeout("Move();",100);
}

Set();
Move();
</script>
Javascript 相关文章推荐
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 #Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 #Javascript
分享经典的JavaScript开发技巧
Nov 21 #Javascript
jQuery实现分隔条左右拖动功能
Nov 21 #Javascript
You might like
基于php使用memcache存储session的详解
2013/06/25 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
利用python画一颗心的方法示例
2017/01/31 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
Django 用户认证组件使用详解
2019/07/23 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
电子商务优秀毕业生求职信
2014/07/11 职场文书
债务授权委托书范本
2014/10/17 职场文书
产品质量保证书范本
2015/02/27 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
python语言中pandas字符串分割str.split()函数
2022/08/05 Python