`

javascript-特效

    博客分类:
  • W3C
 
阅读更多

 

事件

<body onmousedown="show_coords(event)">

function show_coords(ev){

        alert("X 坐标: " + ev.clientX + ", Y 坐标: " + ev.screenX)

}

 

遮罩滚动层

<html>

<head>

<script language="javascript" type="text/javascript" >

    var timerID = 0;//必须的

    function StartGO(){

            var bgObj0=document.createElement("div"); 

        bgObj0.style.position="absolute"; 

        bgObj0.style.backgroundColor="#eeeeee";

        if(document.all){

            bgObj0.style.filter = "alpha(opacity=50)";

        }else{

            bgObj0.style.MozOpacity = 0.5;

            bgObj0.style.opacity = 0.5;

        }

        bgObj0.style.top = "0px";   

        bgObj0.style.left = "0px"; 

        bgObj0.style.width = "100%"  

        var s_height=document.body.scrollHeight; 

                if(s_height<window.screen.availHeight){

                        s_height=window.screen.availHeight; 

                } 

                bgObj0.style.height=s_height+"px"//设置高度 

        bgObj0.style.zIndex = 1000;

 

 

        var bgObj=document.createElement("div"); 

        bgObj.style.position="absolute"; 

        bgObj.style.backgroundColor="#ff0000";

        bgObj.style.top = "300px";   

        bgObj.style.left = "300px"; 

        bgObj.style.width = "300px"  

        bgObj.style.height = "300px"

        bgObj.style.zIndex = 1001;    

        document.body.appendChild(bgObj0); 

        document.body.appendChild(bgObj); 

        //关闭按钮//也可以这样写啊?

        var c = document.createElement("div");

        c.innerHTML = "关闭";

        c.style.cssText = "text-decoration:underline; cursor:pointer;";

        c.onclick = function(){

                document.body.removeChild(bgObj);

            document.body.removeChild(bgObj0);

            clearInterval(timerID);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。

            document.body.scrollTop="0px";

        };

        bgObj.appendChild(c);

 

        clearInterval(timerID);

        //clearInterval() 方法可取消由 setInterval() 设置的 timeout。

        timerID = setInterval(function(){move(bgObj);}, 10);

        //timerID = setInterval(move,10,bgObj);等效于上面的

        alert(timerID);//如果页面不刷新timerID为2,3,4,5递增的

        //setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。

                //setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

 

    }

    function move(obj){

        if(obj){

            obj.style.top = document.body.scrollTop +300+ "px";

        }

    }

</script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body >

    <div id="content">

           <input type="button" value="OK" id="btnOK" onclick="StartGO()"/> <br>

           大家好!<br>

           底部有数字内容!

           滚动遮罩层

           指定遮罩层

       </div>

    <div style="margin-top:1000px">123</div>

</body>

</html>

 

js层:

<html>

        <head>

<script language="javascript" type="text/javascript">

                function openFloat(obj) {

 

                //        alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);        //[object HTMLDivElement]160-262

 

                        floatArea = document.getElementById("ok");

 

                        var leftpos = 0,toppos = 0;

                        var pObject = obj.offsetParent;

                        //if (pObject){

                                //leftpos += pObject.offsetLeft;

                                //toppos += pObject.offsetTop;

                                //alert( pObject+pObject.offsetLeft+"-"+pObject.offsetTop);//[object HTMLBodyElement]0-0

                                //alert(obj+obj.offsetLeft+"-"+obj.offsetTop);                //[object HTMLInputElement]190-292

                        //}

                        //alert(leftpos);

                        while(pObject){//必须的,能否合并于if,用coupon_release.html测试??????????

                                leftpos += pObject.offsetLeft;

                                toppos += pObject.offsetTop;

                                alert(pObject+leftpos+"-"+pObject.offsetLeft);

                                pObject = pObject.offsetParent;

                        }

                        //alert(0);

                        //alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]160-262

                        floatArea.style.left = (leftpos) + "px";

                        alert(floatArea.style.left);

                        floatArea.style.top = (obj.offsetTop + toppos + obj.offsetHeight - 1) + "px";

                        //alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]190-312

 

 

                        floatArea.innerHTML="<a href='javascript:closeFloat();'>关闭</a><br>test层中表单<br>"

                                +"<form><input type='text' name='name' id='name'/><br></form>"

                        floatArea.style.width = "300px";

                        floatArea.style.height = "300px";

                        floatArea.style.border = "#ff0000 1px solid";

                        floatArea.style.background="#eeeeee";

                        floatArea.style.display = "block";

                } 

 

                function closeFloat() {

                        floatArea = document.getElementById("ok");

                        floatArea.innerHTML = "";

                        floatArea.style.display = "none";

                }

</script>

        </head>

<body >

        <from style="position:relative;float:left;margin-left:50px;margin-top:50px;border:#ff0000 1px solid">

                <h1>测试DIV层</h1>

                <input type="text" name="name" id="name"/><br>

                <div style="position:relative;float:left;margin-left:30px;margin-top:30px;border:#ff0000 1px solid">

 

                        <div id="sub" style="position:relative;float:left;margin-left:100px;margin-top:100px;border:#ff0000 1px solid">

                                <input type="button" value="test" onclick="openFloat(this)"/><br>

                                hello,wnj<br>

                        </div>

                        <div id="ok" style="position:relative;background-color:#eeeeee;display:none"></div>

                </div>

 

        </from>

</body>

</html>

分享到:
评论

相关推荐

    javaScript-API-特效

    本文将围绕"JavaScript API"和"JavaScript特效"这两个主题,结合给定的压缩包文件内容,深入探讨相关知识点。 首先,我们来看"JavaScript API"。JavaScript API通常由浏览器提供,如DOM(Document Object Model)...

    javascript经典特效---文字特效.rar

    在本资源“javascript经典特效---文字特效.rar”中,我们聚焦于利用JavaScript实现的各种文字特效,这些特效能够增强用户体验,使网页内容更加生动有趣。 在JavaScript中,文字特效的实现通常涉及到DOM操作、CSS...

    javascript经典特效---Title特效.rar

    在这个"javascript经典特效---Title特效.rar"压缩包中,包含了一个名为"Title特效.htm"的文件,我们可以推测这可能是一个HTML页面,其中内嵌了JavaScript代码来展示Title特效。 在JavaScript中,Title特效通常通过...

    javascript经典特效---图片转换效果.rar

    在这个案例中,我们关注的是"javascript经典特效---图片转换效果",这是一个使用JavaScript实现的图片转换特效。这种效果通常用于创建图像画廊、滑动展示或轮播图,以增加网站的视觉吸引力。 在"图片转换效果.htm"...

    javascript经典特效---状态栏特效(九).rar

    本资源“javascript经典特效---状态栏特效(九).rar”聚焦于一个特定的JavaScript应用领域:状态栏特效。状态栏,通常指的是浏览器窗口底部显示页面URL和其他信息的部分,利用JavaScript可以对其进行各种创意性的设计...

    javascript经典特效---JavaScript绘图.rar

    在本资料"javascript经典特效---JavaScript绘图.rar"中,我们可以期待学习到JavaScript在Canvas上的基本操作和一些经典的特效实现。 首先,Canvas是一个HTML5标签,它在页面上创建了一个可编程的图形区域。通过...

    javascript经典特效---IFRAME间链接变换.rar

    在本资源"javascript经典特效---IFRAME间链接变换.rar"中,我们聚焦于一个特定的JavaScript特效:如何在多个IFRAME之间进行链接的变换。 IFRAME(Inline Frame)是HTML中的一个元素,它允许在一个页面中嵌入另一个...

    javascript经典特效---文字背景特效.rar

    总的来说,"javascript经典特效---文字背景特效.rar"提供的实例是一个很好的学习资源,可以帮助开发者掌握JavaScript在网页动态效果上的应用,尤其是关于文字与背景交互这一方面。通过学习和实践,开发者可以提升...

    javascript经典特效---双重导航菜单.rar

    这个"javascript经典特效---双重导航菜单.rar"压缩包文件显然聚焦于一个特定的网页交互设计元素——双重导航菜单。这种菜单设计可以提升用户体验,因为它提供了一种层次分明、易于浏览的网站结构。 双重导航菜单,...

    javascript经典特效---Title特效三.rar

    "Title特效三.rar"这个压缩包文件显然聚焦于JavaScript实现的一种特定的标题特效,可能是网页标题的动画效果或者视觉变换。由于描述中重复了文件名,我们可以推断这可能是一个关于Title特效的实例或教程。 在...

    javascript经典特效---下雨.rar

    综上所述,这个"javascript经典特效---下雨.rar"实例展示了JavaScript在动态效果制作方面的强大能力。通过DOM操作、时间控制、数学计算、CSS变换和交互设计等技术,开发者能够创造出丰富多样的视觉体验,提升网站或...

    特效公主--javascript特效工具

    "特效公主--javascript特效工具"是一款专为网页开发者设计的资源集合,旨在通过JavaScript技术增强网页的视觉表现力和交互体验。JavaScript作为一种广泛使用的客户端脚本语言,可以在用户的浏览器上运行,无需服务器...

    javascript经典特效---文字变幻特效.rar

    在本资源“javascript经典特效---文字变幻特效.rar”中,我们关注的是一个利用JavaScript实现的文字特效。这个压缩包包含了一个名为“文字变幻特效.htm”的文件,这很可能是展示效果的HTML页面。 在网页设计中,...

    javascript经典特效---下拉框选择背景.rar

    《JavaScript经典特效——下拉框选择背景》 在网页设计中,交互性和用户体验至关重要,而JavaScript作为一种客户端脚本语言,为提升网页动态效果提供了无限可能。本文将详细讲解如何使用JavaScript实现一个经典的...

    javascript经典特效---javascript代码自动生成.rar

    本资源“javascript经典特效---javascript代码自动生成.rar”显然聚焦于如何利用JavaScript生成代码,以创建出吸引人的视觉特效。这个压缩包内包含了一个名为“javascript代码自动生成.htm”的文件,很可能是教程或...

    javascript实例应用---流行特效类.rar

    javascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rarjavascript实例应用---流行特效类.rar

    javascript实例应用---图片特效类.rar

    javascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rarjavascript实例应用---图片特效类.rar

    javascript实例应用---菜单特效类.rar

    javascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rarjavascript实例应用---菜单特效类.rar

    javascript实例应用---按钮特效类.rar

    javascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rarjavascript实例应用---按钮特效类.rar

Global site tag (gtag.js) - Google Analytics