js+css3实现旋转效果


Posted in Javascript onJanuary 20, 2017

我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧

js+css3实现旋转效果

下面呢我先放上我的css代码,代码很简单:

.one{
width:200px;
height: 200px;
border:1px solid #adadad;
transition:all 0.1s;
border-radius:50%;
background:url(images/1.jpg) no-repeat center center;
background-size:cover;
margin:50px auto;
}

上面的代码大家都看得懂,我就不介绍了.我重点讲的是js的代码部分.

window.onload=function(){
 var div=document.getElementsByClassName("one")[0];
 console.log(div);
 setCss3(div,{transform:"rotate(10deg)","transform-origin":"50% 50%"})
 var angel=0;
 setInterval(function(){
 angel+=8;
 setCss3(div,{transform:"rotate("+angel+"deg)","transform-origin":"0 0"})
 },30)
 function setCss3(obj,objAttr){
 //循环属性对象
 for(var i in objAttr){
 var newi=i;
 //判断是否存在transform-origin这样格式的属性
 if(newi.indexOf("-")>0){
 var num=newi.indexOf("-");
 newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
 }
 //考虑到css3的兼容性问题,所以这些属性都必须加前缀才行
 obj.style[newi]=objAttr[i];
 newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
 obj.style[newi]=objAttr[i];
 obj.style["webkit"+newi]=objAttr[i];
 obj.style["moz"+newi]=objAttr[i];
 obj.style["o"+newi]=objAttr[i];
 obj.style["ms"+newi]=objAttr[i];
 }
 }
}

我在这就把相对的难点讲一下:

if(newi.indexOf("-")>0){
  var num=newi.indexOf("-");
  newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());
 }

newi=newi.replace(newi.substr(num,2),newi.substr(num,2).toUpperCase());

这一句代码其实就是把首字母转成是大写的

({transform:"rotate(10deg)","transform-origin":"0 0"))

因为在js中修改样式的时候,是不存在-webkit-transformz这样的格式的,两个单词之间的"-"是必须要省略掉的,换成第二个单词的字母为大写.所以主要就是把这个处理好了之后久ok了<br><span style="color: #ff0000">注意点:1.因为如果不添加css3的过渡属性的话,旋转的时候是会有种卡顿效果的,就是旋转的时候不顺畅,所以我这里添加了transition属性,让他转动起来的时候看起来顺畅的.<br>  2.transform-origin的值如果为0 0的时候,是绕着原点旋转的,50% 50%的时候就是绕着中心点旋转的.不过默认的时候就是绕着中心点旋转的<br></span>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
javascript判断office版本示例
Apr 11 Javascript
用js通过url传参把数据从一个页面传到另一个页面
Sep 01 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
深入理解javascript中的this
Feb 08 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 #Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
原生js实现弹出层效果
Jan 20 #Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
javascript 函数参数限制说明
2010/11/19 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
AngularJS表单验证功能
2017/10/19 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python生成九宫格图片
2018/11/19 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
利用Python实现kNN算法的代码
2019/08/16 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python 实现任务管理清单案例
2020/04/25 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
C面试题
2015/10/08 面试题
校园歌手大赛策划书
2014/01/17 职场文书
企业标语口号
2014/06/10 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android