学习网页制作技巧:无边窗口的制作

技巧|网页

  首先要做一个索引页,也就是你要首先打开的页面,比如 index.htm

  这个页面里不需要任何的内容,他的作用就是制造一个无框页面然后把它滑入页面,然后关闭自己的这个索引页,只要在这个页面的<body>里加入如下代码:

 
<!-- HHCtrl Object -->
<object id="CloseWindow" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
<script>
var w=640,h=420;
var xpos=0,ypos=0,targetx=(screen.width-w)/2,targety=(screen.height-h)/2;
function go()
{
if (targetx-xpos>1)
{ xpos=(targetx+9*xpos)/10;
popup.moveTo(xpos,targety); }
else
{ clearTimeout(mm);
this.focus();
CloseWindow.Click(); }
mm=setTimeout("go()",10);
}
self.moveTo(-2222,-2222);
var appName=navigator.appName;
//判断不是Netscape,Opera或Tencent Explorer
if (appName.indexOf('Microsoft')!=-1 && document.body.clientTop==2 && window.external.x!='Wibble')
{
var popup=window.open('winmove.htm','','fullscreen=1');
popup.moveTo(-1800,targety);
popup.resizeTo(w,h);
setTimeout("go()",500);
}
else
{ alert("请使用IE5.0或其以上版本浏览,谢谢!"); }
</script>

  讲到这里,滑入的效果就OK了,现在讲滑出,开始我以为在关闭窗口的**图片里定义javascript:close()就可以关闭滑出了,可是发现只能关闭,但是不是滑出关闭,后来才知道这需要一个script才行

  代码如下,把这个代码加入到引用页里,也就是这个示例的winmove.htm这里页里:

<script>
var w=640,h=420;
var xstep=0,targetx=(screen.width-w)/2,targety=(screen.height-h)/2;
function exit()
{
if(xstep+targetx<screen.width)
{ xstep=0.1+xstep*2;
window.moveTo(targetx+xstep,targety); }
else
{ clearTimeout(mo);
window.close(); }
mo=setTimeout("exit()",10);
}
</script>

  然后在关闭窗口的**图片上这样做:

<img src="http://www.webjx.com/htmldata/2005-12-12/close_d.gif" alt="close window" style="cursor:hand" width="11" height="11">

  最小化图片链接代码

<img src="http://www.webjx.com/htmldata/2005-12-12/images/min.gif" border="0" alt="min window" style="cursor:hand" width="11" height="11">

  最小化的script

<object id="HHCtrl" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object>
<script>
<!--
function min(){
this.focus();HHCtrl.Click(); }
-->
</script>

  最后要说的一点是winmove这个页面要定义一下css,把页面的滚动条定义为无,否则无框页面会存在一个滚动条的

<style type="text/css">
<!--
body { overflow:hidden }
-->
</style>

时间: 2024-11-01 17:09:30

学习网页制作技巧:无边窗口的制作的相关文章

打造美丽新“视”界—无边窗口制作详解

详解 喜欢网页制作的朋友总是希望自己的作品完美无缺.然而IE浏览器窗口总灰头土脸,千篇一律.简单的网页还能胜任,如果碰到艺术性较强的网页,IE窗口的地址栏以及各种按扭多多少少会影响网页的整体效果.如何才能使网页的艺术效果与浏览器的窗口很好的结合起来,使之更加完美?今天我就给大家介绍一种非常流行的网页效果.在下面在制作过程当中,我们要用到两个HTML页面,一个是首页面index.htm,点击该页面中的一个超级链接,便可以打开我们想要的无边窗口.另一个是内容页面index2.htm,该页面便是无边窗

网页制作技巧:数据过多时不会影响页面布局

文章简介:网页制作技巧:数据过多时不会影响页面布局. 着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示.要达到的目标是:数据过多时,不会影响页面布局解决方法:1,在不影响布局的情况下,可以选择,数据自动换行a.设置宽度限制:可以使用width值和max-width最大宽度值.b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);注意点:长串字母实现前提,必须将宽度限制直接添加到"文本

学习网页制作基础入门教程(8)框架标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 学习网页制作基础入门教程(3)字体标签 学习网页制作基础入门教程(4)图象标签 学习网页制作基础入门教程(5)图象标签 学习网页制作基础入门教程(6)连接标签 学习网页制作基础入门教程(7)表格标签 框架概念 1. 首先,各位先看看右边这张图片,将利用这张图来做解释,这样子,讲起来可能会清楚一些. 我们可以看见,右边的这个图片,一共分为 1 . 2 . 3 三个框架,每一个框架,各有

DIVCSS网页设计总结:有用的3个网页制作技巧

网页制作Webjx文章简介:DIVCSS网页设计总结:有用的3个网页制作技巧. 我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 "顶级"CSS技巧!虽然没有什么新意,但对新手而言却非常重要! 一.在一行内声明CSS h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}  h2 {  font-size:18px;  border:1px soli

Dreamweaver网页制作技巧:使用模板

dreamweaver|技巧|模板|网页 随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中.现在,拥有自己的Web网站已经成为一种潮流.虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了,因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程,希望对大家有所帮助. 通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网 页结构以及相同栏目下的导航条.各类图标就显得非常麻烦,不过我们可以借助D

巧妙运用Dreamweaver进行网页制作技巧

dreamweaver|技巧|网页 巧妙运用DW进行网页制作技巧--熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同. 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用

网页制作技巧24条

01.让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: 〈Body Background="图片文件" bgproperties="fixed"〉 02.让你的网页无法另存为 <noscript><iframe alt=网页制作技巧24条 src=*></iframe></noscript> 03.让IFRAME框架内的文档的背景透明 <iframe alt=网页

学习网页制作基础入门教程(3)字体标签

教程|入门教程|网页 相关文章: 学习网页制作基础入门教程(1)网页编写 学习网页制作基础入门教程(2)排版标签 标题标签 1. 使用方法:<H1>标题內容</H1> 2. 标签解释:标题的大小一共有六种,两个标签一组,也就是从 <H1> 到 <H6> , <H1> 最大,<H6>最小.使用标题标签时,该标签会将字体变为粗体字,并会自成一行. 3. 使用范例: 原始碼 呈現結果 <H1>标题1</H1> 标题1

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.