`
美丽的小岛
  • 浏览: 309293 次
  • 性别: 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;....

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

    鼠标悬停<a>标签效果

    总结来说，实现鼠标悬停&lt;a&gt;标签效果主要依赖于CSS和JavaScript。通过调整颜色、下划线、背景等样式，以及利用JavaScript来显示额外信息或执行其他动态操作，我们可以创建丰富的交互体验，使用户在浏览网页时更加便捷...

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

    现在网站流行的JS脚本

    列出里面几种JS效果&lt;br&gt;门帘式广告效果，&lt;br&gt;msn方式弹出窗口提示的效果，&lt;br&gt;漂亮的JS图片翻动展示效果可以点击旁边的导航缩略图显示具体大图内容，&lt;br&gt;横向循环滚动图片Javascript代码&lt;br&gt;带标题的flash切换代码；...

    轻轻松松学用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;...

    javascript 网页特效 多种

    .htm&lt;br&gt;仿flash菜单.htm&lt;br&gt;将HTML自动转为JS代码.htm&lt;br&gt;似与QQ的好友黑名单之类的树型菜单_极品.htm&lt;br&gt;锁定表列.htm&lt;br&gt;文字滚动.htm&lt;br&gt;文字幻灯片.htm&lt;br&gt;base64.code.htm&lt;br&gt;运行代码的代码.htm&lt;br&gt;制作特殊...

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

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

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

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

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

    JS鼠标悬停滑动效果导航条.zip

    要实现这个效果，首先你需要在HTML中设置基础的导航结构，通常是一个`&lt;ul&gt;`元素包含一系列`&lt;li&gt;`元素，每个`&lt;li&gt;`元素代表一个菜单项，可能还包含子菜单的`&lt;ul&gt;`。例如： ```html &lt;nav id="sidenav"&gt; &lt;ul&gt; &lt;li&gt;&lt;a...

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