自制小投票网站相关的知识点

时间：2015-09-08 18:08:49 阅读：246 评论：0 收藏：0 [点我收藏+]

标签：

一、直接按键盘（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 = 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;
}

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>

自制小投票网站相关的知识点

标签：

原文地址：http://www.cnblogs.com/evan-success/p/4789226.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行