当前位置:首页 > jQuery技术文章 > jQuery实现点击旋转,再点击恢复初始状态动画效果示例

jQuery实现点击旋转再点击恢复的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:106

这篇文章主要知识点是关于jQuery、点击旋转、点击恢复、jQuery实现图像旋转动画效果 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情

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

本文实例讲述了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>

效果:

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

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

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> 
<title>jQuery Animation - fadeTo </title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("div[name='divPop']").bind("click",clickMove).bind("dblclick",forward); 
}) 
function clickMove(){ 
var left = $(this).css("left"); 
if(left == "350px"){ 
loginMove("right",2); 
} 
else if(left == "150px"){ 
loginMove("right",1); 
} 
else if(left == "455px"){ 
loginMove("right",3); 
} 
else if(left == "650px"){ 
loginMove("left",1); 
} 
else if(left == "530px"){ 
loginMove("left",2); 
} 
else{ 
var cla = $(this).attr("class"); 
switch (cla) { 
case "login_1": forward("http://www.baidu.com/");break; 
case "login_2": forward("http://www.google.cn/");break; 
case "login_3": forward("http://www.163.com/");break; 
case "login_4": forward("http://www.sina.com.cn/");break; 
case "login_5": forward("http://www.sohu.com/");break; 
case "login_6": forward("http://www.qq.com/");break; 
default: forward('#'); 
} 
} 
} 
function loginMove(direction,index){ //动画函数 
var timerId; 
if(index<=0){ 
clearInterval(timerId); //取消动画功能 
return; 
} 
var div = $("[name='divPop']"); //取得所有div 
var divdivLength = div.length; 
if(direction=="left"){ 
div[-1] = div[divLength-1] 
var n=-2; 
} 
else{ 
div[divLength] = div[0]; 
var n = 0; 
} 
div.each(function(){ //jquery封装的动画功能 
++n; 
$(this).animate( 
{ 
"top":$(div[n]).css("top"), //取得下一个目标位置div的参数 
"left":$(div[n]).css("left"), 
"width":$(div[n]).width(), 
"height":$(div[n]).height() 
}, 
600, 
function(){ 
if($(this).css("top")=='150px'){ 
$(this).css({zIndex:3}); //设置图层置顶 
} 
else if ($(this).css("top")=='170px'){ 
$(this).css({zIndex:2}); 
} 
else if ($(this).css("top")=='80px'){ 
$(this).css({zIndex:1}); 
} 
else { 
$(this).css({zIndex:0}); 
} 
} 
); 
}) 
timerId = setInterval(function(){ 
loginMove(direction,--index); 
},650); 
} 
function forward(url){ 
window.location.href = url; 
} 
</script> 
</head> 
<body> 
<div name="divPop" class="login_1" > 
<div >百度</div> 
</div> 
<div name="divPop" class="login_2" > 
<div >Google</div> 
</div> 
<div name="divPop" class="login_3" > 
<div >网易</div> 
</div> 
<div name="divPop" class="login_4" > 
<div >新浪</div> 
</div> 
<div name="divPop" class="login_5" > 
<div >阿里巴巴</div> 
</div> 
<div name="divPop" class="login_6" > 
<div >腾讯</div> 
</div> 
</body> 
</html> 

以上所述是小编给大家介绍的jQuery实现图像旋转动画效果,希望对大家有所帮助!

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jquery幻灯片效果实例代码、 怎样处理jQuery EasyUI 已打开、 JQuery循环滚动文字图片实、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery实现左右两侧菜单添加、移除功能的方法总结

下一篇:easyui下拉框动态级联加载的实例内容

展开 +

收起 -

相关内容
锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情
Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

查看详情
PHP与jQuery开发实例

这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

查看详情
jQuery实战

jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
jQuery EasyUI开发指南

使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情
学习笔记
网友NO.840325

用jQuery旋转插件jqueryrotate制作转盘抽奖

本文实例为大家分享了jQuery旋转插件jqueryrotate制作转盘抽奖的具体代码,供大家参考,具体内容如下 原文链接:js HTML5 Canvas绘制转盘抽奖 下载地址:jqueryrotate !DOCTYPE htmlhtml head lang="en" meta charset="UTF-8"/ meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" / title抽奖转盘/title link rel="stylesheet" href="css/index.css" rel="external nofollow" script src="js/jquery-2.1.4.js"/script script src="js/jQueryRotate.js"/script script src="js/index.js"/script /head body div class="content" div class="wheel" canvas class="item" id="wheelCanvas" width="422px" height="422px"/canvas img class="pointer" src="images/wheel-pointer.png" / /div /div div class="tips" span id="tip"jason/span /div /body/html /*初始化样式*/body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div { margin: 0; padding: 0; border: 0;}ul,ol { list-style-type: none;}select,input,img,select ……

网友NO.932609

jQuery平滑旋转幻灯片特效代码分享

本文实例讲述了jQuery平滑旋转幻灯片特效。分享给大家供大家参考。具体如下: 这一款基于jQuery实现平滑旋转幻灯片代码,效果超酷,场面相当震撼;图片大小和颜色自定义请修改jQuery-jcImgScroll.js。 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 js关键代码: script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript"/scriptscript src="js/jQuery-easing.js" language="javascript" type="text/javascript"/scriptscript src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript"/scriptscript language="javascript" type="text/javascript"!-- $(function(){ $("#demo1").jcImgScroll({ }); $("#demo2").jcImgScroll({ count : 7 }); $("#demo3").jcImgScroll({ arrow : { width:110, height:342, x:220, y:0 }, count : 3, offsetX : 140, NumBtn : true, title:false });});--/script 为大家分享的……

网友NO.884236

jQuery制作图片旋转效果

以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的。初始设置图片在正前方时是0度,无论是正时针还是逆时针方式旋转,当图片旋转角度大于0度 小于180度时图片的透明度是逐渐减小的,这里为了图片在180度时不至于完全透明加了个小小的计算公式,代码会在下面展示。 (5)图片的缩放也是根据图片旋转角度而定的,相信容易理解。 (6)有了……

网友NO.355739

jquery实现LED广告牌旋转系统图片切换效果代码分享

本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考。具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果。 LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。 为大家分享的jquery实现LED广告牌旋转系统图片切换效果代码如下 !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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlejquery实现LED广告牌旋转系统图片切换效果/titlelink rel="stylesheet" href="css/lanrenzhijia.css" type="t……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757