jQuery实现点击旋转，再点击恢复初始状态动画效果示例

2024-12-17 17:02:01

本文实例讲述了jQuery实现点击旋转，再点击恢复初始状态动画效果。分享给大家供大家参考，具体如下：

今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下

1.HTML

<div class="box rotate"></div> <!--需要加一个初始状态-->

2.CSS

.box{        //普通样式
　　width:100px;
　　height:100px;
　　background:skyblue;
}
.rotate1{       //旋转后的位置
　　transform:rotate(45deg);
　　transtion:all .3s linear;
　　-webkit-transform:rotate(45deg);    //还是兼容一下
　　-webkit-transtion:all .3s linear;
}
.rotate{          //初始状态的旋转位置
　　transform:rotate(0);
　　transtion:all .3s linear;
　　-webkit-transform:rotate(0);
　　-webkit-transtion:all .3s linear;
}

3.JQ

<script>
　　$(function(){
　　　　$(".box").click(function(){
　　　　　if($(this).hasClass("rotate")){
　　　　　　　　$(this).removeClass("rotate").addClass("rotate1");
　　　　　}else{
　　　　　　$(this).removeClass("rotate1").addClass("rotate");
　　　　　}
　　　　})
　　})
</script>

效果：

感兴趣的朋友可以使用如下工具测试上述代码运行效果：

在线HTML/CSS/JavaScript代码运行工具：
http://tools.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

更多关于jQuery相关内容还可查看本站专题：《jQuery动画与特效用法总结》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现数字自动增加或者减少的动画效果示例

本文实例讲述了jQuery实现数字自动增加或者减少的动画效果.分享给大家供大家参考,具体如下: 效果图: 1.HTML: <div class="up"></div> <br> <div class="down"></div> 2.JS: $(function(){ var obj={ el:$(".up"), max:1000, start:100//增加开始的初始值 } var ob
jQuery实现图像旋转动画效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
jQuery右下角旋转环状菜单特效代码

jquery实现右下角旋转环形菜单特效代码,是固定在页面右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css制作动画效果. 效果图如下: 在线预览点击下载 html代码: <div class="htmleaf-container"> <div id='ss_menu'> <div> <i class="fa fa-qq"></i> </div>
jQuery实现切换页面过渡动画效果

直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条. <main> <div class="cd-index cd-main-content"> <div> <h1>Page Transition</
jQuery实现炫丽的3d旋转星空效果

本文实例讲述了jQuery实现炫丽的3d旋转星空效果.分享给大家供大家参考,具体如下: 该特效也是在Jquery插件库中找到的,感觉效果不错,说不定以后项目中要有绚丽的星空背景,拿来即用,收藏了下. 下载解压后的目录结构 index.html页面代码: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=&
jQuery制作图片旋转效果

以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的.初始设置图片在正前方时是0度,无论
jQuery实现的模仿雨滴下落动画效果

本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/ } .com{ border-radius: 0 50% 50% 50%; background: skyblue; transform: rotate(45deg); position: absolute; top: 0
jQuery+CSS3实现3D立方体旋转效果

本文介绍了如何利用jQuery+CSS3实现3D立方体旋转效果,先看一看效果图: 切换图片过程中,图片进行旋转: HTML结构 3D图片画廊的图片列表和导航按钮分别使用两个无序列表来制作. <section> <div id="css3dimageslider" class="transparency"> <ul> <li> <img src="img/css3dimg1.jpg"> &
jquery实现LED广告牌旋转系统图片切换效果代码分享

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转
基于jQuery插件实现环形图标菜单旋转切换特效

feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we

jQuery实现点击旋转，再点击恢复初始状态动画效果示例

相关推荐

随机推荐