JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换,渐变等等,它为网页活跃了网页的气氛,有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料:
能够具有交互性,能够包含更多活跃的元素,就有必要在网页中嵌入其它的技术。如:Javascript、VBScript、Document Object Model(DOM,文档对象模型)、Layers和 Cascading Style Sheets(CSS,层叠样式表)。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。
<script language="JavaScript"><!-- Hide the script from old browsers --
function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj
{obj.expr.value = eval(obj.expr.value)} //当前的参数的值和下文参数值所用的方法相同
var one = '1' //定义一个字符型的1
var two = '2' //定义一个字符型的2
var three = '3' //定义一个字符型的3
var four = '4' //定义一个字符型的4
var five = '5' //定义一个字符型的5
var six = '6' //定义一个字符型的6
var seven = '7' //定义一个字符型的7
var eight = '8' //定义一个字符型的8
var nine = '9' //定义一个字符型的9
var zero = '0' //定义一个字符型的0
var plus = '+' //定义一个字符型的+
var minus = '-' //定义一个字符型的*
var multiply = '*' //定义一个字符型的*
var divide = '/' //定义一个字符型的/
var decimal = '.' //定义一个字符型的.
function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj
{obj.expr.value += string} //让 obj的值加上 '+'后面的值
function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj
{obj.expr.value = ''} //让obj的值等于空
// --End Hiding Here -->
</script>
<form name="calc">
<table border=1>
<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"><tr>
<!--提交表单-->
<td><input type="button" value=" 7 " onClick="enter(this.form, seven)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 8 " onClick="enter(this.form, eight)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 9 " onClick="enter(this.form, nine)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" / " onClick="enter(this.form, divide)"><!--当鼠标点
击按钮的时候提交给函数按钮中的值-->
<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)"><!--当鼠标
点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 5 " onClick="enter(this.form, five)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 6 " onClick="enter(this.form, six)"><!--当鼠标点击按
钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" * " onClick="enter(this.form, multiply)"><!--当鼠标
点击按钮的时候提交给函数按钮中的值-->
<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)"><!--当鼠标点
击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 2 " onClick="enter(this.form, two)"><!--当鼠标点击按
钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 3 " onClick="enter(this.form, three)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" - " onClick="enter(this.form, minus)"><!--当鼠标点
击按钮的时候提交给函数按钮中的值-->
<tr><td colspan=2><input type="button" value=" 0 " onClick="enter
(this.form, zero)"><!--当鼠标点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" . " onClick="enter(this.form, decimal)"><!--当鼠标
点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" + " onClick="enter(this.form, plus)"><!--当鼠标点击
按钮的时候提交给函数按钮中的值-->
<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)"><!
--提交表单在javascript中进行运算-->
<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"><!--
点击此按钮调用此函数-->
</table>
</form>
参考代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script type="text/javascript" language="javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#right").click(function() {
var roll = $("<div></div>", { css: { position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background: "#fff"}}).appendTo($("#book").parent())
$(roll).animate({
left: "10px",
width: "398px"
}, 1000, function() {
$("#left").css({"background":"#fff"})
$(roll).fadeOut(300, function() {
$(roll).remove()
})
})
})
})
</script>
</head>
<body style="padding:5pxmargin:0">
<div id="book" style="width:797pxheight:494pxbackground:#cccborder:solid 6px #ccc">
<div id="left" style="width:398pxheight:494pxfloat:leftbackground:url(http://www.codefans.net/jscss/demoimg/201011/PLh.png) no-repeat top leftcursor:pointer"></div>
<div id="right" style="width:398pxheight:494pxfloat:leftbackground:#fffcursor:pointermargin-left:1pxtext-align:right"><p style="margin-top:470pxfont-size:12pxcolor:#999">点这翻页 </p></div>
</div>
</body>
</html>