一、直接按键盘（Enter）进入首页
<script type="text/javascript"> function IsEnterPress(et) { var lKeyCode = (navigator.appname == "Netscape") ? et.which : et.keyCode; if (lKeyCode == 13) { document.getElementById("btnLogin").click(); } else return false; } function EnterGo() { ...... } </script> <body onload="document.getElementById('txtNum').focus();" > <div> <input type="text" id="txtNum" class="input-text" onkeypress="IsEnterPress(event)"/> <input type="button" id="btnLogin" onclick ="EnterGo()" value ="Go" /> </div> </body>
二、动态效果（鼠标移到图片抖动）
1、先导入脚本 <script src="js/jump.js" type="text/javascript"></script>
function JumpObj(elem, range, startFunc, endFunc) { var curMax = range = range || 6; startFunc = startFunc || function(){}; endFunc = endFunc || function(){}; var drct = 0; var step = 1; init(); function init() { elem.style.position = 'relative';active() } function active() { elem.onmouseover = function(e) {if(!drct)jump()} } function deactive() { elem.onmouseover = null } function jump() { var t = parseInt(elem.style.top); if (!drct) motionStart(); else { var nextTop = t - step * drct; if (nextTop >= -curMax && nextTop <= 0) elem.style.top = nextTop + 'px'; else if(nextTop < -curMax) drct = -1; else { var nextMax = curMax / 2; if (nextMax < 1) {motionOver();return;} curMax = nextMax; drct = 1; } } setTimeout(function(){jump()}, 200 / (curMax+3) + drct * 3); } function motionStart() { startFunc.apply(this); elem.style.top='0'; drct = 1; } function motionOver() { endFunc.apply(this); curMax = range; drct = 0; elem.style.top = '0'; } this.jump = jump; this.active = active; this.deactive = deactive; }
2、效果的显示
<script type="text/javascript"> $(function () { $("#ul img").each(function (k, img) { new JumpObj(img, 10); //第一个参数代表元素对象 //第二个参数代表抖动幅度 }); }); </script> <html> <body> <div> <ul id="ul"> <li> <img src="..."/> </li> </ul> </div> </body> </html>
三、动态效果（图片放大，缩小，移动）
1、先导入脚本 <script src="js/drag_map.js" type="text/javascript"></script>
drag = 0 move = 0 // 拖拽对象 // 参见：http://blog.sina.com.cn/u/4702ecbe010007pe var ie = document.all; var nn6 = document.getElementById && !document.all; var isdrag = false; var y, x; var oDragObj; function moveMouse(e) { if (isdrag) { oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px"; oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px"; return false; } } function initDrag(e) { var oDragHandle = nn6 ? e.target : event.srcElement; var topElement = "HTML"; while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") { oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement; } if (oDragHandle.className == "dragAble") { isdrag = true; oDragObj = oDragHandle; nTY = parseInt(oDragObj.style.top + 0); y = nn6 ? e.clientY : event.clientY; nTX = parseInt(oDragObj.style.left + 0); x = nn6 ? e.clientX : event.clientX; document.onmousemove = moveMouse; return false; } } document.onmousedown = initDrag; document.onmouseup = new Function("isdrag=false"); function clickMove(s) { if (s == "up") { dragObj.style.top = parseInt(dragObj.style.top) + 100; } else if (s == "down") { dragObj.style.top = parseInt(dragObj.style.top) - 100; } else if (s == "left") { dragObj.style.left = parseInt(dragObj.style.left) + 100; } else if (s == "right") { dragObj.style.left = parseInt(dragObj.style.left) - 100; } } function smallit() { var height1 = images1.height; var width1 = images1.width; images1.height = height1 / 1.2; images1.width = width1 / 1.2; } function bigit() { var height1 = images1.height; var width1 = images1.width; images1.height = height1 * 1.2; images1.width = width1 * 1.2; } function realsize() { images1.height = images2.height; images1.width = images2.width; block1.style.left = 0; block1.style.top = 0; } function featsize() { var width1 = images2.width; var height1 = images2.height; var width2 = 701; var height2 = 576; var h = height1 / height2; var w = width1 / width2; if (height1 < height2 && width1 < width2) { images1.height = height1; images1.width = width1; } else { if (h > w) { images1.height = height2; images1.width = width1 * height2 / height1; } else { images1.width = width2; images1.height = height1 * width2 / width1; } } block1.style.left = 0; block1.style.top = 0; } function onWheelZoom(obj) { //滚轮缩放 zoom = parseFloat(obj.style.zoom); tZoom = zoom + (event.wheelDelta > 0 ? 0.05 : -0.05); if (tZoom < 0.1) return true; obj.style.zoom = tZoom; return false; }
2、效果显示
<body>
<div>
<img class="dragAble" onmousewheel="return onWheelZoom(this)" style="zoom: 1; position: relative;" drag="0" id="block1" src=" <%=SeoStr %>" onmouseover="dragObj=block1; drag=1;" onmouseout="" />
</div>
</body>
四、插入flash影片的代码
<div>
<object id="bofang" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="800" height="450"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701standby=Loading Microsoft? Windows Media? Player components..."
type="application/x-oleobject">
<param name="URL" value="<%=videourl%>">
<param name="UIMode" value="full">
<param name="AutoStart" value="1">
<param name="Enabled" value="1">
<param name="EnableContextMenu" value="0">
<param name="windowlessVideo" value="0">
<param name='Volume' value='100'>
</object>
</div>