头像

图片放大缩小可拖动

来源:http://www.hklipin.com/js/1865.html 仰望***星空 2017-05-02 20:57浏览(598) 收藏

鼠标放到图片上,滚动鼠标可放大缩小图片,移动鼠标可拖动图片
图片放大缩小可拖动
分类:其它特效 > jQuery插件 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 11 下载资源 下载积分: 10 积分

img.js

var params = {
    flage: false, //判断是否可以拖动
    moveX: 0,
    moveY: 0,
    curX: 0,
    curY: 0,
    downX: 0,
    downY: 0,
    boxW: 0,
    boxH: 0,
    imgW: 0,
    imgH: 0
}
var moveImg = function(obj) {
    $(obj).mousedown(function(e) {
        e.preventDefault();
        params.downX = e.clientX; //当前点击的X轴位置
        params.downY = e.clientY; //当前点击的y轴位置
        params.curX = $(this).css("left"); //距离左边的位置

        params.curY = $(this).css("top"); //距离右边的位置

        params.boxW = $(this).parent().width(); //父级元素的宽
        params.boxH = $(this).parent().height(); //父元素的高
        params.imgW = $(this).width() - params.boxW; //可移动的X轴距离
        params.imgH = $(this).height() - params.boxH; //可移动的Y轴距离

        if (params.boxH < $(this).height() || params.boxW < $(this).width()) {
            params.flage = true;
        }
    })
    $(document).mouseup(function(e) {
        params.flage = false;
    })
    $(obj).mousemove(function(e) {
        e.preventDefault()
        if (params.flage == true) {
            params.moveX = e.clientX - params.downX;
            params.moveY = e.clientY - params.downY;

            var mX = parseInt(params.moveX) + parseInt(params.curX);
            var mY = parseInt(params.moveY) + parseInt(params.curY);
            if (mX < -params.imgW) {
                mX = -params.imgW
            } else if (mX > 0) {
                mX = 0
            }
            if (mY < -params.imgH) {
                mY = -params.imgH;
            } else if (mY > 0) {
                mY = 0;
            }
            $(".box img").css({"left": mX, "top": mY});
        }

    })
}


var zoom;
var direction;
var imgZoom = function(objId) { //拖动图片
    var imgId = document.getElementById(objId);
    zoom = parseInt(imgId.style.zoom, 10) || 100;

    /* 
     * 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel;
     * 
     */
    // firefox
    document.body.addEventListener("DOMMouseScroll", function(event) {
        direction = event.detail && (event.detail > 0 ? "mousedown" : "mouseup");
        imgFun(direction, objId)

    });

    // chrome and ie
    document.body.onmousewheel = function(event) {
        event = event || window.event;

        direction = event.wheelDelta && (event.wheelDelta > 0 ? "mouseup" : "mousedown");
        console.log(objId)
        imgFun(direction, objId)
    };
}

function imgFun(dir, id) { //缩放图片
    var img = document.getElementById(id);
    if (zoom > 500)
        zoom = 500;
    else if (zoom < 100)
        zoom = 100;

    if (dir == "mouseup") {
        zoom += 10
        img.style.width = zoom + '%';
    } else {
        zoom -= 10
        img.style.width = zoom + '%';
    }

    if (zoom > 100) { //当图片的百分比大于100%时才可以拖动图片
        img.style.cursor = "move";
    } else {
        img.style.cursor = "default";
    }
}
<div class="box">
    <img src="images/hehua.jpg" id="img"/>
</div>
<script type="text/javascript" src="js/img.js" ></script>
$(function() {
    moveImg(".box img"); //拖动图片
    imgZoom('img'); //放大缩小图片
})
标签: 放大缩小拖动
最新交易
评论5
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

  • 头像 4楼
    04-21 06:08
    ta***uo
    嗯 我知道了 我看看是不是火狐浏览器版本低
  • 头像 3楼
    05-06 16:02
    GD***an
    还是挺好玩的。
  • 头像 板凳
    05-03 13:11
    舒***畅
    功能还实用的
  • 头像 椅子
    05-03 08:39
    76***62
    很少用到这功能
  • 头像 沙发
    05-03 06:19
    ta***uo
    火狐浏览器没有移动
