`
美丽的小岛
  • 浏览: 297232 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

js实现两边广告流动的效果<转>.

js 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <meta http-equiv="Content-Language" content="zh-CN" />
 <title>js页面跟随滚动条两侧漂浮广告</title>
<style type="text/css">
div.floats {/*浮动容器通用样式*/
 position:absolute;
 left:-1000px;
 /*上面两句是必需的，下面看实际情况去定义了*/
 border:solid 1px #777;
 padding:3px;
 background:#333;
 color:white;
 width:100px;
 height:80px;
 opacity: 0.5;
 filter:alpha(opacity=50);
 
}
div#test1,div#test2{top:100px;}/*居中向左右定位容器初始高度*/
div#test3,div#test4{top:200px;}/*左右定位的两个容器初始高度*/
</style><script type="text/javascript">
var D=new Function('obj','return document.getElementById(obj);')
function htmlbody(){
 return (
  document.documentElement.clientHeight<=document.body.clientHeight
  &&document.documentElement.clientHeight!=0
 )
 ?document.documentElement:document.body;
}
//浏览器滚动条位置
function scrollLeft(){return (!window.pageYOffset)?htmlbody().scrollLeft:window.pageXOffset;}
function scrollTop(){return (!window.innerHeight)?htmlbody().scrollTop:window.pageYOffset;}//实际应距左距离
function getleft(strobjs,strLeftType,strleft){
 var temp_getleft = 0;
 if (strLeftType=="left"){
  temp_getleft = scrollLeft()*1 + strleft*1;
 }else if (strLeftType=="mid"){
  (strleft*1<0)
  ?temp_getleft = scrollLeft()*1 + strleft*1
  + htmlbody().clientWidth*1/2 - strobjs.offsetWidth*1
  :temp_getleft = (scrollLeft()*1+strleft*1 + htmlbody().clientWidth*1/2);
 }else if (strLeftType=="right"){
   temp_getleft 
   = scrollLeft()*1 + htmlbody().clientWidth*1 
   - strleft*1 - strobjs.offsetWidth*1;
 }
 return temp_getleft;
}function moveTips(strobj,theTop,theLeft,theLeftType) {
 var old,nowobj = D(strobj);
 var nowleft = nowobj.style.left.replace("px","")*1;//返回在改变窗口大小或移动横滚动条前的距左部距离（数值）
 var temp_left = getleft(nowobj,theLeftType,theLeft);//实际应距左距离
 var re_theTop = theTop;
 if (temp_left!=nowleft){//横向递增
  (Math.abs(temp_left-nowleft)>3&&Math.abs(temp_left-nowleft)<600)
  ?((temp_left>nowleft)?nowleft += Math.abs(temp_left-nowleft)/5
  :nowleft -= Math.abs(temp_left-nowleft)/5)
  :nowleft = temp_left;
  nowobj.style.left = nowleft + "px";
 }
 if (!openweb){old = re_theTop;var openweb;}/*这是默认高度*/;
  var pos,tt=50;
  pos = scrollTop()*1-nowobj.offsetTop*1+re_theTop*1;
  pos = nowobj.offsetTop+pos/10;//纵向开始递增
  if (pos < re_theTop) pos = re_theTop;
  if (pos != old) {nowobj.style.top = pos+"px";tt=5;}
  old = pos;
  setTimeout("moveTips('"+strobj+"','"+theTop+"','"+theLeft+"','"+theLeftType+"')",tt);
}
</script></head>
<body>
<div style="width:660px;border:1px solid #eee;margin:0 auto;height:3000px;">
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
换行占位符。。。
</div>
页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～
<div style="width:5000px;">
</div>
<div id="test1" class="floats">浮动层1 !</div>
<div id="test2" class="floats">浮动层2 !</div>
<div id="test3" class="floats">浮动层3 !</div>
<div id="test4" class="floats">浮动层4 !</div> <script type="text/javascript">
 moveTips('test1','100','332','mid',"0");
 moveTips('test2','100','-332','mid',"0");
 moveTips('test3','200','10','left',"1");
 moveTips('test4','200','10','right',"1");
</script>
</body>
</html>

 

分享到：
| wordpress数据库描述<转>
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    " data-report-query="utm_medium=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1776139.nonecase&depth_1-utm_source=distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1776139.nonecase" data-report-click='{"mod":"popu_708","dest":"https://download.csdn.net/download/weixin_51225684/87701332","strategy":"2~default~OPENSEARCH~Paid","extra":"{\"utm_medium\":\"distribute.pc_relevant_iteye_download.none-task-download-2~default~OPENSEARCH~Paid-1-87701332-iteye_blog-1776139.nonecase\"}"}' > 同步任务顺序： <li>1.console.log("script- 111");</li>

    ---然后跳出整个async1函数来执行后面js栈的代码&lt;/li&gt; &lt;li&gt;4.console.log("promise1-111");&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; 异步任务顺序: &lt;li&gt;1.回到async1函数中等待await后面表达式的返回值&lt;/li&gt; &lt;li&gt;2.promise的.then()...

    js效果页面实例及说明文档包html版

    绝对的经典javascript收藏 包含了各个种类的js校验实例&lt;br&gt;web开发绝妙帮手&lt;br&gt;&lt;br&gt;javascript收藏 &lt;br&gt;1.页面校验 &lt;br&gt;1.文本框约束输入 &lt;br&gt;2.表单校验工具库 &lt;br&gt;3.文本框部分内容不让改变 &lt;br&gt;2.下拉框类 &lt;br&gt;...

    Prototype学习笔记（最新整理）

    JavaScript 类的扩展 9&lt;br&gt;4.2. 对 Object 类的扩展 9&lt;br&gt;4.3. 对 Number 类的扩展 9&lt;br&gt;4.4. 对 Function 类的扩展 9&lt;br&gt;4.5. 对 String 类的扩展 10&lt;br&gt;4.6. 对 document DOM 对象的扩展 11&lt;br&gt;4.7. 对 Event ...

    asp.net专家疑难解答200问

    如何实现从服务器端向页面动态添加javascript脚本-示例1 &lt;br&gt;22.如何实现从服务器端向页面动态添加javascript脚本-示例2 &lt;br&gt;24.如何处理多页面重定向到同一页面后的返回问题 &lt;br&gt;25.如何用Response.Redirect方法...

    jsp编程技巧集锦

    数字转中文&lt;br&gt;128 自动计算金额&lt;br&gt;129 JSP页面打印中使用WebBrowser控件&lt;br&gt;130 &lt;select...&gt;不刷新页面添加新的类别&lt;br&gt;131 鼠标滚动缩放图片&lt;br&gt;132 根据输入的表名生成输入数据表格&lt;br&gt;133 JSP表格输出到Excel...

    FCK在线编辑器2.2版和2.4版.rar

    可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体.&lt;br&gt;&lt;br&gt;....

    Vue中通过<script></script>引入的Vue.js文件

    &lt;script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt; src里面的内容根据自己的下载的Vue.js的文件位置决定的，我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...

    javascript网页特效108个

    javascript网页特效108个&lt;br&gt;http://bbs.esiyang.com收集的.&lt;br&gt;Javascript 3D相册 &lt;br&gt;图片轮换效果总结 &lt;br&gt;Javascript 3D相册 &lt;br&gt;多样化摺叠菜单 &lt;br&gt;一个很酷的登陆效果！ &lt;br&gt;WINDOWS脚本技术大全 &lt;br&gt;新浪...

    javascript函数大全

    replaceString)替换现有字符串.&lt;br&gt;100.string.split(分隔符)返回一个数组存储值.&lt;br&gt;101.string.substr(start[,length])取从第几位到指定长度的字符串.&lt;br&gt;102.string.toLowerCase()使字符串全部变为小写.&lt;br&gt;103....

    常用javascript整理

    1.JavaScript的数值处理对象学习 .txt&lt;br&gt;2.JavaScript的系统函数学习 .txt&lt;br&gt;3.js中用于对象的语句——with和for...in语句学习专题.txt&lt;br&gt;4.smallSoftkey小软键盘，大键盘&lt;br&gt;5.window.open参数详解 .txt&lt;br&gt;6....

    TCP-IP技术大全

    TCP/IP和Internet 8&lt;br&gt;2.1 一段历史 8&lt;br&gt;2.1.1 ARPANET 8&lt;br&gt;2.1.2 TCP/IP 9&lt;br&gt;2.1.3 国家科学基金会(NSF) 9&lt;br&gt;2.1.4 当今的Internet 12&lt;br&gt;2.2 RFC和标准化过程 12&lt;br&gt;2.2.1 获得RFC 13&lt;br&gt;2.2.2 RFC索引 13&lt;br...

    js模拟list和map

    javascript 模拟 java中的 List,Map&lt;br&gt;js文件为 js/utils.js&lt;br&gt;IE6.0 测试通过&lt;br&gt;&lt;br&gt;List:&lt;br&gt;add(var obj) //添加一个元素&lt;br&gt;remove(var index) //删除一个元素&lt;br&gt;get(var index) //获取一个元素&lt;br&gt;remove...

    基于Web的通用BBS系统的建立与维护

    录&lt;br&gt;&lt;br&gt;&lt;br&gt;一、前言 2&lt;br&gt;二、系统定义 3&lt;br&gt;2．1 系统分析 3&lt;br&gt;...JavaScript脚本语言 28&lt;br&gt;3．2．2．5 正则表达式技术 32&lt;br&gt;3．2．3 实现方法 36&lt;br&gt;3．2．3．1 ASP网页数据库的连接 36&lt;br&gt;3．2．3．2 ASP...

    Javascript表单验证控件(Validator v1.05).rar

    Javascript表单验证控件(Validator v1.05).rar&lt;br&gt;---------------------------------&lt;br&gt;内含以下两个文件：&lt;br&gt;Validator.chm（详细的使用帮助文档）&lt;br&gt;validator.js（源代码，当然没有prototype.js强大，但最...

    itext-2.1.7.js7.jar

    &lt;version&gt;2.1.7.js7&lt;/version&gt; &lt;scope&gt;compile&lt;/scope&gt; &lt;optional&gt;false&lt;/optional&gt; &lt;exclusions&gt; &lt;exclusion&gt; &lt;groupId&gt;org.bouncycastle&lt;/groupId&gt; &lt;artifactId&gt;bcmail-jdk15on&lt;/artifactId&gt; &lt;/exclusion&gt; ...

    HTML&JavaScript经典PPT 讲的都是重点

    &lt;SCRIPT language="JavaScript" &gt; function compute(op) { var num1,num2; num1=parseFloat(document.myform.num1.value); num2=parseFloat(document.myform.num2.value); if (op=="+") document.myform....

    蓝木物流货运信息系统v2.0

    【本版本功能】 &lt;br&gt;1.网站主干为 新闻系统 + 货源信息发布系统 + 车源发布系统 + 仓储发布系统 + 专线发布系统 + 物流黄页（企业展示平台）系统 + 咨询发布 + 车辆档案管理系统 + 车辆验证信息系统 + 会员管理系统 ...

    超强JS(javascript)正则类第二版

    对超强JS(javascript)正则类的加强版&lt;br&gt;添加了按HTML中的(ID|NAME|自定义属性)取出或删除相应标签&lt;br&gt;getElememtBy(string,name,value);&lt;br&gt;getElememtById(string,id); &lt;br&gt;getElememtByName(string,name); &lt;br&gt;...

    Visual JS

    Visual JS 是一个类似于 VB 的完全开源 JavaScript、Ajax、RIA 开发工具，Visual JS 本身就是由 Visual JS 开发出来的。&lt;br&gt;特点：&lt;br&gt;1. 支持SPA，快速建立Ajax RIA 应用;&lt;br&gt;2. 用拖拽的方式建立复杂JavaScript...

    小雨媒体播放器一

    小雨媒体播放器&lt;br&gt; 原始JS脚本：锄头雨&lt;br&gt; 后期美工/修正：锄头雨&lt;br&gt; &lt;br&gt; &lt;br&gt; 此播放器采用javascript编写，支持*.wav,*.mid,*.asf,*.wma,*.wmv,*.asx文件格式。&lt;br&gt; 可以用插入在任何网页作为背景播放插件使用...

Magicbox
Global site tag (gtag.js) - Google Analytics