管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

jquery 图片缩放拖动的简单实例

　　一、不使用jquery，简单的缩放：

　　

复制代码 代码如下:

　　<HTML>

　　<HEAD>

　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

　　<TITLE>onMouseWheel</TITLE>

　　<SCRIPT>

　　var count = 10;

　　function Picture()

　　{

　　count = Counting(count);

　　Resize(count);

　　return false;

　　}

　　function Counting(count){

　　if (event.wheelDelta >= 120)

　　count++;

　　else if (event.wheelDelta <= -120)

　　count--;

　　return count;

　　}

　　function Resize(count){

　　oImage.style.zoom = count + '0%';

　　oCounter.innerText = count + '0%';

　　}

　　</SCRIPT>

　　</HEAD>

　　<BODY>

　　<div align=center>

　　<span style="font-weight:bold">Size =

　　<span id="oCounter" style="color:red;">100%</span></span>

　　<img id="oImage" src="images/aaa.gif" onmousewheel="return Picture();" >

　　</div>

　　</BODY>

　　</HTML>

　　一、使用jquery，实现缩放和拖动：

　　

复制代码 代码如下:

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　<title></title>

　　<style type="text/css">

　　#imgBox

　　{

　　width: 200px;

　　height: 200px;

　　background: red;

　　overflow: hidden;

　　margin: auto;

　　position: relative;

　　}

　　#imgMain

　　{

　　position: relative;

　　top: -200px;

　　}

　　</style>

　　<script src="js/jquery-1.2.6.js" type="text/javascript"></script>

　　<script type="text/javascript" language="javascript">

　　$(function () {

　　var event;

　　if ($.browser.mozilla) {

　　event = "DOMMouseScroll";

　　}

　　else {

　　event = "mousewheel";

　　}

　　$("#divBlock").bind(event,

　　function (e) {

　　var evt = window.event || e;

　　var newWidth;

　　var newHeight;

　　var newLeft;

　　var newTop;

　　var overHeight = $("#divBlock").height();

　　if (evt.detail > 0 || evt.wheelDelta < 0) {

　　newWidth = $("#imgMain").width() - 20;

　　newHeight = $("#imgMain").height() - 20;

　　newLeft = $("#imgMain").position().left + 10;

　　newTop = $("#imgMain").position().top + 10 - overHeight;

　　}

　　else {

　　newWidth = $("#imgMain").width() + 20;

　　newHeight = $("#imgMain").height() + 20;

　　newLeft = $("#imgMain").position().left - 10;

　　newTop = $("#imgMain").position().top - 10 - overHeight;

　　}

　　$("#imgMain").css({ left: newLeft + "px", top: newTop + "px" });

　　$("#imgMain").width(newWidth);

　　$("#imgMain").height(newHeight);

　　}

　　);

　　$("#divBlock").bind("mousedown", function (e) {

　　var xo = e.pageX;

　　var yo = e.pageY;

　　var imgLeft = $("#imgMain").position().left;

　　var imgTop = $("#imgMain").position().top;

　　var overHeight = $("#divBlock").height();

　　$("#divBlock").bind("mousemove", function (e) {

　　window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

　　var x = e.pageX;

　　var y = e.pageY;

　　var bX = $("#imgBox").offset().left;

　　var bY = $("#imgBox").offset().top;

　　$("#imgMain").css("left", x - bX - (xo - bX) + imgLeft);

　　$("#imgMain").css("top", y - bY - (yo - bY) - overHeight + imgTop);

　　});

　　});

　　$("#divBlock").bind("mouseup mouseout", function () {

　　$("#divBlock").unbind("mousemove");

　　});

　　});

　　</script>

　　</head>

　　<body>

　　<div id="imgBox">

　　<div style="width: 200px; height: 200px; cursor: pointer; position: relative; left: 0;

　　top: 0; filter: alpha(opacity=0); opacity: 0; -moz-opacity: 0; background: blue;

　　z-index: 999;" id="divBlock">

　　</div>

　　<img src="test.jpg" width="200" height="200" alt="" id="imgMain" />

　　</div>

　　</body>

　　</html>

教程首页 更多教程