JavaScript添加随滚动条滚动窗体的方法


Posted in Javascript onFebruary 23, 2016

本文实例讲述了JavaScript中添加随滚动条滚动窗体的方法。分享给大家供大家参考,具体如下:

两种实现方式:

第一种:

<script type=/"text/javascript/">
function scrollImg(){
 var posX,posY;
 if (window.innerHeight) {
 posX = window.pageXOffset;
 posY = window.pageYOffset;
 }
 else if (document.documentElement && document.documentElement.scrollTop) {
 posX = document.documentElement.scrollLeft;
 posY = document.documentElement.scrollTop;
 }
 else if (document.body) {
 posX = document.body.scrollLeft;
 posY = document.body.scrollTop;
 }
 var ad=document.getElementById(/"ad/");
ad.style.top=(posY+500)+/"px/";
// ad.style.left=(posX+500)+/"px/";
ad.style.left=/"90%/";
 setTimeout(/"scrollImg()/",100);
}
</script>
<div id=/"ad/" style=/"position:absolute;background:#606060;width:100px;height:100px;border:1px dotted #000;line-height:100px;text-align:center; left: 103px; top: 911px;/">此广告位招租</div>
<script type=/"text/javascript/">
scrollImg();
</script>

第二种:

<html>
<head>
 <meta http-equiv=/"Content-Type/" content=/"text/html; charset=gb2312/">
 <title>Drag and Drop example</title>
 <script language=/"javascript/">
function picsize(obj,MaxWidth){
img=new Image();
img.src=obj.src;
if (img.width>MaxWidth)
{
 return MaxWidth;
}
else
{
 return img.width;
}
}
function CloseQQ()
{
divStayTopleft.style.display=/"none/";
return true; 
}
var online= new Array();
 </script>
</head>
<body>
 <div id=/"divStay/" style=/"position: absolute/">
 <table cellspacing=/"0/" cellpadding=/"0/" width=/"100%/" border=/"0/">
  <tbody>
  <tr>
   <td valign=/"top/" width=/"7%/">
   </td>
  </tr>
  </tbody>
 </table>
 </div>
 <div id=/"divStayTopleft/" style=/"position: absolute/">
 <table cellspacing=/"0/" cellpadding=/"0/" width=/"109/" border=/"0/">
  <tr>
  <td colspan=/"3/">
   <a onclick=/"CloseQQ()/" href=/"javascript:;/" shape=/"circle/" coords=/"91,16,12/">
   <img height=/"34/" src=/"images/qq_top.gif/" width=/"109/" usemap=/"#Map/"
    border=/"0/"></a></td>
  </tr>
  <tr>
  <td width=/"6/">
   <img height=/"100/" src=/"images/qq_life.gif/" width=/"6/"></td>
  <td valign=/"top/" width=/"96/" background=/"sto/qq_bg.gif/">
   <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" align=/"center/" border=/"0/">
   <tr>
    <td height=/"30/">
    <table cellspacing=/"0/" cellpadding=/"0/" width=/"90/" border=/"0/">
     <tr>
     <td>
      <img height=/"13/" src=/"images/qq_ico1.gif/" width=/"16/"><span
      class=/"font_12/"> <span style=/"font-size: 9pt/">客户服务</span></span></td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table47/">
     <tr>
     <td width=/"15/" valign=/"top/" height=/"23/">
      <img border=/"0/" src=/"images/qq_v01.gif/" width=/"16/" height=/"16/"></td>
     <td valign=/"bottom/">
      <script>document.write(/"<a target=blank href=tencent://message/?uin=178010108&Site=三水点靠木&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:615050000:10 alt=[三水点靠木]></a>/");</script>
     </td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    </td>
   </tr>
   <tr>
    <td>
    <table border=/"0/" width=/"100%/" cellpadding=/"2/" id=/"table1/">
     <tr>
     <td width=/"15/" valign=/"top/" height=/"23/">
      <img border=/"0/" src=/"images/qq_n01.gif/" width=/"16/" height=/"16/"></td>
     <td valign=/"bottom/">
      <script>document.write(/"<a target=blank href=tencent://message/?uin=251922268&Site=网页特效&Menu=yes><img border=0 SRC=http://wpa.qq.com/pa?p=1:43486831:10 alt=[QQQQQ]></a>/");</script>
     </td>
     </tr>
    </table>
    </td>
   </tr>
   <tr>
    <td>
    </td>
   </tr>
   </table>
  </td>
  <td width=/"7/">
   <img height=/"100/" src=/"images/qq_right.gif/" width=/"7/"></td>
  </tr>
  <tr>
  <td colspan=/"3/">
   <img height=/"30/" src=/"images/qq_bottom1.gif/" width=/"109/"></td>
  </tr>
  <tr>
  <td colspan=/"3/">
   <img height=/"33/" src=/"images/qq_logo.gif/" width=/"109/"></td>
  </tr>
 </table>
 </div>
 <script type=/"text/javascript/">
function FloatTop()
{
var startX1 =document.body.offsetWidth-125 ,startY1 = 5;
var startX2 =0,startY2 = 95;
var ns = (navigator.appName.indexOf(/"Netscape/") != -1);
var d = document;
function ml(id,startX,startY)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
el.y = startY;
return el;
}
window.stayTopLeft=function()
{
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY1 - ftlObj.y)/8;
ftlObj1.y += (pY + startY2 - ftlObj1.y)/8;
ftlObj.sP(document.body.scrollLeft+document.body.offsetWidth-125, ftlObj.y);
ftlObj1.sP(ftlObj1.x, ftlObj1.y);
setTimeout(/"stayTopLeft()/", 30);
}
// ftlObj = ml(/"divStay/",document.body.scrollLeft+document.body.offsetWidth-125,0);
// ftlObj1 = ml(/"divStayTopLeft/",0,30);
ftlObj = ml(/"divStay/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,0);
ftlObj1 = ml(/"divStayTopLeft/",(document.body.scrollLeft+document.body.offsetWidth)/2+379,30);
stayTopLeft();
}
FloatTop();
 </script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
理解javascript定时器中的单线程
Feb 23 #Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 #Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 #Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 #Javascript
javascript每日必学之多态
Feb 23 #Javascript
javascript每日必学之继承
Feb 23 #Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 #Javascript
You might like
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
mouse_on_title.js
2006/08/25 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
Django跨域请求问题的解决方法示例
2018/06/16 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
Python class的继承方法代码实例
2020/02/14 Python
new修饰符是起什么作用
2015/06/28 面试题
EJB实例的生命周期
2016/10/28 面试题
大学生简历的个人自我评价
2013/12/04 职场文书
毕业生自荐信格式
2014/03/07 职场文书
服务承诺书格式
2014/05/21 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
mysqldump进行数据备份详解
2022/07/15 MySQL