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 相关文章推荐
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 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
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python实现截屏的函数
2015/07/26 Python
Python使用wxPython实现计算器
2018/01/30 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
太太口服液广告词
2014/03/20 职场文书
购房协议书范本
2014/04/11 职场文书
文明村镇申报材料
2014/05/06 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
亚运会口号
2014/06/20 职场文书
医生见习报告范文
2014/11/03 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL