Jquery图片向左向右旋转

最新推荐文章于 2024-05-28 09:47:09 发布

戒掉零食

最新推荐文章于 2024-05-28 09:47:09 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： Jquery图片向左向右旋转

本文链接：https://blog.youkuaiyun.com/weixin_44296167/article/details/85279648

Jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个基于HTML、CSS和JavaScript的图片预览窗口的设计与实现过程，重点讲解了图片旋转功能的代码实现，包括左转和右转操作，并提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html：

<div>

向左转

</div>

向右转

</div>

<img />(这里是动态加载的img图片)（最好一个img用一个li包住，在点击旋转时，img会转成canvas，但是被li包住的img没有转成canvas）

</div>

</div>

</div>

css：

.menuBox {

display: block; margin: 3px auto; height: 22px; width: 150px; position: absolute; right: 10px; top: 35px; z-index: 999;

}

.menuBox .menu {

width: 65px;

border: 1px solid #a2a2a2;

float: left;

font-size: 12px;

vertical-align: middle;

height: 17px;

line-height: 17px;

position: static;

border-color: #ddd;

color: #444;

}

.menuBox .mleft {

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

padding-right: 5px;

text-align: right;

}

.menuBox .mright {

border-left: 0;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

padding-left: 5px;

text-align: left;

}

.menuBox .menu:hover {

background-color: #dedede;

cursor: pointer;

}

.menuBox .menu img {

vertical-align: middle;

}

js：

$(function () {

//图片旋转

$(".zoom_left").click(function () {

var Angle = -90;

var idx_jzzp = idx;

var curimg = $("#idx_" + idx_jzzp);

curimg.rotate(Angle);

});

$(".zoom_right").click(function () {

var Angle = 90;

var idx_jzzp = idx;

var curimg = $("#idx_" + idx_jzzp);

curimg.rotate(Angle);

});

})

网址：http://www.cnblogs.com/cc11001100/p/6354234.html