你的位置:首页 > ASP.net教程

[ASP.net教程]自制小投票网站相关的知识点


一、直接按键盘(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>

View Code

二、动态效果(鼠标移到图片抖动)
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;}

View Code

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 = 0move = 0// 拖拽对象// 参见:http://blog.sina.com.cn/u/4702ecbe010007pevar 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;}

View Code

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>