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


Posted in Javascript onJanuary 08, 2014

一、不使用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>
Javascript 相关文章推荐
jquery 模板的应用示例
Nov 12 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
浅谈sass在vue注意的地方
Aug 10 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
原生js实现针对Dom节点的CRUD操作示例
Aug 26 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
document.execCommand()的用法小结
Jan 08 #Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 #Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 #Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 #Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 #Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 #Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 #Javascript
You might like
编写PHP的安全策略
2006/10/09 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
Yii快速入门经典教程
2015/12/28 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
详解vue路由
2020/08/05 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python PyQt5标准对话框用法示例
2017/08/23 Python
python如何修改装饰器中参数
2018/03/20 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
解决Mac下使用python的坑
2019/08/13 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
法学毕业生自荐信
2013/11/13 职场文书
幼儿园标语大全
2014/06/19 职场文书
教室布置标语
2014/06/26 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
前台文员岗位职责
2015/02/04 职场文书
大雁塔导游词
2015/02/04 职场文书
小学教师节活动总结
2015/03/20 职场文书
初婚初育证明范本
2015/06/18 职场文书
mysql 排序失效
2022/05/20 MySQL