图片自动旋转

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testimg.aspx.cs" Inherits="MWeb.Services.testimg" %>


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testimg</title>
<script id="jscode">
    function hy_rotate(obj, rotate) {
        if (obj) {
            function rotate_set_style(obj, key, value) {
                obj.style[key] = value;
            }


            function rotate_float(n, b) {
                b = isNaN(parseInt(b)) ? -1 : parseInt(b);
                return isNaN(parseFloat(n)) ? 0 : (b == 0) ? parseInt(parseFloat(n)) : (b > 0) ? parseFloat(parseFloat(n).toString().replace((new RegExp('^(\\d+)\\.(\\d{' + b + '})\\d*$')), '$1.$2')) : parseFloat(n);
            }


            rotate = rotate % 360;
            if (rotate < 0) {
                rotate = 360 + rotate
            }
            rotate = rotate_float(rotate, 2);


            var rpi = rotate * Math.PI / 180, c = Math.cos(rpi), s = Math.sin(rpi), oh = obj.offsetHeight, ow = obj.offsetWidth, pw = rotate_float((oh * Math.abs(s) + ow * Math.abs(c)), 2), ph = rotate_float((oh * Math.abs(c) + ow * Math.abs(s)), 2), tw = (rotate % 180 == 0) ? 0 : ((pw - ow) / 2), th = (rotate % 180 == 0) ? 0 : ((ph - oh) / 2), css3 = 'translate(' + tw + 'px, ' + th + 'px) rotate(' + rotate + 'deg)', css3key = '', dbstyle = document.body.style, css3keys = ['transform', '-moz-transform', '-webkit-transform', '-o-transform', '-ms-transform'];


            for (var i in css3keys) {
                if (css3keys[i] in dbstyle) {
                    css3key = css3keys[i];
                }
            }


            if (css3key == '') {
                rotate_set_style(obj, 'filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=' + c + ', M12=' + (-s) + ', M21=' + s + ', M22=' + c + ', sizingMethod=\'auto expand\')');
            } else {
                obj.parentNode.style.width = pw + 'px';
                obj.parentNode.style.height = ph + 'px';
                rotate_set_style(obj, css3key, css3);
            }
        }
    }
</script>
<style>
/*.list{clear:both; padding:20px;}*/
/*.block{background:#FF99FF; padding:5px; float:left;}*/
.rotate{width:170px;}
.txt{background:#3366FF; padding:10px; color:#FFFFFF; font-size:12px; margin-bottom:10px;}
/*.code{border:#3333FF dotted 1px; padding:10px; background:#FFCCFF; clear:both;}*/
</style>
</head>
<body>
<div class="txt">
<span id="rotate_num"></span>
</div>
<%--<div class="list">--%>
<%--<div class="block">
<div>--%>
<div class="rotate" id="rotate">


<%--<img src="http://www.fjsen.com/images/attachement/jpg/site2/20130513/001b77b4c2f212fa86172f.jpg" />--%>
    <img src="../testimg/d.jpg" />
</div>
<%--</div>--%>
<%--</div>
</div>--%>
<script>
    function $id(id) {
        return document.getElementById(id);
    }
    var rrr = 0;
    var sss = 0;
    var iii = 0;
    var aaa = $id('rotate');
    var bbb = $id('rotate_num');
    function zzz() {
        rrr = rrr + 1;
        bbb.innerHTML = rrr;
        hy_rotate(aaa, rrr);
    }
    aaa.onclick = function () {
        if (sss == 0) {
            iii = setInterval(zzz, 20);;
            sss = 1;
        } else {
            clearInterval(iii);
            sss = 0;
        }
    }


</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值