<!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>
分享到：
相关推荐
可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体.<br><br>....
例如，如果你有一个JSON数组，你可能希望将其解析为`IList<string>`或`IList<MyCustomClass>`，具体取决于JSON数据的内容。 C#中解析JSON通常使用的是Json.NET库，这是一个非常流行且功能强大的开源库，可以方便地...
1.JavaScript的数值处理对象学习 .txt<br>2.JavaScript的系统函数学习 .txt<br>3.js中用于对象的语句——with和for...in语句学习专题.txt<br>4.smallSoftkey小软键盘，大键盘<br>5.window.open参数详解 .txt<br>6....
Javascript表单验证控件(Validator v1.05).rar<br>---------------------------------<br>内含以下两个文件：<br>Validator.chm（详细的使用帮助文档）<br>validator.js（源代码，当然没有prototype.js强大，但最...
对超强JS(javascript)正则类的加强版<br>添加了按HTML中的(ID|NAME|自定义属性)取出或删除相应标签<br>getElememtBy(string,name,value);<br>getElememtById(string,id); <br>getElememtByName(string,name); <br>...
使用js编写的一个菜单，js代码与html没有分开，阅读时可能稍有困难，需要了解json，但使用很方便<br> var xx = new PopMenu('x');<br> PopMenu.DataTextField = "ThemeName";//绑定项目文本<br> PopMenu....
0011-js物理弹性漂浮广告.rar<br>0012-JS图片过渡效果.rar<br>0013-可关闭打开的flash拉链广告.rar<br>0014-可定义时间的全屏收缩广告代.rar<br>0015-模仿MSN弹出对话框.rar<br>0016-SOHU背投广告和弹出广告代码.rar...
外一篇<br>用javascript改变onclick调用的函数<br>用JavaScript加密保护网站...javascript怎样实现图片模糊效果<br>《ExtJS2.0实用简明教程》之Border区域布局<br>《ExtJS2.0实用简明教程》之Ext类库简介<br>《ExtJS2.0...
代码示例：`<P align=center><MARQUEE ...>由中间向两边移动的文字...</MARQUEE></P>` 14. **渐隐渐现滚动**：利用CSS3的`transition`和`opacity`属性，让文字在滚动过程中逐渐显现或消失。 CSS示例：`marquee { ...
基于对象的JavaScript语言<br>5-在JavaScript中创建新对象<br>6-JavaScript对象系统的使用<br>7-JavaScript窗口及输入输出<br>8-用JavaScript脚本实现Web页面信息交互<br>9-用JavaScript实现更复杂的交互<br><br>这...
列出里面几种JS效果<br>门帘式广告效果，<br>msn方式弹出窗口提示的效果，<br>漂亮的JS图片翻动展示效果可以点击旁边的导航缩略图显示具体大图内容，<br>横向循环滚动图片Javascript代码<br>带标题的flash切换代码；...
<br>4.2 字符类<br>4.3 正则表达式的应用例子<br>5 可参考学习的，精美的代码例子<br>5.1 预载入图片，实现导航按钮的动态效果<br>5.2 显示对象的提示信息<br>5.3 一个精美的日历 <br>5.4 一个下拉菜单<br>5.5 类似...
js实现的星级评论打分效果,比较简单，但是还算比较实用吧。分享一下 <span>js星级评论打分</span> <ul> <li> <a href="javascript:;">1</a> </li> <li> <a href="javascript:;">2</a> ...
＞ 元素<br> ＜description＞ 元素<br> ＜example＞ 元素<br> ＜job＞ 元素<br> ＜named＞ 元素<br> ＜object＞ 元素<br> ＜package＞ 元素<br> ＜reference＞ 元素<br> ＜resource＞ 元素<br> ＜runtime＞ 元素<br>...
按回车键时跳到下一个表单元素<br>JumpToNextElement() 用于按回车键时跳到下一个表单元素（统一处理按回车键的问题）<br>在页面调用：<br><script Language="Javascript"><br> document.onkeypress = ...
- JavaScript能够控制网页的行为，实现动态效果，如响应用户输入、操作文档对象模型（DOM）等。 #### 二、JavaScript的基本类型 - **基本数据类型**包括数字(Number)、字符串(String)、布尔值(Boolean)、空值(null...
<br><script language=javascript src="images/date.js"></script><br><br>2、在input上，加上得到焦点事件：<br><input name="textfield1" type="text" size="16" onfocus="javascript:setday(this)"><br><br><br>3...
javascript 获取select ->option中id、value、label属性及<option></option>中内容
使用命令行实用程序ghIssues.js ./ghIssues.js Usage: ghIssues.js [options] [command] Commands: save <user> <password> <repoUser> <repo> ... authenticate at github as user <user> <password> and get all ...
3. **JavaScript交互**：JavaScript文件（如`dyHeartLove.js`）将用于处理用户与爱心的交互。例如，当鼠标悬停在爱心上时，可以改变爱心的颜色或者播放预设的音乐。此外，JavaScript可以提供一个接口让用户输入...