Tag: 旋转

如何使用jquery旋转插件旋转图像？

如何使用jQuery-rotate插件旋转图像？ 我尝试过以下内容似乎不起作用： View Photo var angle = 0; setInterval ( function (e) { rotate(); }, 100 ); function rotate() { angle = angle + 1; $(‘#pic’).rotate(angle); } 大多数浏览器都支持其他方法，谢谢！

裁剪旋转的图像时，使Jcrop跟踪器不旋转

我正在尝试使用Jcrop裁剪图像，但是当我在图像上使用jqueryrotate时，会发生一些奇怪的事情。 我将图像旋转90度然后激活JCrop，JCrop不跟随旋转的图像，所以我也旋转了Jcrop-holder。 生成的图像没问题，但是当我选择要裁剪的部分时，我注意到我的跟踪器也已旋转。 当我将它向上拖动时，它向右移动，当我向左拖动时，它向下移动。 怎么了 然后它去了 如何使裁剪选择工具保持直立？ 我的HTML： <img id="image_canv" src="https://stackoverflow.com/questions/20062754/make-jcrop-tracker-not-rotate-when-cropping-a-rotated-image/”> 我的Jquery： $(‘#rotatephoto’).click(function () { value += 90; JcropAPI = $(‘#image_canv’).data(‘Jcrop’); if(JcropAPI != null) { JcropAPI.destroy(); } var h = $(‘.img-canvas’).height(); var w = $(‘.img-canvas’).width(); $(‘.img-canvas’).css(“position”,”fixed”); $(‘.img-canvas’).css(“width”,w); $(‘.img-canvas’).css(“height”,h); $(‘#image_canv’).Jcrop({ onSelect: showCoords2, onChange: showCoords2, setSelect: [ 0, 100, 50, 50 ] }); JcropAPI = $(‘#image_canv’).data(‘Jcrop’); JcropAPI.enable(); […]

Javascript函数将基础64图像旋转X度并返回新的base64

我想要一个javascript函数，它将base64图像旋转X度并返回新的base64图像。 示例我希望用以下内容调用函数： var newImg = rotateImg（imageData，90）; //应返回旋转90度的原始图像的base64字符串。 （底部示例base64图像字符串） 理想情况下，该function将向后兼容非html5浏览器，但为了简单起见，欢迎使用纯canvas解决方案。 我已经和它斗争了好几天。 我理解解决方案可能是，用原始字符串加载图像对象，创建临时canvas对象和上下文，然后旋转上下文，然后将canvas转换回图像字符串，但只是可以让它工作….请帮助！ 示例图像字符串： 数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAACIAAABBCAMAAACD + YYEAAAABGdBTUEAALGPC / xhBQAAAwBQTFRFpI8jl5FIn5V0paijNzAfJiIavsHNlpabcnB6iH0XZ2Z4gH6BnJM2paSHu7NVoqGdoi8pRDwnnz40vrl4qJtgpqKNg3pRoJBL8 + UJPj08nJeCNCkQhWgG5erh0q2RxcnKyYcT8POb391VRTAE + / rqzsqsqZ8xsaBa38sVgXU0jI6SpKKUdlpLk4VEfXAcjId2UFBMo5tc5bwCdX6noJtzwLIkkYAvmI5fu61GfnlMjn4Y39gPeXJVlY99gYKNb19afnli186St58T0cUPV09Azb8fX1w / nJqdp5s3dGtHMzhLGRcex8Fk4tZspoYSdnNxpKBxko51tKRg5d6Ig4B1181vX2BgFxEQWFE8W1dDiYuVdG5l5NQyraqZa2lmamppY15AgH5shYN8d3NocG1feXhyAAAA15Bry6847fPEPEWJv0E28 + ZTw76K / txB3cpM3NvAkpKecVsJjouKXGKJ9 + Io7ezNnqGts69tf3pT9vOt / vYY9d46 / uwVHx0mZm6hv6AmmZJh8uWS5t6jYWd78e2RVEQQ7 + qzCQ9JsrCY7dlNVVVapZIq / PMw1rkI7eVzxrgM7u4Ih24lg30UYl0krp5HnpqI0sdhzKEM3tWEj4tp7uiE69dY3MEKxsB6 // 2zz8JRKjBW / fdZXlpFua0O / TSM / 9IB / + 5oLB0B / O0D // 7cxq8h8t4DSk9sBgII7NkL […]

jQuery旋转/转换

我想使用此function旋转然后在特定点或度数停止。 现在元素只是旋转而不停止。 这是代码： $(function() { var $elie = $(“#bkgimg”); rotate(0); function rotate(degree) { // For webkit browsers: eg Chrome $elie.css({ WebkitTransform: ‘rotate(‘ + degree + ‘deg)’}); // For Mozilla browser: eg Firefox $elie.css({ ‘-moz-transform’: ‘rotate(‘ + degree + ‘deg)’}); // Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },65); } }); 谢谢你的帮助

在jQuery中转换

我正在尝试使用jquery获取一个元素来设置旋转hover效果，我有这个jsFiddle来测试。 到目前为止我有这个： $(“.icon”).hover(function() { $(this).stop().animate({transform: “rotate(-90deg)”, height: “200px”},400); },function() { $(this).stop().animate({backgroundColor : “black”, color: “red”},400); }); 但它似乎根本没有旋转它，我意识到设置css的正确方法是： -webkit-transform：rotate（30deg）; 我试过这个： $(this).stop().animate({-webkit-transform: “rotate(-90deg)”, height: “200px”},400); 但即使是高度也不会改变。 任何建议都会有所帮助！ 链接到JSFiddle

基于单独元素中的光标位置旋转元素

我最近在使用breadcrumbs目录function，需要根据breadcrumbs容器元素中的光标x位置旋转元素。 长话短说，我需要在’＃pointer-box’下面的箭头指向光标，当它在’#target-box’中时。 我正在寻找两个单独的公式，它们将a。）当’＃target-box’光标x位置为0时设置箭头的最左侧位置，并且b。）保持箭头的最左侧和右侧 – 在任何浏览器宽度或窗口大小调整时，最近的旋转属性成比例。 任何帮助是极大的赞赏。 这是现场演示。 http://jsfiddle.net/HeFqh/ 谢谢 更新 在Tats_innit的帮助下，我能够在“＃target-box”内部获得指向光标的箭头。 现在我有两个具体问题需要解决。 a。）调整窗口大小时，箭头和光标不再对齐。 b。）’mousemove’上的’var y’不扣除顶部偏移量 var y = e.pageY – this.offsetTop 更新的现场演示。 http://jsfiddle.net/HeFqh/11/ 谢谢