您的位置:

js实现侧悬浮浮动实例代码(前端 浮动)

js实现侧悬浮浮动实例代码(前端 浮动)

更新:

本文目录一览:

求个左下角JS广告悬浮代码?

漫游于网络之间,你会发觉,因特网不但是信息的海洋,也是广告的海洋。除了普通的Gif Banner、Flash外,浮动广告也是时下网上较为流行的广告形式之一。当你拖动浏览器的滚动条时,这种在页面上浮动的广告,可以跟随屏幕一起移动。尽管这种效果对于广告展示有相当的实用价值,但对浏览你网页的人来讲,这则是个既妨碍阅读,又影响阅读兴趣的东西,因此一定不能滥用。不过,如果你能善用的话,它就能发挥出极大的作用。

要做出浮动式广告的效果并不困难,如果你有JS基础的可以自己写一个,如果连写都懒得写的话,到网上下载一个特效工具,按提示粘贴一下代码就OK。不过,想要真正了解它是怎样做出来的,则需要掌握一些JS知识了。这里向大家介绍一下简单的浮动广告做法。

以下这段代码可放在body/body之间,其间我加入了一些注释(即“//”后的文字及“!—”“--”之间的文字)。

SCRIPT FOR=window EVENT=onload LANGUAGE="JScript"

initAd();//载入页面后,调用函数initAd()

/SCRIPT

script language="JScript"

!--

function initAd() {

document.all.AdLayer.style.posTop = -200;//设置onLoad事件激发以后,广告层相对于固定后的y方向位置

document.all.AdLayer.style.visibility = 'visible'//设置层为可见

MoveLayer('AdLayer');//调用函数MoveLayer()

}

function MoveLayer(layerName) {

var x = 600;//浮动广告层固定于浏览器的x方向位置

var y = 300;//浮动广告层固定于浏览器的y方向位置

var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;

var y = document.body.scrollTop + y - diff;

eval("document.all." + layerName + ".style.posTop = y");

eval("document.all." + layerName + ".style.posLeft = x");//移动广告层

setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()

}

//--

/script

!--下面为一个ID为AdLayer的层(如ID名不为AdLayer,上面MoveLayer()内的AdLayer也要作相应修改),包括一张带链接的图片--

div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'

a href=" "img src='../qqkk2000.gif' border="0" height="60" width="60"/a

/div

在这里,你可以设置x、y的值来设定所固定层的位置,改变setTimeout("MoveLayer('AdLayer');", 20)中20的值为你希望调用MoveLayer()的时间间隔。还有要注意的是,使用的图片最好为透明背景的gif图,以使图片的背景颜色不至于遮住后面的的内容。

切记,要慎用浮动式广告,考虑使用特效的同时,千万要考虑到浏览者的感觉,不能滥用哦!

求一个能用的右侧浮动JS代码

请将代码放置在head/head之间即可

script language="javascript"

suspendcode="DIV id=lovexin style='Z-INDEX: 10; LEFT: 850px; POSITION: absolute; TOP: 140px; width: 88px; height: 203px;'a href=''img src='../20080128/er_p.jpg' width='150' height='200' border='0'/a/DIV"

document.write(suspendcode);

lastScrollY=0;

function heartBeat(){

diffY=document.body.scrollTop;

percent=.1*(diffY-lastScrollY);

if(percent0)percent=Math.ceil(percent);

else percent=Math.floor(percent);

document.all.lovexin.style.pixelTop+=percent;

lastScrollY=lastScrollY+percent;

}

window.setInterval("heartBeat()",1);

/script

代码说明:

1、加到左侧的时候,把left属性改为10就好;

2、TOP是控制这个浮动广告离上边的距离,可以根据自己的实际情况进行调整;

3、这里href='和这里img src='../20080128/er_p.jpg' 换成你想要的浮动广告的图片。其中这句src=../20080128/er_p.jpg' width='150' height='200'border='0' 中WIDTH=‘150’ height='200'是你浮动广告图片的宽和高。

JS网页中的浮动窗口代码?

script

function scrolls(){

var advobj=document.getElementById("adv");

advobj.style.top=100+document.documentElement.scrollTop+"px";

}

window.onscroll=scrolls;

function winclose(){

var advobj=document.getElementById("adv");

advobj.style.display="none";

}

/script

body

!--随滚动条移动的浮动窗口############################--

div id="adv" style=""

img src="图片路径"/

div id="close" onclick="winclose()"关闭/div

/div

div id="header"iframe src="header.html" height="155px" width="960px" frameborder="0"scrolling="no"/iframe/div

/body

浮动窗口的代码 (html/js)

第一种方法:

Html代码

html

head

title浮动窗口/title

link type="text/css" rel="stylesheet" href="css/overflow.css" /

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript" src="js/overflow.js"/script

script type="text/javascript"

$(document).ready(function(){

var b = $("#b");

var overFlow = $("#over");

b.click(function(){

overFlow.fadeIn();

$("#mask").css("background","#111");

$("#mask").css("opacity","0.8");

})

$("#close").click(function(){

overFlow.fadeOut();

$("#mask").css("background","#fff");

$("#mask").css("opacity","1");

});

drag($("#over"),$("#title"));

}) ;

/script

/head

body

div id="over"

div id="title"span id="t"这只是一个演示标题/spanspan id="close"[ x ]/span/div

div id="content"

When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.br/

---This is edited by Alp.

/div

/div

div id="mask" a id="b" href="#"click/a/div

/body

/html

Js代码

function drag(overFlow,title){

title.onmousedown = function(evt){

var doc = document;

var evt = evt || window.event;

var x = evt.offsetX?evt.offsetX:evt.layerX;

var y = evt.offsetY?evt.offsetY:evt.layerY;

if(overFlow.setCapture){

overFlow.setCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove = function(evt){

evt = evt || window.event;

var xPosition = evt.pageX || evt.clientX;

var yPosition = evt.pageY || evt.clientY;

var newX = xPosition - x;

var newY = yPosition - y;

overFlow.style.left = newX;

overFlow.style.top = newY;

};

doc.onmouseup = function(){

if(overFlow.releaseCapture){

overFlow.releaseCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove=null;

doc.onmouseup=null;

};

};

}

css代码

#over{

position: absolute;

left: 300px;

top: 200px;

border: 1px solid black;

display: none;

background: #cccccc;

cursor: default;

width: 300px;

z-index: 10;

opacity: 1;

}

#title{

border: 1px solid #1840C4;

background: #95B4DC;

padding: 2px;

font-size:12px;

cursor: default;

}

#close{

cursor: pointer;

margin-right: 1px;

overflow: hidden;

}

