JavaScript:指飘器~(有点“象形名字”的味道,鼠标“指”上去,就“飘”起来了)BTW:顺便帮帮我……有点小麻烦……
开发的过程就不赘诉了,貌似没有必要撒, 大家就自己咬咬牙看一下,注释比我在写一遍要清晰的多……
测试页面: http://eeee6688.blogspot.com/2008/03/blog-post.html(可能需要添加到 hosts文件中(见文章最后))
在blogspot中是正常的,在cnblogs里面就出现了问题,有点很郁闷……大家也帮我找找原因……
在博客园内需要使用IFRAME才可以,但IFRAME使用起来确实有一定局限性的。希望大家帮忙找找原因……
IFRAME的代码基本如下:
![](/Images/OutliningIndicators/ContractedBlock.gif)
样例下载(没法在博客园提供在线查看,简直就是最大的失败):
https://files.cnblogs.com/volnet/jsOverfloater.rar
============================================================================
闲扯部分……(可PASS)
![](/Images/OutliningIndicators/ContractedBlock.gif)
=======================================================================
/****************************************************************************************
描述:
名称:指飘器……(有点“象形名字”的味道,鼠标“指”上去,就“飘”起来了)
基本功能:用于展示移动鼠标到某元素(通常是IMG元素,也可以是DIV等)上,
漂浮其上展示另一元素(通常用于展示IMG元素)
使用方式:
1.在页面上放置两个元素,并为之设置ID值。
2.设置类似脚本
<script language="javascript" type="text/javascript">
var floatElement1 = new floatElement().create('idParentObj', 'idFloatObj');
</script>
3.测试你的元素是否工作正常,如果工作不正常,请将您的html打包发送到我的e-mail.
如果您发现任何异常也麻烦您能够及时告知我。
//Support: IE7.0, FireFox2.0.0.13, Safari3.0.4
//Not Support: IE8.0Beta1
author: volnet e-mail: volnet@tom.com
copyright (c) http://volnet.cnblogs.com
Friday, March 28 by volnet
****************************************************************************************/
function floatElement()
{
//父对象
this.parentObj = null;
//漂浮对象
this.floatObj = null;
//偏移量(也指父页面的偏移量)
this.offset = null;
//鼠标是否over
var ismouseover = 'ismouseover';
//漂浮对象左上位置在父对象的比例(top)
this.topScale = 1/5;
//漂浮对象左上位置在父对象的比例(left)
this.leftScale = 1/5;
//创建器
//parentId:父对象的ID
//floatId:漂浮对象的ID
//returnValue:图像漂浮器对象
floatElement.prototype.create = function(parentId, floatId)
{
this.parentObj = document.getElementById(parentId);
this.floatObj = document.getElementById(floatId);
if(this.parentObj == null || this.floatObj == null)
{
//alert('Error: floatElement make mistakes.');
return null;
}
this.parentObj.setAttribute(ismouseover,'false');
this.floatObj.setAttribute(ismouseover,'false');
this.floatObj.style.display = 'none';
this.attachEventsPlus(this);
return this;
}
//添加事件
floatElement.prototype.attachEventsPlus = function(o)
{
this.parentObj.onmouseover = function onmouseover(event){o.parentMouseOver();};
this.parentObj.onmouseout = function onmouseout(event){o.parentMouseOut();};
this.floatObj.onmouseover = function onmouseover(event){o.floatMouseOver();};
this.floatObj.onmouseout = function onmouseout(event){o.floatMouseOut();};
}
//鼠标第一次移进父对象
floatElement.prototype.mouseOver = function()
{
this.floatObj.style.display = 'block';
this.setFloatPosition();
}
//鼠标是否在其上
floatElement.prototype.isMouseOver = function()
{
return (this.parentObj.getAttribute(ismouseover) == 'true' || this.floatObj.getAttribute(ismouseover) == 'true');
}
/**************************************************************/
//鼠标移到父对象上
floatElement.prototype.parentMouseOver = function()
{
this.parentObj.setAttribute(ismouseover,'true');
this.mouseOver();
}
//鼠标从父对象上移开
floatElement.prototype.parentMouseOut = function()
{
this.parentObj.setAttribute(ismouseover,'false');
this.floatObj.setAttribute(ismouseover,'true');
this.exit();
}
//鼠标移到漂浮对象上
floatElement.prototype.floatMouseOver = function()
{
this.floatObj.setAttribute(ismouseover,'true');
}
//鼠标从漂浮对象上移开
floatElement.prototype.floatMouseOut = function()
{
this.floatObj.setAttribute(ismouseover,'false');
this.exit();
}
/*------------------------------------------------------------*/
//运行退出
floatElement.prototype.exit = function()
{
if(this.isMouseOver() == false)
this.floatObj.style.display = 'none';
}
//强制退出
floatElement.prototype.forceExit = function()
{
this.floatObj.style.display = 'none';
}
//父对象的漂浮左上角位置
floatElement.prototype.parentLeftTop = function()
{
var xy = (this.offset == null) ? getAbsoluteLocation(this.parentObj) : this.offset;
//alert(xy.absoluteTop + ',' + xy.absoluteLeft + ',' + xy.offsetWidth + ',' + xy.offsetHeight);
return { absoluteTop: (xy.absoluteTop + xy.offsetHeight*this.topScale),
absoluteLeft: (xy.absoluteLeft + xy.offsetWidth*this.leftScale) };
}
//设置漂浮对象的位置
floatElement.prototype.setFloatPosition = function()
{
var pCenter = this.parentLeftTop();
this.floatObj.style.position = 'absolute';
this.floatObj.style.top = pCenter.absoluteTop + 'px';
this.floatObj.style.left = pCenter.absoluteLeft + 'px';
//slowly style!
this.floatObj.style.width = null;
this.floatObj.style.height = null;
var floatObj = this.floatObj;
var paraEffectiveCount = 30;
var width = this.floatObj.width;
var height = this.floatObj.height;
var widthIncrement = width/paraEffectiveCount;
var heightIncrement = height/paraEffectiveCount;
var currentTop = pCenter.absoluteTop;
var currentLeft = pCenter.absoluteLeft;
var currentWidth = 0;
var currentHeight = 0;
doSlowly();
function doSlowly()
{
currentWidth += widthIncrement;
currentHeight += heightIncrement;
//边界向导
var boundaryGuider = checkBoundary(currentLeft,currentTop,currentWidth,currentHeight);
//如果水平方向需要调整
if(boundaryGuider.necessaryHorizontal==true)
{
currentLeft += boundaryGuider.offsetHorizontal;
floatObj.style.left = currentLeft + 'px';
}
//如果垂直方向需要调整
if(boundaryGuider.necessaryVertical == true)
{
currentHeight += boundaryGuider.offsetVertical;
floatObj.style.top = currentHeight + 'px';
}
floatObj.style.width = currentWidth + 'px';
floatObj.style.height = currentHeight + 'px';
if(width > currentWidth && height > currentHeight)
{
setTimeout(doSlowly,1);
}
else
{
floatObj.style.width = width + 'px';
floatObj.style.height = height + 'px';
}
}
}
function checkBoundary(currentLeft,currentTop,currentWidth,currentHeight)
{
var fAbsoulteRight = currentLeft + currentWidth;
var fAbsoulteBottom = currentTop + currentHeight;
//<!--http://volnet.cnblogs.com-->
//Support for: IE7.0, FireFox2.0.0.13, Safari3.0.4
//Not Support for: IE8.0Beta1
var browserWidth = Math.max(document.body.clientWidth,640);
var browserHeight = Math.max(document.body.clientHeight,480);
var h=0 , v=0;
//水平计算
if(fAbsoulteRight > browserWidth)
{
if((currentLeft + browserWidth - fAbsoulteRight) >= 0)
{
h = (browserWidth - fAbsoulteRight);
}
else
{
h = (0-currentLeft);
}
}
//垂直计算
if(fAbsoulteBottom > browserHeight)
{
if((currentTop + browserHeight - fAbsoulteBottom) >= 0)
{
v = (browserHeight - fAbsoulteBottom);
}
else
{
v = (0-currentTop);
}
}
//necessaryHorizontal:是否有必要进行调整,判断条件是窗体宽度比当前浮动宽度要大或者窗体高度比当前浮动高度要大就有必要
//offsetHorizontal:水平调整的像素,负数为向左,正数为向右。
return {
necessaryHorizontal : (h != 0 ),
offsetHorizontal : h,
necessaryVertical : (v != 0),
offsetVertical : v
}
}
//获取元素的页面绝对位置
function getAbsoluteLocation(element)
{
if ( arguments.length != 1 || element == null )
{
return null;
}
var offsetTop = element.offsetTop;
var offsetLeft = element.offsetLeft;
var offsetWidth = element.offsetWidth;
var offsetHeight = element.offsetHeight;
while( element = element.offsetParent )
{
offsetTop += element.offsetTop;
offsetLeft += element.offsetLeft;
}
return { absoluteTop: offsetTop, absoluteLeft: offsetLeft,
offsetWidth: offsetWidth, offsetHeight: offsetHeight };
}
}
注意:
1.访问blogspot.com网站的方法:
编辑C:\WINDOWS\system32\drivers\etc\ 下的hosts文件,然后加入72.14.219.190 eeee6688.blogspot.com
posted on 2008-03-29 04:09 volnet(可以叫我大V) 阅读(3117) 评论(12) 编辑 收藏 举报