首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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添加随滚动条滚动窗体的方法

- Author -

Microblue

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JavaScript中import用法总结
Jan 20 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
理解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
放大器(1) 矿石收音机(1) 接收机(2) 车机(1) R601SW(1) E1-XM(1) 电子管(5) DSP(2) 修复(2) 海燕B411(1)
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
React组件生命周期详解
2017/07/03 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
详解vue v-model
2020/08/31 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
线程问题：wait()方法是定义在哪个类里面
2015/07/07 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
药学专业大学生个人的自我评价
2013/11/04 职场文书
网络研修随笔感言
2014/02/17 职场文书
行政助理工作职责范本
2014/03/04 职场文书
小学社团活动总结
2014/06/27 职场文书
运动会演讲稿200字
2014/08/25 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
具结保证书
2015/01/17 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
学习经验交流会总结
2015/11/02 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书