本文目錄一覽：
js左浮動代碼急
var delta=0.15
var collection;
function floaters() {
this.items = [];
this.addItem = function(id,x,y,content)
{
document.write(‘DIV id=’+id+’ style=”Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:’+(typeof(x)==’string’?eval(x):x)+’;top:’+(typeof(y)==’string’?eval(y):y)+'”‘+content+’/DIV’);
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval(‘play()’,10);
}
}
function play()
{
for(var i=0;icollection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)==’string’?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)==’string’?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = ”;
}
}
var theFloaters = new floaters();
theFloaters.addItem(‘followDiv1′,’document.body.clientWidth-112′,230,’a href=左鏈接地址 target=_blankimg src=左圖片地址 border=0/a’);
theFloaters.addItem(‘followDiv2′,12,230,’a href=右鏈接地址 target=_blankimg src=右圖片地址 border=0/a’);
theFloaters.play();
把上面的代碼另存為一個*.JS文件，然後在想實現此效果的頁面用 SCRIPT src=”*.js”/SCRIPT
調用即可，*代表你另存的文件名！注意修改廣告圖片地址和連接地址！相應的參數可以根據頁面自行調整。
這個是左右下角的浮動
浮動窗口的代碼 （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();
}
});
}
求高手指點,網頁超過某指定的高度high後,加載運行某JS浮動廣告代碼,在左側位置浮動顯示的方法?
用jQuery (或者任意的js library,比如prototype. 當然你不想用也行)
var documentHeight = $(document).height();
$(‘div id=”some-id2″!– your code here –/div’).insertAfter(‘#some-id’);
如果對jQuery不熟悉，參考jQueryI官方網上的API
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/157664.html
微信掃一掃 
支付寶掃一掃 