Jul 5

活动地点乡村大世界。参加活动人员有: 

Jul 5


<form name="form" action="" onsubmit="return check();">
<input type=text name=str>
<input type=submit>
<form>
Jul 5
自定以右键菜单。

<HTML><HEAD><TITLE>右键菜单的淡入淡出效果</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
<!-- // RightClickMenu
var intDelay=10; //设置菜单显示速度,越大越慢
var intInterval=5; //每次更改的透明度
function showmenuie5(){
        var rightedge=document.body.clientWidth-event.clientX
        var bottomedge=document.body.clientHeight-event.clientY
        if (rightedge<ie5menu.offsetWidth)
            ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
        else
            ie5menu.style.left=document.body.scrollLeft+event.clientX
        if (bottomedge<ie5menu.offsetHeight)
            ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
        else
            ie5menu.style.top=document.body.scrollTop+event.clientY
        ie5menu.style.visibility="visible"
        //ie5menu.style.visibility=""
        ie5menu.filters.alpha.opacity=0
        GradientShow()
        return false
}
function hidemenuie5(){
        //ie5menu.style.visibility="hidden"
        GradientClose()
}
function highlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor="highlight"
            event.srcElement.style.color="white"
        }
}
function lowlightie5(){
        if (event.srcElement.className=="menuitems"){
            event.srcElement.style.backgroundColor=""
            event.srcElement.style.color="#000000"
        }
}
function jumptoie5(){
        if (event.srcElement.className=="menuitems"){
            if (event.srcElement.url != ''){
                if (event.srcElement.getAttribute("target")!=null)
                    window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
                else
                    window.location=event.srcElement.url
            }
        }
}

function GradientShow() //实现淡入的函数
{
    ie5menu.filters.alpha.opacity+=intInterval
    if (ie5menu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
}
    
function GradientClose() //实现淡出的函数
    {
    ie5menu.filters.alpha.opacity-=intInterval
    if (ie5menu.filters.alpha.opacity>0) {
     setTimeout("GradientClose()",intDelay)
     }
    else {
     ie5menu.style.visibility="hidden"
     }
}

function ChangeBG() //改变菜单项的背景颜色,这里的两种颜色值可以改为你需要的
{
    oEl=event.srcElement
    if (oEl.style.background!="navy") {
        oEl.style.background="navy"
    }
    else {
        oEl.style.background="#cccccc"
    }
}
// -->
</SCRIPT>

<STYLE type=text/css>
.cMenu {
    FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px
}
.menuitems {
    font-size:9pt;
    MARGIN: 2px;
    PADDING-BOTTOM: 0px;
PADDING-LEFT: 15px;
PADDING-RIGHT: 3px;
PADDING-TOP: 0px;
}
</STYLE>

<META content=" Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961_340A_11D0_A96B_00C04FD705A2 height=0 id=WebBrowser width=0>
</OBJECT>
<RIGHTCLICK><!--[if IE]>
<DIV class=cMenu id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5()
onmouseover=highlightie5()>

<DIV class=menuitems url="javascript:click_obj(0)">后退</DIV>
<DIV class=menuitems url="javascript:click_obj(1)">前进</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(2)">刷新</DIV>
<DIV class=menuitems url="javascript:click_obj(3)">加入收藏夹</DIV>
<DIV class=menuitems url="javascript:click_obj(4)">查看源文件</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(5)">属性</DIV>

</DIV>
<![endif]-->

<SCRIPT language=JavaScript>
<!--
function click_obj(id){
    switch(id){
        case 0:    
            history.back()
            break
        case 1:
            history.forward()
            break
        case 2:
            window.location.reload()
            break
        case 3:
            window.external.AddFavorite(location.href, document.title)
            break
        case 4:
            window.location = "view-source:" + window.location.href
            break
        case 5:
            document.all.WebBrowser.ExecWB(10,1)
            break
    }
}

if (document.all&&window.print){
    ie5menu.className="cMenu"
    document.oncontextmenu=showmenuie5
    document.body.onclick=hidemenuie5
}
//-->
</SCRIPT>
</RIGHTCLICK>
</BODY></HTML>
Jul 5
【1、最基本的弹出窗口代码】
其实代码非常简单:


因为这是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。
window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。
用单引号和双引号都可以,只是不要混用。
这一段代码可以加入HTML的任意位置,<head>å’Œ</head>之间可以,<body  >é—´</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。
【2、经过设置后的弹出窗口】
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。


参数解释:

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


【5、主窗口打开文件1.htm,同时弹出小窗口page.html】
如下代码加入主窗口区:

加入区:

<a href="1.htm" onclick="openwin()">open</a>

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

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

<FORM>
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>
</FORM>

呵呵,现在更加完美了!
【8、内包含的弹出窗口---一个页面两个窗口】
上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()
}
</SCRIPT>
</head>
<body >
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>