#content{

border: 1px solid #C2D560;

background: #EFF4D7;

}

#t{

margin-right:145px;

}

#mask{

z-index: 1;

background: #fff;

width: 1024px;

height: 800px;

}

#b{

position: absolute;

left: 200px;

top: 100px;

}

body{

padding: 0px;

margin: 0px;

}

#over{

background: transparent;

}

第二种方法:

消息框遮罩层:iframe id="show_upload_iframe" frameborder=0 scrolling="no" style="display:none; position:absolute;"/iframediv id="show_upload"nothing.../div'

页面加载loading中:div id="body_loading" onClick="loaded();"img src="__PUBLIC__/images/body_load.gif"/div

关闭浮动窗口:a href="javascript:hideupload()"关闭窗口建议用小图片/a

打开浮动窗口:a href="javascript:showupload('admin.php')"打开浮动/a

// 消息框loading

function loading(){

var o = $('#body_loading');

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");

o.css("top",(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+"px");

o.fadeIn("fast");

}

// 消息框消失

function loaded(){

var o = $('#body_loading');

o.fadeOut("fast");

}

// 隐藏浮动窗口

function hideupload(){

$('#show_upload').hide();

$('#show_upload_iframe').hide();

}

// 弹出浮动窗口

function showupload(ajaxurl){

loading();

var o=$('#show_upload');

var f=$('#show_upload_iframe');

var top = 200;

$.ajax({

url: ajaxurl,

//cache: false,

success: function(res){

loaded();

o.html(res);

o.css("left",(($(document).width())/2-(parseInt(o.width())/2))+"px");

if($(document).scrollTop()200){

top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);

}

o.css("top",top+"px");

f.css({'width':o.width(),'height':o.height(),'left':o.css('left'),'top':o.css('top')});

f.show();

o.show();

}

});

}

js实现侧悬浮浮动实例代码(前端 浮动)

本文目录一览: 1、求个左下角JS广告悬浮代码? 2、求一个能用的右侧浮动JS代码 3、JS网页中的浮动窗口代码? 4、浮动窗口的代码 (html/js) 求个左下角JS广告悬浮代码? 漫游于网络之间

2023-12-08
悬浮窗代码js,windows悬浮窗

本文目录一览: 1、网站悬浮窗代码js控制修改 2、求网站jq右侧客服悬浮窗代码 3、一段悬浮窗的JS代码,在火狐浏览器中没有悬浮效果! 4、JavaScript,点击按钮怎么弹出悬浮窗口啊 5、JS

2023-12-08
js实现浮动窗体实例(网站浮动飘窗js)

本文目录一览: 1、浮动窗口的代码 (html/js) 2、js css 动态悬浮窗 怎么做 3、在网页中插入浮动窗口,js代码或css代码(易看易懂) 4、javascript如何实现弹出浮动窗口

2023-12-08
网页两侧悬浮广告js代码(js底部悬浮广告代码)

本文目录一览: 1、求一个页面上漂浮着两个浮动广告的js代码,就是左右两个类似春联的条形广告,能跟随着页面上下拉动 2、求JS代码,悬浮广告,停在网页右侧的! 3、求一个页面上漂浮着两个浮动广告的js

2023-12-08
div悬浮在固定位置详解

2023-05-18
js左浮动代码,网页设计左浮动代码

