按钮特效

13、全屏显示
说明:真正的全屏显示,只能用ALT+F4关闭
代码:
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'www_ycrc_com_cn', 
'fullscreen')">

14、打开一个全屏窗口
说明:用按钮打开一个全屏窗口
代码:
<input type="button" onClick="www_ycrc_com_cn()" value="试试看" name="button">

<script>
<!--
function www_ycrc_com_cn(){
var targeturl="http://www.ycrc.com.cn"
newwin=window.open("","","scrollbars")
if (document.all){
newwin.moveTo(0,0)
newwin.resizeTo(screen.width,screen.height)
}
newwin.location=targeturl
}
//-->
</script>

15、各种用途的按钮大集合
说明:各种用途的按钮大集合
代码:
<input TYPE="button" NAME="view" VALUE="查看源代码" OnClick="window.location='view-source:' +window.location.href" >

<input TYPE="button" VALUE="返回上一步" ONCLICK="history.back(-1)">

<input TYPE="button" VALUE="刷新按钮一" ONCLICK="ReloadButton()">
<script language="JavaScript">
<!--
function ReloadButton(){location.href="3.html";}
// -->
</script>

<p>
<input TYPE="button" VALUE="刷新按钮二" onClick="history.go(0)">

<input TYPE="button" VALUE="回首页按钮" ONCLICK="HomeButton()">
<script language="JavaScript">
<!--
function HomeButton(){location.href="http://www.ycrc.com.cn";}
// -->
</script>

<input TYPE="button" VALUE="弹出警告框" ONCLICK="AlertButton()">
<script language="JavaScript">
<!--
function AlertButton(){window.alert("今天你喝了没有?:)");}
// -->
</script>

<p>
<input TYPE="button" VALUE="状态栏信息" ONCLICK="StatusButton()">
<script language="JavaScript">
<!--
function StatusButton(){window.status="你好吗?:)";}
// -->
</script>

<input TYPE="button" VALUE="背景色变换" onClick="BgButton()">
<script language="JavaScript">
<!--
function BgButton(){
if (document.bgColor=='#3399ff')
{document.bgColor='#00ccff';}
else{document.bgColor='#3399ff';}
}
// -->
</script>

<input TYPE="button" VALUE="打开新窗口" ONCLICK="NewWindow()">
<script language="JavaScript">
<!--
function 
NewWindow(){window.open("http://www.ycrc.com.cn","","height=600,width=800,left=10,top=10,status=no,location=no,toolbar=no, 
directories=no,menubar=no");}
// -->
</script>

16、特殊效果的按钮
说明:特殊效果的按钮
代码:
<style type="text/css">
<!--
.over {color:yellow; background: navy}
.down {color:yellow; background: navy; font-style: italic}
-->
</style>
<input
type="Button" value="按钮也疯狂" name="Button"
onMouseOver="this.className='over';"
onMouseOut="this.className='';this.value='按钮也疯狂'"
onMouseDown="this.className='down';"
onMouseUp="this.className='over';"
onClick="this.value='我真的好喜欢你!'">

17、让屏幕抖动一阵
说明:让屏幕抖动一阵
代码:
<input onclick="www_ycrc_com_cn(2)" type="button" value="地震啦!!!">
<script language="JavaScript">
<!--
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != null) {
parent.main.location.href=form.select1.options[myindex].value;
}
}
// -->
</script>
<script language="JavaScript1.2">
<!--
function www_ycrc_com_cn(n) {
if (window.top.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
}
}
}
alert(" 没吓坏吧!!! ");
}
// -->
</script>

时间: 2024-10-27 12:55:05

按钮特效的相关文章

FrontPage网页特效步步学:特效按钮的制作

frontpage|按钮|特效|网页|网页特效 在制作网页的时候,如果给网页增加一些实用的小技巧,那一定会给你的网站增色不少,下面就介绍几个FrontPage的小技巧,希望能对你有帮助. 特效按钮的制作 用一般的方法制作网页中的按钮,一点也不好看,还是用个FrontPage来制作一个特效按钮吧. 1.打开FrontPage,点击菜单"插入-Web组件". (图1) 图1 2.在弹出的对话框中选择组件类型为"动态效果",效果为"悬停按钮".(图2)

Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)_jquery