1 2
如何中彩票 www.779511.com-彩票双色球走势表| www.78tf.com-我的泊利彩票| www.990693.com-彩店宝彩票历史版本| www.wz91.cc-湖北省快三推荐号| www.660848.com-中国足球竞彩500| www.298188.com-网上快三害了多少人| www.633336.cc-竞彩篮球中奖概率| www.900342.com-武汉福彩走势图| 500彩票www.303483.com| www.36846.com-好运来彩票投注平台| www.176532.com-分分快三大小单双| www.678821.com-送彩金的游戏| www.369178.com-南昌彩票中奖新闻| www.639403.com-体育彩票机器多少钱| www.914664.com-手机淘宝购彩票| www.wu2.cc-乐彩3d论坛网| www.027685.com-福建省官方体彩网| www.894874.com-福利彩票群-| www.199273.com-体彩5d-| www.r21.la-福友网购彩是真的吗| www.cai7123.com江西福彩快三走势图| www.709649.com-10013联通彩票| www.4580.cc-易彩集团是骗人的吗| www.258187.com-500vip.彩票| www.900768.com-安徽快三专家荐号码| www.bw76.com-七星彩开奖直播现场| www.27.la-彩票主任王素英| www.081468.com-高兴彩票app下载| www.ie58.com-网赌彩票-| www.230752.com-乐8网彩票可信吗| www.435836.com-重庆七星彩-| www.027869.com-易彩国际是什么软件| www.196656.com-体彩开奖结果排列三| www.333149.com-彩票中奖是给现金吗| www.781342.com-福彩3d漏洞玩法| www.978341.com-彩钢围-| www.rg90.com-北京快三今天走势图| www.431901.com-瑞彩祥云彩票计划| www.898398.com-快三2码遗漏| www.na.cc-省福彩中心兑奖地址| www.l34.com-七乐彩票官网app| www.958821.com-湖北体育彩票官网| www.cp8277.com-江西快三玩法| www.zq7.cc-浙江快乐彩复式胆拖| www.34fg.com-廉江七星彩交流论坛| www.559134.com-内蒙体彩中心在哪里| www.2256.shop-辽宁福彩十二运| www.01248.com-福彩3d最准双飞| www.746224.com-海南七星彩高手论坛| www.902295.com-微信里能买彩票吗| www.989240.com-王软件预测福彩| www.qb16.com-新彩网3d手机版| www.8954.vip-七星彩每晚几点开奖| www.616488.com-吉林体彩爱乐彩| www.804636.com-福利彩票秘密组合| www.888559.com-710彩票网站| www.965794.com-体彩大乐透字谜汇总| www.bj0.com-广东体彩网-| www.vj94.com-福彩三毛图库大全| www.32ht.com-c58彩票.cn-| www.231960.com-网络黑彩票破解充值| www.345663.com-福利彩3d-| www.440143.com-湖北快三杀号定胆湖| www.532841.com-彩票号码均衡论| www.605650.com-手机彩膜贴法教程| www.692206.com-瑞彩彩票打不开了| www.790165.com-双色球走势彩票分析| www.881755.com-福彩3d直选遗漏号| www.969156.com-天天中彩票是骗局吗| 500彩票www.783500.com| www.308719.com-网上彩票投注站加盟| www.447100.com-吉林彩票初几上班| www.564053.com-时时彩任选玩法技巧| www.3735.biz-好彩团队靠谱吗| www.20550.com-九度彩票可靠吗| www.yh91.com-新手怎么玩彩票| www.95871.com-广西快三三同号遗| www.733051.com-南京体彩中心举报| www.946460.com-福建体彩网官网| 500彩票www.66653y.com| www.733166.com-福利彩票3d彩宝网| www.608789.cc-篮球彩票胜负怎么买| www.087020.com-乐福彩票登录| www.630255.com-体育彩票扫一扫| www.700033.cc-福利彩票的打法| www.838220.com-彩票533计划| www.906823.com-申请福利彩票店难吗| www.969043.com-网上刷彩犯法| www.gw7.com-中国体彩香港快3| www.pj43.com-彩票开奖直播| www.06kc.com-彩铅肉色怎么调出来| www.88pk.cc-网上私彩怎么赚钱的| www.2545.xyz-信用卡积分兑彩票| www.324900.com-发达彩票是正规的吗| www.433652.com-旭彩彩票合法吗| www.585776.com-现金彩票软件| www.6831.xyz-唯彩看球首页| www.69675.com-彩61网站源码| www.514.me-时时彩整改-| www.434477.com-福利彩票买几个数字| www.959425.cc-3d彩吧图库冫| 华彩www.71399g.com| www.ir09.com-下载360彩票| www.548704.com-福彩门户免全| www.683907.com-福利彩票天天中奖| www.860864.com-今晚七乐彩开奖号码| www.986678.com-福星福彩预测| www.rd66.com-彩票任选三复式对子| www.60aw.com-体彩机电脑显示| www.6691.cm-彩神vip软件| www.74828.com-足彩分析软件免费版| www.cp496.com-北京快三开奖链接| www.z66.top-开奖网高频彩走势| www.335370.com-360体彩网官网| www.091499.com-703彩票首页| www.969160.com-彩53官网-| www.433254.com-正安县彩票中奖| www.96897.com-小崔看体彩-| www.195852.com-江西快三预测三同号| www.369452.com-双彩票色球开奖结果| www.625365.com-彩票自动挂机平台| www.822895.com-七星彩买奖软件网址| www.977567.com-体彩什么app好| www.hj06.com-湖北快三号码统计图| www.69nm.com-网上怎么打彩票| www.vi68.com-体育彩票怎么算中奖| www.88441.cc-英国历史彩票最大奖| www.284900.com-附近体育彩票投注站| www.358238.com-大乐透彩票中奖名单| www.436686.com-福利彩票7-| www.530797.com-时时彩五星二码技巧| www.592387.com-彩99官网安卓下载| www.650770.com-网络时时彩骗局| www.700805.com-全天实时计划网快三| www.761532.com-梦见打彩票-| www.884634.com-彩票走势图怎样分析| www.951176.com-张路最新足彩分析| 创富彩票www.cf9905.com| www.66035.cc-时时彩机器哪里有| www.031361.com-辉煌彩票的骗局| www.103403.com-手机版乐彩网| www.594281.cc-七彩汇下载二维码| www.028067.com-广东福彩36好彩三| www.123351.com-彩票不能追号| www.796028.com-优盈彩票5分快3| www.0986.wang-福利彩快三开奖| www.7298.vip-谁有时时彩做号软件| www.551502.com-91福彩社区破解版| www.884466.com-乐彩双色球论坛综合| www.604514.com-足彩竞彩胜平负查询| www.457476.com-彩店宝历史版本下载| www.365847.cc-天空渐变图彩铅的| www.623048.com-用手机怎么购买彩票| www.972465.com-菠萝彩论坛区| www.wg64.com-爱彩乐网上购彩平台| www.8506.com-九彩彩票软件下载| www.162313.com-100彩票下载| www.981771.com-彩钟-| www.958230.com-今天福彩开什么号| www.886770.com-大大中彩票可靠吗| www.058092.com-彩届-| www.192105.com-河南福彩一定牛快三| www.386900.com-体育彩票信息网| www.566382.com-体彩任九开奖金额|