zoukankan      html  css  js  c++  java
  • 图片旋转

        var rote=0;
    var i=0;
    //顺时针旋转
    $(".pop_write .turn_right").click(function(){
    var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;

    if(isIE){
    // for IE
    i = (i+1)%4;
    $(".pop_write .img_wp >img").css({filter:"progid:DXImageTransform.Microsoft.BasicImage(Rotation="+i+")"});

    var he = $(".pop_write .img_wp >img").height();
    var we = $(".pop_write .img_wp >img").width();

    $(".pop_write .img_wp").css({we+"px",height:he+"px"});
    $(".pop_write .img_del").css({left:le+"px"});
    }else{
    //for other
    rote = rote+90;
    var he = $(".pop_write .img_wp >img").height();
    var we = $(".pop_write .img_wp >img").width();
    var der = (rote/90)%4;
    var translatY = -(he-we)/2;
    var translatX = -Math.ceil((we-he)/2);
    var attr = null;
    var navgNick = navigator.userAgent.toLowerCase();

    if(navgNick.indexOf("gecko") > 0){attr = "-moz-transform"};
    if(navgNick.indexOf("presto") > 0) {attr = "-o-transform"};
    if(navgNick.indexOf("webkit") > 0) {attr = "-webkit-transform"};

    turnImg(der,attr,we,he,rote,translatY,translatX);
    }
    })

    //逆时针旋转
    $(".pop_write .turn_left").click(function(){
    var isIE = navigator.userAgent.toLowerCase().indexOf("msie") != -1;
    if(isIE){

    i = i >0?(i-1)%4:(3-i)%4;
    $(".pop_write .img_wp >img").css({filter:"progid:DXImageTransform.Microsoft.BasicImage(Rotation="+i+")"});

    var he = $(".pop_write .img_wp >img").height();
    var we = $(".pop_write .img_wp >img").width();

    $(".pop_write .img_wp").css({we+"px",height:he+"px"});
    $(".pop_write .img_del").css({left:le+"px"});

    }else{
    rote = rote-90;
    var he = $(".pop_write .img_wp >img").height();
    var we = $(".pop_write .img_wp >img").width();
    var attr = null;
    var navgNick = navigator.userAgent.toLowerCase();

    if(navgNick.indexOf("gecko") > 0){attr = "-moz-transform"};
    if(navgNick.indexOf("presto") > 0) {attr = "-o-transform"};
    if(navgNick.indexOf("webkit") > 0) {attr = "-webkit-transform"};
    if(!attr){return false;};

    var der = (-rote/90)%4;
    var translatY = (he-we)/2;
    var translatX = Math.ceil((we-he)/2);

    turnImg(der,attr,we,he,rote,translatY,translatX);
    }
    })

    //图片旋转90度
    function turnNine(attr,we,he,rote,translatY,translatX){
    $(".pop_write .img_wp").css({he+"px",height:we+"px"});
    $(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+translatY+"px,"+(-translatX)+"px)");
    }
    //图片旋转180和360度
    function turnLevel(attr,we,he,rote,translatY,translatX){
    $(".pop_write .img_wp").css({we+"px",height:he+"px"});
    $(".pop_write .img_wp >img").css(attr,"rotate("+rote+"deg)"+" "+"translate(0px,0px)");
    }
    //图片旋转270度
    function turnSecd(attr,we,he,rote,translatY,translatX){
    $(".pop_write .img_wp").css({he+"px",height:we+"px"});
    $(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+(-translatY)+"px,"+(translatX)+"px)");
    }else{
    $(".pop_write .img_wp >img").css(attr, "rotate("+rote+"deg)"+" "+"translate("+(-translatY)+"px,"+(0)+"px)");
    }
    //图片旋转
    function turnImg(der,attr,we,he,rote,translatY,translatX){
    switch(der){
    case -3:
    case 1:
    turnNine(attr,we,he,rote,translatY,translatX);
    break;
    case -1:
    case 3:
    turnSecd(attr,we,he,rote,translatY,translatX)
    break;
    case -2:
    case 0:
    case 2:
    turnLevel(attr,we,he,rote,translatY,translatX);
    break;
    }
    }
    <!-- 写点什么弹出 [-->
    <div class="pop pop_write" style="700px;height:700px;text-align:center">
    <div class="img_wp" style="display:inline-block;300px;height:300px;">
      <a class="turn_left" style="display:inline-block;background:red;margin-right:20px;">逆时针旋转</a><a class="turn_right" style="display:inline-block;background:red;">顺时针旋转</a>
      <img src="background.png" alt="" />
    </div>
    </div>
    <!--] 写点什么弹出 -->




  • 相关阅读:
    从gettext来看linux下程序的internationalization
    C++ Convert Operator和其他Operator的应用场景比较
    申明一个函数指针,并且该函数的返回值也是一个函数指针 示例代码
    XML操作大全
    如何让页面延迟显示?
    Ajax实现不刷屏的前提下实现页面定时刷新
    我喜欢的笑话 呵呵
    Atlas UpdatePanel使用技巧以及常见问题
    asp.net 弹出窗体
    C# asp.net操作文件
  • 原文地址:https://www.cnblogs.com/SCOOL/p/2378129.html
Copyright © 2011-2022 走看看