js实现主页漂浮图片兼容性较好

原链接：http://blog.csdn.net/wclxyn/article/details/6787229

实现：

在显示可见窗口反复飘动

鼠标移动上去自动停止

放在head标签里面

[html] view plaincopy

<!--

function addEvent(obj,evtType,func,cap){

cap=cap||false;

if(obj.addEventListener){

obj.addEventListener(evtType,func,cap);

return true;

}else if(obj.attachEvent){

if(cap){

obj.setCapture();

return true;

}else{

return obj.attachEvent("on" + evtType,func);

}

}else{

return false;

}

function getPageScroll(){

var xScroll,yScroll;

if (self.pageXOffset) {

xScroll = self.pageXOffset;

} else if (document.documentElement && document.documentElement.scrollLeft){

xScroll = document.documentElement.scrollLeft;

} else if (document.body) {

xScroll = document.body.scrollLeft;

}

if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement && document.documentElement.scrollTop){

yScroll = document.documentElement.scrollTop;

} else if (document.body) {

yScroll = document.body.scrollTop;

}

arrayPageScroll = new Array(xScroll,yScroll);

return arrayPageScroll;

}

function GetPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else {

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) {

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) {

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) {

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}

var AdMoveConfig=new Object();

AdMoveConfig.IsInitialized=false;

AdMoveConfig.ScrollX=0;

AdMoveConfig.ScrollY=0;

AdMoveConfig.MoveWidth=0;

AdMoveConfig.MoveHeight=0;

AdMoveConfig.Resize=function(){

var winsize=GetPageSize();

AdMoveConfig.MoveWidth=winsize[2];

AdMoveConfig.MoveHeight=winsize[3];

AdMoveConfig.Scroll();

}

AdMoveConfig.Scroll=function(){

var winscroll=getPageScroll();

AdMoveConfig.ScrollX=winscroll[0];

AdMoveConfig.ScrollY=winscroll[1];

}

addEvent(window,"resize",AdMoveConfig.Resize);

addEvent(window,"scroll",AdMoveConfig.Scroll);

function AdMove(id){

if(!AdMoveConfig.IsInitialized){

AdMoveConfig.Resize();

AdMoveConfig.IsInitialized=true;

}

var obj=document.getElementById(id);

obj.style.position="absolute";

var W=AdMoveConfig.MoveWidth-obj.offsetWidth;

var H=AdMoveConfig.MoveHeight-obj.offsetHeight;

var x = W*Math.random(),y = H*Math.random();

var rad=(Math.random()+1)*Math.PI/6;

var kx=Math.sin(rad),ky=Math.cos(rad);

var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);

var step = 1;

var interval;

this.SetLocation=function(vx,vy){x=vx;y=vy;}

this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}

obj.CustomMethod=function(){

obj.style.left = (x + AdMoveConfig.ScrollX) + "px";

obj.style.top = (y + AdMoveConfig.ScrollY) + "px";

rad=(Math.random()+1)*Math.PI/6;

W=AdMoveConfig.MoveWidth-obj.offsetWidth;

H=AdMoveConfig.MoveHeight-obj.offsetHeight;

x = x + step*kx*dirx;

if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}

if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}

y = y + step*ky*diry;

if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}

if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}

}

this.Run=function(){

var delay = 10;

interval=setInterval(obj.CustomMethod,delay);

obj.onmouseover=function(){clearInterval(interval);}

obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}

}

//-->

</script>

<!--

var ad1=new AdMove("gg1");

ad1.Run();

//-->

</script>

页面上的漂浮图片飘到flash那儿的时候，被flash盖住了，不管将图片样式中的z-index设置成多少都无效，后来搜索了一下，发现原来是要修改flash的属性的。

falsh设法

先来看flash，网站上要显示swf文件有两种方法：

1，传统的<object> + <embed> 显示swf文件

2，官方(adobe)建议：尽量使用他提供的AC_RunActiveContent.js 和C_ActiveX.js 来显示swf文件，并另外用<noscript>将原本的<object><embed>包装进来，以防使用者把javascript关闭的情况。

Adobe 提供的 JS 文件下载地址: activecontent_samples.zip

AC_RunActiveContent.js: 您可使用此文件来解决「外部 JavaScript 解决方案: 适用动态内容的多种情况」中所述的 Flash 和 Shockwave 内容问题。

AC_ActiveX.js: 您可使用本文件来解决「其他动态内容类型的解决方案」一节所述的问题。

SampleActiveContent.html: 本文件提供程式码范例, 当您在使用 AC_RunActiveContent.js 和 AC_ActiveX.js 文件时, 可用于 HTML网页中。

详细使用方法可以下载zip文件后, 看 SampleActiveContent.html 即可.(若不用 ActiveX, 可以不用载入AC_ActiveX.js)

CSS z-index 属性

再来看 CSS, CSS 的 z-index 属性: CSS z-index Property, z-index 是数值越大浮在页面上的越上面, 但是 z-index 只能在使用 position(CSS Positioning) 的范围内才有效(ex: position:absolute/relative/fixed 等).

但是对flash使用了z-index，图片仍然被falsh盖住，怎么都跑不到上面，后来正好看到一篇文章解决了此问题，原来是要修改flash的属性，具体方法如下：

针对<object>/<embed> 的做法:

在<object> 内加 <param name="wmode" value="transparent">, 比如: <object>.... <param name="wmode" value="transparent"> ...</object>

在 <embed> 内加 wmode="transparent" 参数, 比如: <embed wmode="transparent" ....>

针对AC_RunActiveContent.js 的做法:

在 AC_FL_RunContent() 多加 'wmode', 'transparent' 的参数, 比如: AC_FL_RunContent(.... 'wmode', 'transparent' ...);

<noscript> 内,应该最好也要加上如上述 <object>/<embed> 的参数.

七零部落格

搜索

标签云

最新文章

友情链接