通过js修改图片的css样式,实现简单的图片旋转

html代码:

<img style="max-width: 700px; transform: rotate(360deg);" src="/image/test1.img" class="image1">

<input type="hidden" value="0" name="tran_num1">

<a href="javascript:;" class="rotate" image_id="1">旋转</a>

js代码:

$(‘.rotate‘).click(function () {

var id = $(this).attr(‘image_id‘);

 var num = $(‘input[name=tran_num‘ + id + ‘]‘).val();

  var num = Number(num) + 1;

var i = 90 * num;

  $("#image"+id).css("transform", "rotate(" + i + "deg)");

  if (num == 4) {

    var num = 0;

  }

  $(‘input[name=tran_num‘ + id + ‘]‘).val(num);

})

时间: 2024-08-13 04:38:13

通过js修改图片的css样式,实现简单的图片旋转的相关文章

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

不用css样式表和背景图片实现圆角矩形,超简洁!

当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像实现.但是,不管是哪一种,都有一个共同的缺点:需要使用很多代码来嵌套,而这些代码对搜索引擎来说毫无意义. 在<css cookbook>一书中介绍了一种实现圆角矩形十分简洁的方法,那就是用Nifty Corners Cube 先看一个简单的例子:http://www.sz137.com/sz137

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

Bootstrap全局CSS样式之按钮和图片

.btn-default--按钮的默认样式: .btn-primary--按钮的首选样式: .btn-success--按钮的成功样式: .btn-info--按钮的一般信息样式:' .btn-warning--按钮的警告样式: .btn-danger--按钮的危险样式: .btn-link--按钮的链接样式: .btn-lg--大按钮样式: .btn-sm--小按钮样式: .btn-xs--超小按钮样式: .btn-block--将按钮设置为充满父元素: .active--设置按钮为激活状态:

js 设置多条css样式

如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv");给节点添加css:如果需要添加的css不多的话,可以obj.style.width = "300px";如果需要添加多条css语句的话,这样会有多条,如:obj.style.width="300px";obj.style.height="300px"

js之如何获取css样式

一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px;background-color:red; border:1px solid black;"></div> 2 <script> 3 var myDiv = document.getElementById("myDiv"); 4 5 alert(myDiv.style.width);//100

对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)

首先单独拎出来讲的是style style: nodeObject.style.cssProperty获取的是DOM节点上 style 属性定义的样式,如果不存在 style 属性,或者 style 属性没有定义相应的样式,则是无法获取的.也就是说,JavaScript 不会到 <style> 标签或者 CSS 文件去获取相应的样式,只能获取 style 属性定义的样式. 就是外部样式表,内部样式表,用style都是无效的,只有内联样式是有效的,当然用style写入也是写入在内联样式的. 然后

HTML标记语言和CSS样式的简单运用(Nineteenth Day)

曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件事做到底......今天就总结一下所学到的知识. 理论: HTML(Hyper Text Markup Language) 超文本标记语言 ?HTML文档 = 网页 ?HTML标签(不区分大小写)(有些大写是自动生成的) 页面包括“格式标签”和“页面内容” ?网页文件格式:.html或.htm HT

用js修改带!important的css样式

普通jQuery修改css的方法或者用dom.style.width="100px"的原生方法修改具有!important表示的样式都无效.查看了w3c标准之后,发现另外一个原生方法可以在修改的时候指定优先级,并且使用之后可行.代码如下: dom.style.setProperty("width","100px","important"); dom.style是一个CSSStyleDeclaration对象,w3c中对它的解释