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

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

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

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

疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战
  • 类型:前端开发大小:131.7 MB格式:PDF出版:电子工业出版社作者:李刚
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

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实现点击旋转再点击、 jQuery联动日历的实例代码、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:没有了

下一篇:jQuery日期范围选择器实例代码详解

展开 +

收起 -

学习笔记
网友NO.355816

用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 { vertical-align: middle;}a { text-decoration: none; color: #000;}a:hover { color: #c00; text-decoration: none;}.clear { clear: both;}input { font-size: 12px;}body { color: #333; font-size: 12px; font-family: "Microsoft YaHei"; background: #e62d2d; background: greenyellow; overflow-x: hidden;}/* 大转盘样式 */.content { display: block; width: 95%; /*居中显示*/ margin: 30px auto;}.content .wheel { display: block; width: 100%; position: relative; /*转盘的背景*/ background-image: url(.……

网友NO.144000

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 为大家分享的jQuery平滑旋转幻灯片代码如下 headtitlejQuery平滑旋转幻灯片代码/titlestyle!-- /* jQuery jcImgScroll css */.jcImgScroll { position:relative; height:342px; }.jcImgScroll li { border:1px solid #ccc; }.jcImgScroll li a { background:#fff; display:block; height:340px; }.jcImgScroll li.loading a { background:#fff url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;}.jcImgScroll em.sPrev {……

网友NO.234555

jQuery制作图片旋转效果

以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的。初始设置图片在正前方时是0度,无论是正时针还是逆时针方式旋转,当图片旋转角度大于0度 小于180度时图片的透明度是逐渐减小的,这里为了图片在180度时不至于完全透明加了个小小的计算公式,代码会在下面展示。 (5)图片的缩放也是根据图片旋转角度而定的,相信容易理解。 (6)有了图片的X轴位置信息,缩放信息,透明度信息后,接下来就是很简单的事情了,只要将所有的信息通过CSS样式显示出来就可以了。 css的样式会通过setInterval()方法逐渐改变。 下面来看下主要代码: var thisleft=-(o.radius)*Math.sin((360/imgnum)*$(this).data("index")*(Math.PI*2/360))+(holderwidth/2); var thiszindex=360/imgnum*$(this).data("index")180?360/imgnum*$(this).data("index")-360:-360/imgnum*$(this).data("index"); var thisopacit……

网友NO.154739

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="text/css" //headbody div class="palmtrees"/div div class="powerline"/div div class="city"/div div class="container" div class="ad" div id="ad_1" class="ad_1" img class="slice_1" src="ads/ad1_slice01.jpg"/ img class="slice_2" src="ads/ad1_slice02.jpg"/ img class="slice_3" src="ads/ad1_slice03.jpg"/ img class="slice_4" src="ads/ad1_slice04.jpg"/ img class="slice_5" src="ads/ad1_slice05.jpg"/ img class="slice_6" src="ads/ad1_slice06.jpg"/ img class="slice_7" src="ads/ad1_slice07.jpg"/ img class="sli……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明