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

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

相关推荐

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

    C# 解析json格式数据为IList

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

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

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

    嵌套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 { ...

    超酷实用的JS代码(六)

    该部分包含:&lt;br&gt;0051-用层实现的滚动条效果.rar&lt;br&gt;0052-MSN频道4屏新闻广告效果.rar&lt;br&gt;0053-可滚动的flash轮换广告代码.rar&lt;br&gt;0054-POCO网四屏图片轮换广告代码.rar&lt;br&gt;0055-迅雷网七屏flash广告轮换.rar&lt;br&gt;0056...

    轻轻松松学用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星级评论打分效果

    js实现的星级评论打分效果,比较简单，但是还算比较实用吧。分享一下 &lt;span&gt;js星级评论打分&lt;/span&gt; &lt;ul&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;2&lt;/a&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;...

    HTML表格固定第一行第一列效果

    最后，我们需要使用JavaScript来监听滚动事件，实时更新`&lt;thead&gt;`和`&lt;firstColumn&gt;`的位置，以保持它们与可视区域的对齐。以下是一个简单的JavaScript示例： ```javascript window.addEventListener('scroll', ...

    js基础教程

    - JavaScript能够控制网页的行为，实现动态效果，如响应用户输入、操作文档对象模型（DOM）等。 #### 二、JavaScript的基本类型 - **基本数据类型**包括数字(Number)、字符串(String)、布尔值(Boolean)、空值(null...

    通用js日历源码

    &lt;br&gt;&lt;script language=javascript src="images/date.js"&gt;&lt;/script&gt;&lt;br&gt;&lt;br&gt;2、在input上，加上得到焦点事件：&lt;br&gt;&lt;input name="textfield1" type="text" size="16" onfocus="javascript:setday(this)"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;3...

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    Issues:将Github Issues本地存储为JSON文件，并以HTML格式呈现这些文件

    使用命令行实用程序ghIssues.js ./ghIssues.js Usage: ghIssues.js [options] [command] Commands: save &lt;user&gt; &lt;password&gt; &lt;repoUser&gt; &lt;repo&gt; ... authenticate at github as user &lt;user&gt; &lt;password&gt; and get all ...

    北大青鸟第一学期4.0 S1所有资料一

    我已经把第一学期所有的课件打包在一起了，一共有5部分，这是第一部分&lt;br&gt;&lt;br&gt;大家载时要记得评分,这样你们就不要资源分了&lt;br&gt;&lt;br&gt;C语言&lt;br&gt;&lt;br&gt;HTML && JavaScript 电子档课件ppt.rar&lt;br&gt;&lt;br&gt;java&&OOP &lt;br&gt;&lt;br&gt;SQL...

    动态网页爱心源码，支持修改文字和音乐

    3. **JavaScript交互**：JavaScript文件（如`dyHeartLove.js`）将用于处理用户与爱心的交互。例如，当鼠标悬停在爱心上时，可以改变爱心的颜色或者播放预设的音乐。此外，JavaScript可以提供一个接口让用户输入...

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