本文实例讲述了jQuery实现时尚漂亮的幻灯片特效,基本能满足你在网页上使用幻灯片(焦点图)效果.分享给大家供大家参考.具体如下:   幻灯片效果描述:用鼠标点击右下角数字按钮幻灯片进行左右切换进行切换.  运行效果截图如下: 具体实现代码: <head> <title>Jquery幻灯片焦点图插件</title> <script src="js/jquery-1.4a2.min.js" type="text/javascript&q

CSS3网页制作实例:css3制作创意样式按钮

文章简介:用css3写出来的创意样式按钮.这套按钮样式在鼠标经过时.点击时都有一些微妙的变换,包含一些简单css3过渡效果.动画效果以及javascript的辅助控制效果. 今天为大家分享一些用css3写出来的创意样式按钮.这套按钮样式在鼠标经过时.点击时都有一些微妙的变换,包含一些简单css3过渡效果.动画效果以及javascript的辅助控制效果.在这套创意样式按钮当中,很多地方都是巧妙的使用了 :before和 :after等伪元素. 查看预览  下载附件 基本HTML结构以及样式示例 下

使用Dreamweaver轻松实现交替图像按钮制作

dreamweaver|按钮 Flash 中的交替图像按钮一直是网页爱好者喜欢的动画按钮,在 Dreamweaver 中只需要几步简单的操作,就可以制作出这些极具动感的交替图像按钮,而且占用空间少. 效果说明:建立一组相互交替的图像,当鼠标移至目标图像上时,会显示出另外一幅图像,就像会动的按钮,既动感,又时尚. 创作思想:打开 Dreamweaver MX 2004 软件,执行[插入] [图像对象] [鼠标经过图像]命令,或者单击工具栏中 下拉菜单里的[鼠标经过图像]命令,按要求进行设置,最后保

用Dreamweaver实现交替图像按钮制作

只需要几步简单的操作,就可以制作出这些极具动感的交替图像按钮,而且占用空间少. 效果说明:建立一组相互交替的图像,当鼠标移至目标图像上时,会显示出另外一幅图像,就像会动的按钮,既动感,又时尚. 创作思想:打开 Dreamweaver MX 2004 软件,执行[插入] [图像对象] [鼠标经过图像]命令,或者单击工具栏中 下拉菜单里的[鼠标经过图像]命令,按要求进行设置,最后保存文件完成制作. 操作步骤 ( 1 )打开 Dreamweaver MX 2004 软件新建HTML文件. ( 2 )单

教你用Dreamweaver制作网页翻转按钮

Flash 中的交替图像按钮一直是网页爱好者喜欢的动画按钮,在 Dreamweaver 中只需要几步简单的操作,就可以制作出这些极具动感的交替图像按钮,而且占用空间少. 效果说明 建立一组相互交替的图像,当鼠标移至目标图像上时,会显示出另外一幅图像,就像会动的按钮,既动感,又时尚,如图 49-1 所示,实际效果请欣赏随书光盘中< Dreamweaver MX 2004 100 例>目录下的<实例 49 -插入交替图像按钮>. 创作思想 打开 Dreamweaver MX 2004

jquery实现鼠标悬浮停止轮播特效_jquery

本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

javascript简单实现跟随滚动条漂浮的返回顶部按钮效果_javascript技巧

本文实例讲述了javascript简单实现跟随滚动条漂浮的返回顶部按钮效果.分享给大家供大家参考,具体如下: 比较优秀的一款超过一屏高度才显示的,跟随滚动条漂浮的返回顶部按钮特效代码. 运行效果如下图所示: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

7款吸引人眼球的jQuery/CSS3特效实例分享_jquery

作为WEB前端开发者,jQuery和CSS3肯定用得也比较多,那么下面就分享一些由jQuery和CSS3制作成的特效,希望大家会喜欢. 1.基于jQuery和CSS3的圆盘抽奖 这个小程序可以让你在网站上轻松的添加一个抽奖应用,应用是基于jQuery和CSS3开发的,圆盘抽奖很好玩的哦,你抽中了什么? 在线演示 /源码下载 2.纯CSS3实现的点击发光按钮特效 这款按钮时基于纯CSS3实现的,当用户点击按钮的瞬间,按钮四周会发出淡淡的白光效果,是一款非常有特色的按钮. 在线演示 /源码下载 3.