主题:  小窗口大学问-玩透弹出窗口 (转)

daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#12003/2/17 22:22:00
其实这些东西在网上很好找到的,只要大家花点耐心找找。
多研究研究很多都很雷同,多试试。


前言:关于弹出窗口的问题已经有无数人问过了。干脆将这个专题写成教学,供大家观摩。


 



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#22003/2/17 22:22:23
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段javascript代码即可实现。下面俺就带您剖析它的奥秘。


 【1、最基本的弹出窗口代码】
其实代码非常简单:





 因为这是一段javascripts代码,所以它们应该放在之间。是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
 window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。
 用单引号和双引号都可以,只是不要混用。
 这一段代码可以加入HTML的任意位置,和之间可以,间也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#32003/2/17 22:22:52
【2、经过设置后的弹出窗口】
 下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。



 参数解释:


js脚本结束



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#42003/2/17 22:23:23
【3、用函数控制弹出窗口】
 下面是一个完整的代码。





...任意的页面内容...



 这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。
怎么调用呢?


 方法一: 浏览器读页面时弹出窗口;
 方法二: 浏览器离开页面时弹出窗口;
 方法三:用一个连接调用:
打开一个窗口
注意:使用的“#”是虚连接。
 方法四:用一个按钮调用:


 



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#52003/2/17 22:23:49
【4、同时弹出2个窗口】


 对源代码稍微改动一下:



 为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。
注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#62003/2/17 22:24:21
【5、主窗口打开文件1.htm,同时弹出小窗口page.html】

 如下代码加入主窗口区:


加入区:
open即可。



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#72003/2/17 22:24:43
6、弹出的窗口之定时关闭控制】

 下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?


 首先,将如下代码加入page.html文件的区:

 然后,再用 这一句话代替page.html中原有的这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

 



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#82003/2/17 22:25:06
7、在弹出窗口中加上一个关闭按钮】



呵呵,现在更加完美了!



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#92003/2/17 22:25:28
【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。
通过下面的例子,你可以在一个页面内完成上面的效果。






打开一个窗口




 看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。


 



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#102003/2/17 22:27:31
【9、终极应用--弹出的窗口之Cookie控制】

 回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
 有解决的办法吗?Yes! ;-) Follow me.
 我们使用cookie来控制一下就可以了。
 首先,将如下代码加入主页面HTML的区:



 然后,用(注意不是openwin而是loadpop啊!)替换主页面中原有的这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

 写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。
 需要注意的是,JS脚本中的的大小写最好前后保持一致。



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#112003/2/17 22:28:05
手底下刚好有一篇文章:
用Css控制IE5.5浏览器中滚动条

作者:linyu 中国软件开发中心

   自从dhtml出现以来,微软对dhtml功能的加强就没有停止过,在微软最新的游览器internet explorer 5.5的的ie5.5增加了许多新的样式表内容,对滚动条的样式进行修改也是其中之一,下面我们简单地介绍一下涉及浏览器滚动条的样式表内容:

1.overflow内容溢出时的设置

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立体滚动条亮边的颜色

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色

以上七个属性设置的值都是颜色值,可以使用样式表定义的各种表达方式。

使用以上的样式定义内容,我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式,第一组样式属性用于设定被设定对象是否显示滚动条,第二组样式属性则用于设置滚动条的颜色,要注意的本文涉及的样式属性都是ie才能支持的,第二组的样式属性只有ie5.5版本才能支持,所以请大家在调试的时候注意。

我们通过几个实例来讲解上述的样式属性:

1.让浏览器窗口永远都不出现滚动条

没有水平滚动条



没有垂直滚动条



没有滚动条



2.设定多行文本框的滚动条

没有水平滚动条



没有垂直滚动条



没有滚动条





3.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色

scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果:



4.设定其他元素时,基本上一样,你最好是在样式表文件中定义好一个类,这样你就可以重复使用了。

.coolscrollbar

{

scrollbar-arrow-color:yellow;

scrollbar-base-color:lightsalmon;

}

将以上语句加入到样式表文件中或html头部的当中,然后使用



快快行动,让你的主页马上酷起来。

TextText



--------------------------------------------------------------------------------



daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#122003/2/17 22:29:54
这篇文章是本人愿创,如要转载,请写明来自7713.net
图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示,当你进入一个网站时它的banner总是不同的,或者总有内容不同的提示(tips),大家在网上浏览时会经常发现这样的例子。使用这种技术,不但能在一定的空间里放入更多的内容,还可以给人一种经常更新的假象喔。

