一些动态效果和其他的小知识点（来自小投票网站项目）
分类:
IT文章
•
2024-01-20 14:17:12
一、直接按键盘（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
