当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  一、不使用jquery,简单的缩放: 代码如下: onMouseWheel var count = 10; function Picture() { count = Counting(count); Resize(count); return false; } function Counting(count){ if (event.wheelDelta >= 120) count++; else if (event.wheelDelta 0 || evt.wheelDelta < 0) {       ...

一、不使用jquery,简单的缩放:

代码如下:




onMouseWheel

var count = 10;
function Picture()
{
count = Counting(count);
Resize(count);
return false;
}
function Counting(count){
if (event.wheelDelta >= 120)
count++;
else if (event.wheelDelta 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");
            });

        });
   


   


       

       

       
   




    
 
 

您可能感兴趣的文章:

  • jQuery全屏按比例缩放插件 jquery-backstretch
  • jQuery 元素缩放插件 Zoomooz
  • jQuery页面元素缩放插件 Zoonooz.js
  • jQuery图片缩放效果 FancyZoom
  • jquery实现图片按比例缩放示例
  • 基于JQuery实现的图片自动进行缩放和裁剪处理
  • jQuery EasyDrag实现DIV拖动
  • jQuery拖动div、移动div与弹出层实例
  • jquery实现鼠标拖动图片效果示例代码
  • jquery div拖动效果示例代码
  • jQuery实现鼠标可拖动调整表格列宽度
  • jQuery拖动div、移动div、弹出层实现原理及示例
  • Jquery仿IGoogle实现可拖动窗口示例代码
  • jQuery 水平拖动效果的实例代码
  • jquery对元素拖动排序示例
  • jquery列表拖动排列(由项目提取相当好用)
  • textarea显示成label的样式 jquery实例 iis7站长之家
  • jquery实现的鼠标拖动排序Li或Table
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  • jquery获得表单所有数据的实例分享
  • jQuery回车键事件实例代码
  • Jquery 键盘按键监听与滑动效果的实例
  • jquery实现弹出div,始终显示在屏幕正中间的简单实例
  • jquery导航固定效果实例
  • jquery 延迟执行的实例分享
  • JQuery validate日期比较实例
  • Jquery如何获取新浪天气预报?实例代码
  • jquery 网页自动播放声音实例
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3