怎么样心动了吧?其实只要你有一点点html和javascript 的基础,一切都是这么简单。follow me,让我们来看看她随机的奥密。

让我们从一个简单的例子开始吧。平常我们在页面中加入图片都是用来完成。如果我们要随机显示3张不同的图片就要对这句代码进行小小的修改,首先加入

然后在这段标记内把用document.write("")的型式放进去,就成了

document.write("")

现在我们来完成最关建的一段:

id=Math.round(Math.random()*2)+1

这样取得随机数为1,2,3将你要显示的图片改名为1.gif,2.gif,3.gif,ok!最后的代码是:



试一下,是不是不错?那如果我的每一张图片都对应了一个超链接该怎么办呢?
我们还是来假设一下有3张图片,1.gif,2.gif,3.gif,分别对应的链接是url1,url2,url3。
为了让图片和链接一一对应,我们要设置一个数组image来放置链接的地址,如下:

var image=new Array(3)
image.length=3
image="url1"
image="url2"
image="url3"

为了将与图片对应的链接取出来,我们还要定义一个数组imageurl=image[id]
原理是这样的:
当页面被读入时,取一个随机数,假设是2即id=2,那么如上我们可轻松的完成2.gif在页面的显示。然后我们可以看到:imageurl=image而image="url2",剩下的事就好办了。完整的代码如下:



这只是一个简单的例子,还有许多的功能可以实现,比如,设定图片的显示机率等,请到本人主页:http://www.avyes.com看看效果,我所学有限,只能抛砖引玉,还请各位大虾多多指点。(pc-king@21cn.com)。




daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#132003/2/17 22:31:00
主题: 在右键菜单中加入其他功能
右键菜单的淡入淡出效果


















daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#142003/2/17 22:32:59
Dreamweaver中的flash4的控制参数设置
在DW中插入了FLASH后还可以有很多的控制参数,点属性面板右下的参数钮,就会有参数和值的加入。大家可以自由的控制,建议下最新的FLASH4 的OBJECT插件,这样才能正确自动安装支持FLASH4 的插件。如果没有也可以把下面的两个路径手工改一下。
注:有“*”的是可以在插入时就有和在DW中的FLASH属性面板中有的参数,true就是有效false就是无效
parameter      value
SRC         *.swf (flash文件名)*
move         *.swf (flash文件?*
CLASSID       clsid : D27CDB6E-AE6D-11cf-96B8-444553540000(ActiveX标识必须精确)*
WIDTH        N 或者 N% (flash宽度设置)*
HEIGH        N 或者 N% (flash高度度设置,用百分比可以自动适合浏览器)*
CODEBASE      http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"(下插件的地址,如果你使用DW2.1它的FLASH插入的代码有误,要下一个最新的FLASH4的OBJECT插件,到 老家去找吧,否 则很容易出问题,毕竟3和4的差别大了点)*

PLUGINSPAGE     http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash(同上,但只照顾了NS)*

SWLIVECONNECT    true | false (NS专用,强制使用JAVA)
PLAY         true | false (是否一开始就播放FLASH)*
LOOP         true | false (true=循环,false=播放一遍)*
QUALITY       low | high | autolow | autohigh | best (动画品质,不多说了)*
BGCOLOR       #RRGGBB (设置背景色,忽略FLASH里的背景设置)*
SCALE        showall | noborder | exactfit (如果定义了flash的高和宽flash怎样显示)*
ALIGN        L | R | T | B (和IMG的对齐差不多,但DW多了绝对居中和绝对居底)*
SALIGN        L | R | T | B | TL | TR | BL | BR (如果定义了flash的高和宽flash怎样对齐)
BASE         base directory or URL (能帮助flash文件定位你的文件地址
MENU         true | false (控制鼠标右键菜单,有点用,不过FLASH4自已的FSCOMMAND也可以控制)
WMODE        Window | Opaque | Transparent (重点是第三个,就是背景透明,就象是GIF文件一样了,只能用于windows版的IE,Window模式:普通播放模式,即FLASH影片在限定矩形区域播放.Opaque模式:不透明模式,即当DHTML元素于FLASH影片后面时不显示模式.


devicefont      true | false (true=使用系统字体,false=不使用系统字体)






daxin1023

职务:普通成员
等级:3
金币:2.0
发贴:906
注册:2002/7/4 22:19:35
#152003/2/17 22:34:16
网上视频点
CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
HEIGHT=144 WIDTH=192>




HEIGHT=144 WIDTH=192 AUTOSTART=true>


ID=video1
CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
HEIGHT=80 WIDTH=192>


HEIGHT=60 WIDTH=165 AUTOSTART=true>