这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现放大、缩小及拖拽图片的方法, 可兼容 IE 及火狐等浏览器, 通过 javascript 自定义函数实现针对图片的放大、缩小及拖拽等功能, 涉及 javascript 动态操作页面元素的相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下:
- var divId;
- var v_left;
- var v_top;
- window.onload=function(){
- divId = document.getElementById("block1");
- var height1 = images1.height;//图片的高度
- var width1 = images1.width;//图片的宽度
- v_left=(document.body.clientWidth-width1)/2;
- v_top=(document.body.clientHeight-height1)/2;
- divId.style.left=v_left;
- divId.style.top=v_top;
- }
- drag = 0;
- move = 0;
- // 拖拽对象
- 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;
- //document.onmouseup=MUp;// 事件会在鼠标按键被松开时发生
- 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() {
- //将图片缩小,失去热点
- height1 = images1.height;
- width1 = images1.width;
- images1.height = height1 / 1.1;
- images1.width = width1 / 1.1;
- }
- //放大倍数
- function bigit() {
- /*//将图片放大,不失热点
- var zoom = parseInt(images1.style.zoom, 10) || 100;
- zoom += event.wheelDelta / 12;
- if (zoom > 0) {
- images1.style.zoom = (zoom+10) + "%";
- }*/
- //将图片放大,失去热点
- height1 = images1.height;
- width1 = images1.width;
- images1.height = height1 * 1.1;
- images1.width = width1 * 1.1;
- }
- //还原
- function realsize() {
- images1.style.zoom=100+"%";
- images1.height = images2.height;
- images1.width = images2.width;
- divId.style.left=v_left;
- divId.style.top=v_top;
- }
- function featsize() {
- var width1 = images2.width;
- var height1 = images2.height;
- var width2 = 360;
- var height2 = 200;
- 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 bbimg(o) {
- /*var eleLeft;
- var eleTop;
- if(document.documentElement){
- eleLeft = document.documentElement.scrollLeft;
- eleTop = document.documentElement.scrollTop;
- }
- else{
- eleLeft = document.body.scrollLeft;
- eleTop = document.body.scrollTop;
- }
- v_left+=eleLeft;
- v_top+=eleTop;
- //divId.style.left=v_left;
- //divId.style.top=v_top;
- alert(document.documentElement.scrollTop +"----xxx"+document.body.scrollTop+window.pageyoffset);*/
- var zoom = parseInt(o.style.zoom, 10) || 100;
- zoom += event.wheelDelta / 12;
- if (zoom > 0) {
- o.style.zoom = zoom + "%";
- }
- return false;
- }
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0517/332398.html