本文目录一览: 1、js左浮动代码急 2、浮动窗口的代码 (html/js) 3、求高手指点,网页超过某指定的高度high后,加载运行某JS浮动广告代码,在左侧位置浮动显示的方法? js左浮动代码急

2023-12-08
js图片随机飘浮代码(js浮动代码)

本文目录一览: 1、求上下浮动的图片在指定的区域内随浏览器上下滚动的js代码 2、跪求一段图片全屏浮动的JS 代码! 3、求JS代码。按开始,图片随机滚动;按结束,显示随机滚动的其中一张图片。 4、怎

2023-12-08
js浮动客服代码演示地址大全,js浮动客服代码演示地址大全下

本文目录一览: 1、这是一段在线客服JS代码它是右边浮动的如何改让它左浮动? 2、求一个能用的右侧浮动JS代码 3、浮动窗口的代码 (html/js) 4、jQuery实现的网页左侧在线客服效果代码

2023-12-08
js脚本浮动窗代码怎么理解,js 浮动

本文目录一览: 1、浮动窗口的代码 (html/js) 2、怎样用javascript实现带关闭窗口的浮动广告 3、在网页中插入浮动窗口,js代码或css代码(易看易懂) 4、javascript如何

2023-12-08
Android悬浮窗实现详解

2023-05-19
js导航漂浮代码(html漂浮代码)

本文目录一览: 1、求段网页右下角漂浮的JS代码,放广告用的! 2、求一段JS广告底部漂浮代码 3、浮动窗口的代码 (html/js) 求段网页右下角漂浮的JS代码,放广告用的! !DOCTYPE h

2023-12-08
CSS悬浮详解

2023-05-17
php底部悬浮按钮,php底部悬浮按钮是什么

2022-11-23
提高用户体验的Android悬浮窗实现

随着移动互联网的发展,手机成为人们日常生活中必不可少的工具之一。众所周知,应用程序的用户体验是非常重要的,如何让用户更加方便地使用手机应用程序是一个值得探讨的问题。本文主要介绍如何通过Android悬

2023-12-08
Android悬浮窗详解

2023-05-20
CSS悬浮效果详解

2023-05-17
优化CSS布局——左浮动(upleft)实例详解

2023-05-12
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${item.id} [in template "article/detail/index.ftl" at line 48, column 106] ---- Java stack trace (for programmers): ---- freemarker.core.InvalidReferenceException: [... Exception message was already printed; see it above ...] at freemarker.core.InvalidReferenceException.getInstance(InvalidReferenceException.java:134) at freemarker.core.EvalUtil.coerceModelToTextualCommon(EvalUtil.java:481) at freemarker.core.EvalUtil.coerceModelToStringOrMarkup(EvalUtil.java:401) at freemarker.core.EvalUtil.coerceModelToStringOrMarkup(EvalUtil.java:370) at freemarker.core.DollarVariable.calculateInterpolatedStringOrMarkup(DollarVariable.java:104) at freemarker.core.DollarVariable.accept(DollarVariable.java:63) at freemarker.core.Environment.visit(Environment.java:371) at freemarker.core.IteratorBlock$IterationContext.executedNestedContentForCollOrSeqListing(IteratorBlock.java:321) at freemarker.core.IteratorBlock$IterationContext.executeNestedContent(IteratorBlock.java:271) at freemarker.core.IteratorBlock$IterationContext.accept(IteratorBlock.java:244) at freemarker.core.Environment.visitIteratorBlock(Environment.java:645) at freemarker.core.IteratorBlock.acceptWithResult(IteratorBlock.java:108) at freemarker.core.IteratorBlock.accept(IteratorBlock.java:94) at freemarker.core.Environment.visit(Environment.java:335) at freemarker.core.Environment.visit(Environment.java:341) at freemarker.core.Environment.visit(Environment.java:341) at freemarker.core.Environment.process(Environment.java:314) at freemarker.template.Template.process(Template.java:383) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.processTemplate(FreeMarkerView.java:332) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.doRender(FreeMarkerView.java:266) at org.springframework.web.servlet.view.freemarker.FreeMarkerView.renderMergedTemplateModel(FreeMarkerView.java:220) at org.springframework.web.servlet.view.AbstractTemplateView.renderMergedOutputModel(AbstractTemplateView.java:181) at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:314) at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1431) at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1167) at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1106) at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:979) at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1014) at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:903) at jakarta.servlet.http.HttpServlet.service(HttpServlet.java:564) at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:885) at jakarta.servlet.http.HttpServlet.service(HttpServlet.java:658) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:205) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:51) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:174) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at com.software.filter.HttpSpiderIdentifyFilter.doFilter(HttpSpiderIdentifyFilter.java:51) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:174) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:116) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:174) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:116) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:174) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201) at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:116) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:174) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:149) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:167) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:90) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:482) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:115) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:93) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:340) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:391) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:63) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:896) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1744) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:52) at java.base/java.lang.VirtualThread.run(VirtualThread.java:309)