`
美丽的小岛
  • 浏览: 315595 次
  • 性别: 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数据库描述<转>
评论
发表评论

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

相关推荐

    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;...

    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是因为我下载了两次...

    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...

    C# 解析json格式数据为IList

    例如，如果你有一个JSON数组，你可能希望将其解析为`IList&lt;string&gt;`或`IList&lt;MyCustomClass&gt;`，具体取决于JSON数据的内容。 C#中解析JSON通常使用的是Json.NET库，这是一个非常流行且功能强大的开源库，可以方便地...

    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强大，但最...

    JS遍历ul下的li点击弹出li的索引的实现方法

    &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;li&gt;a&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; 我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接...

    用JavaScript实现文字上下浮动效果

    &lt;title&gt;Floating Text Example&lt;/title&gt; &lt;style&gt; .floating-text { font-size: 24px; position: relative; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: ...

    嵌套ul li 实现简单的二级菜单

    总结起来，实现一个简单的二级菜单主要涉及HTML的`&lt;ul&gt;`和`&lt;li&gt;`结构，CSS的样式控制，以及JavaScript（或CSS3）的交互效果。通过理解这些基本原理，你可以根据项目需求自定义菜单样式和交互效果，提供更优质的用户...

    JS无限级菜单

    使用js编写的一个菜单，js代码与html没有分开，阅读时可能稍有困难，需要了解json，但使用很方便&lt;br&gt; var xx = new PopMenu('x');&lt;br&gt; PopMenu.DataTextField = "ThemeName";//绑定项目文本&lt;br&gt; PopMenu....

    javascrip上百技术总集

    外一篇&lt;br&gt;用javascript改变onclick调用的函数&lt;br&gt;用JavaScript加密保护网站...javascript怎样实现图片模糊效果&lt;br&gt;《ExtJS2.0实用简明教程》之Border区域布局&lt;br&gt;《ExtJS2.0实用简明教程》之Ext类库简介&lt;br&gt;《ExtJS2.0...

    web15种滚动代码

    代码示例：`&lt;P align=center&gt;&lt;MARQUEE ...&gt;由中间向两边移动的文字...&lt;/MARQUEE&gt;&lt;/P&gt;` 14. **渐隐渐现滚动**：利用CSS3的`transition`和`opacity`属性，让文字在滚动过程中逐渐显现或消失。 CSS示例：`marquee { ...

    JavaScript

    基于对象的JavaScript语言&lt;br&gt;5-在JavaScript中创建新对象&lt;br&gt;6-JavaScript对象系统的使用&lt;br&gt;7-JavaScript窗口及输入输出&lt;br&gt;8-用JavaScript脚本实现Web页面信息交互&lt;br&gt;9-用JavaScript实现更复杂的交互&lt;br&gt;&lt;br&gt;这...

    轻轻松松学用javascript编程(PDF)

    &lt;br&gt;4.2 字符类&lt;br&gt;4.3 正则表达式的应用例子&lt;br&gt;5 可参考学习的，精美的代码例子&lt;br&gt;5.1 预载入图片，实现导航按钮的动态效果&lt;br&gt;5.2 显示对象的提示信息&lt;br&gt;5.3 一个精美的日历 &lt;br&gt;5.4 一个下拉菜单&lt;br&gt;5.5 类似...

    js-console:Alfresco Share的管理控制台组件，可对存储库执行任意JavaScript代码

    Alfresco 4.x-5.1的... &lt;dependency&gt; &lt;groupId&gt;de.fmaul&lt;/groupId&gt; &lt;artifactId&gt;javascript-console-repo&lt;/artifactId&gt; &lt;version&gt;0.6&lt;/version&gt; &lt;type&gt;amp&lt;/type&gt; &lt;/dependency&gt; ...&lt;/dependencies&gt;&lt;overlays&gt; ..

    Windows 脚本技术参考手册

    ＞ 元素&lt;br&gt; ＜description＞ 元素&lt;br&gt; ＜example＞ 元素&lt;br&gt; ＜job＞ 元素&lt;br&gt; ＜named＞ 元素&lt;br&gt; ＜object＞ 元素&lt;br&gt; ＜package＞ 元素&lt;br&gt; ＜reference＞ 元素&lt;br&gt; ＜resource＞ 元素&lt;br&gt; ＜runtime＞ 元素&lt;br&gt;...

    按回车键时跳到下一个表单元素的javascript代码

    按回车键时跳到下一个表单元素&lt;br&gt;JumpToNextElement() 用于按回车键时跳到下一个表单元素（统一处理按回车键的问题）&lt;br&gt;在页面调用：&lt;br&gt;&lt;script Language="Javascript"&gt;&lt;br&gt; document.onkeypress = ...

    html情人节代码，2023年情人节代码，含鼠标特效的2023情人节代码

    &lt;header&gt;...&lt;/header&gt; &lt;main&gt;...&lt;/main&gt; &lt;footer&gt;...&lt;/footer&gt; &lt;!-- JavaScript 代码，可能包含鼠标特效 --&gt; &lt;script src="script.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; ``` `&lt;header&gt;`部分可能包含情人节的标题和...

    JavaScript编写的简易web桌面系统

    &lt;br/&gt; 项目交付物:&lt;br/&gt; 1、 HTML页面： W-desktop.html&lt;br/&gt; 2、 JavaScript脚本： p2-core.js&lt;br/&gt; 3、 CSS样式单： all.css&lt;br/&gt; 4、 项目文档： EyesOnMe.doc&lt;br/&gt; 组件详细说明:&lt;br/&gt;1.用户登陆与注销&lt;br/&gt;...

    JS实现网页流氓广告效果

    在JavaScript（JS）中实现网页上的“流氓广告”效果，实际上就是模拟常见的浮动广告或弹窗广告的行为。这种效果通常是通过定时器（setTimeout或setInterval）以及DOM操作来完成的。下面将详细介绍如何使用JS来实现...

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