看看OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。
【9、终极应用--弹出的窗口之Cookie控制】
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(
有解决的办法吗?当然有!我们使用cookie来控制一下就可以了。首先,将如下代码加入主页面HTML的区:

  然后,用

<body  onload="loadpopup()">

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

Jul 5
..:: 巧用CSS制作艺术字 ::..

如果灵活应用CSS各种滤镜的特点并加以组合,我们可以得到许多意想不到的效果。这是一些效果示范,供各位参考。

E流设计

用blur滤镜做出的效果,代码如下:
FILTER: blur(direction=135,strength=8)

E流设计

用dropshadow滤镜做出的效果,代码如下:
FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)

E流设计

用glow滤镜做出的效果,代码如下:
FILTER: glow(color=#B4BBCF,strength=5)

E流设计

这个效果用到了两种滤镜:shadow和alpha,代码如下:
FILTER: alpha(opacity=100,finishiopacity=0,style=1)
shadow(color=#8C96B5,direction=135)  

E流设计

这个效果也用到两个滤镜mask和shadow,代码如下:
FILTER: mask(color=#E1E4EC)
shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)

注意:mask的颜色要和网页背景色一致,字体的颜色由shadow决定。

E流设计

如果说上面的效果是阴文的话,那么这个效果的应该算是阳文了,用两个滤镜实现mask和dropshadow,注意mask的颜色要和网页背景色一致,或者把mask和chroma成对使用,也可达到同样效果。代码如下:
FILTER: mask(color=#E1E4EC)
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
chroma(color=#E1E4EC)"  

E流设计

用glow滤镜可以做空心字,方法是将字体颜色设置为背景色,再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下:
FILTER: glow(color=#8C96B5,strength=2)
shadow(color=#B4BBCF,direction=135)  

E流设计


E流设计


E流设计

如果背景采用图片,为了能达到满意的效果需要将mask和chroma组合使用,这样能使字体感觉是透明的,让背景透出来。

上面列出的效果前者的代码是:
FILTER: mask(color=#E1E4EC)
shadow(color=#B4BBCF,direction=135)
chroma(color=#E1E4EC)
注意:字体的颜色由shadow决定,mask和chroma的颜色要相同,色彩任意。

中间的代码是:
FILTER: glow(strength=1)
mask(color=#B4BBCF)
chroma(color=#B4BBCF)
注意:mask和chroma的颜色相同,这个颜色决定了字体的颜色。

后者的代码是:
FILTER: mask(color=#E1E4EC)
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
chroma(color=#E1E4EC)
注意:mask和chroma的颜色相同,色彩由dropshadow决定。

WELCOME TO
WWW.E-FLOWING.COM

这个效果的代码:
FILTER: glow(strength=4)mask(color=#E1E4EC)

DataCenter 在线小游戏

http://www.51windows.net/myjs/?u=/hw/asp/jsview.asp?id=253

Pages: 59/60 First page Previous page 54 55 56 57 58 59 60 Next page Final page [ View by Articles | List ]