<!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>....
<script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...
例如,如果你有一个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强大,但最...
总结起来,实现一个简单的二级菜单主要涉及HTML的`<ul>`和`<li>`结构,CSS的样式控制,以及JavaScript(或CSS3)的交互效果。通过理解这些基本原理,你可以根据项目需求自定义菜单样式和交互效果,提供更优质的用户...
使用js编写的一个菜单,js代码与html没有分开,阅读时可能稍有困难,需要了解json,但使用很方便<br> var xx = new PopMenu('x');<br> PopMenu.DataTextField = "ThemeName";//绑定项目文本<br> PopMenu....
外一篇<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 { ...
该部分包含:<br>0051-用层实现的滚动条效果.rar<br>0052-MSN频道4屏新闻广告效果.rar<br>0053-可滚动的flash轮换广告代码.rar<br>0054-POCO网四屏图片轮换广告代码.rar<br>0055-迅雷网七屏flash广告轮换.rar<br>0056...
<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><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 ...
表格通常由`<table>`元素开始,包含`<thead>`(表头)、`<tbody>`(主体)和`<tfoot>`(页脚)部分。表头和表体中的每一行由`<tr>`元素表示,每一列则由`<th>`(表头单元格)或`<td>`(数据单元格)元素表示。 ```...
要实现这个效果,首先你需要在HTML中设置基础的导航结构,通常是一个`<ul>`元素包含一系列`<li>`元素,每个`<li>`元素代表一个菜单项,可能还包含子菜单的`<ul>`。例如: ```html <nav id="sidenav"> <ul> <li><a...
JS GB2312TOUTF8 UTF8TOGB2312 编码转换<br>/*<br> * GB2312转UTF8<br> * 例:<br> * var xx=new GB2312UTF8();<br> * var Utf8=xx.Gb2312ToUtf8("你aaa好aaaaa");<br> * var Gb2312=xx.Utf8ToGb2312(Utf8);<br> * ...
引入这两个文件:<script type="text/javascript" src="tinymce\js\tinymce\tinymce.min.js"></script> <script type="text/javascript" src="tinymce\js\tinymce\...<li><textarea>Your content here.</textarea></li>