高级Jquery动画

  • T9_450408
    了解作者
  • 610.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-07 02:09
    上传日期
高级Jquery 轮播点击动画 这个下载后可以直接使用. 自己可以坐下自动轮播
高级JQ.zip
  • 高级JQ
  • images
  • flash13.png
    130.8KB
  • flash23.png
    40.7KB
  • right.png
    2.4KB
  • flash2.png
    3.7KB
  • flash32.png
    4.6KB
  • flash33.png
    108.8KB
  • flash42.png
    10.4KB
  • flash12.png
    5.9KB
  • flash22.png
    6.3KB
  • flash43.png
    12.8KB
  • flash3.png
    8.3KB
  • bg2.jpg
    54.7KB
  • flash4.png
    142.1KB
  • left.png
    2.4KB
  • flash1.png
    9.2KB
  • bg1.jpg
    65.6KB
  • js
  • jquery.js
    70.5KB
  • index.html
    8.5KB
内容介绍
<!doctype html> <html lang="en"> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8 国际编码--> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="qq:561568157"> <meta name="Keywords" content="关键词,关键字"> <meta name="Description" content="描述"> <!--css , js--> <title>高级jquery特效</title> <style type="text/css"> *{margin:0px; padding:0px;} #flash{width:760px; height:300px; background:red; margin:50px auto; position:relative;} #flash img.but_left{position:absolute;/*绝对定位*/ left:10px; top:120px; z-index:5;} #flash img.but_right{position:absolute;/*绝对定位*/ right:10px; top:120px; z-index:5;} #flash .content{width:760px; height:300px; border:1px solid #00ff33; position:absolute; overflow:hidden;} /*第一部分样式*/ #flash .content img{position:absolute;} #flash .content img.f_1_1{/*left:20px;*/ left:-340px; top:80px; opacity:0;} #flash .content img.f_1_2{/*left:20px;*/left:-340px; top:150px; opacity:0;} #flash .content img.f_1_3{/*left:315px;*/left:760px; top:0px; opacity:0;} /*第二部分样式*/ #flash .content img.f_2_1{left:20px; /*top:50px;*/ top:170px; opacity:0;} #flash .content img.f_2_2{left:20px; /*top:160px;*/top:300px; opacity:0;} #flash .content img.f_2_3{left:420px; /*top:0px;*/top:300px; opacity:0;} /*第三部分样式*/ #flash .content img.f_3_1{/*left:320px;*/left:200px; top:120px; z-index:3; opacity:0;} #flash .content img.f_3_2{left:320px; /*top:200px;*/ top:300px; z-index:3; opacity:0;} #flash .content img.f_3_3{left:-110px; top:0px; opacity:0;} /*第四部分样式*/ #flash .content img.f_4_1{left:80px; /*top:0px;*/ top:300px; opacity:0;} #flash .content img.f_4_2{left:340px; top:80px; opacity:0;} #flash .content img.f_4_3{left:340px; /*top:220px;*/top:300px; opacity:0;} </style> </head> <body> <div id="flash"> <!--第一部分 Start--> <div class="content" style="background:url('images/bg1.jpg'); z-index:2;"> </div> <!--第一部分 End--> <!--第二部分 Start--> <div class="content" style="background:#e66c57;"> </div> <!--第二部分 End--> <!--第三部分 Start--> <div class="content" style="background:#202f3d;"> </div> <!--第三部分 End--> <!--第四部分 Start--> <div class="content" style="background:url('images/bg2.jpg');"> </div> <!--第四部分 End--> </div> <!-- 1、构建一个有宽度、高度的长方形 div 容器 2、解决浏览器的边距问题 margin:0px; padding:0px; 3、利用外边据 margin,让容器左右居中 4、在页面中插入图片 5、绝对定位和相对定位 运动是绝对的 静止是相对的 6、在大长方形id="flash" 构建四个一样大的长方形 7、第一个长方形里面的图片布局 绝对定位和相对定位 --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _index = 0;//序列号 var arrlist = null; var arrlist2 = null; arrydemo(); //alert(arrlist[0]); /*刚进入 加载第一个动画*/ donghua(); /*右点击事件*/ $("#flash img.but_right").click(function(){ _index++;//序列号加一 _index+1; //alert(_index); if(_index>3){_index = 0;}//到最后一个时,序列号变为0 回到第一部分 /*调用数组*/ arrydemo(); /*动画执行特效*/ donghua(); }); /*左点击事件*/ $("#flash img.but_left").click(function(){ _index--;//序列号减一 _index-1; if(_index<0){_index = 3;}//到最后一个时,序列号变为0 回到第一部分 //alert(_index); /*调用数组*/ arrydemo(); /*动画执行特效*/ donghua(); }); /*数组赋值函数*/ function arrydemo(){ $("#flash .content").eq(_index).fadeIn().siblings("div").fadeOut(); if(_index == 0){ arrlist = ["img.f_1_1","img.f_1_2","img.f_1_3"]; arrlist2 = [{left:"20px",opacity:"1"},{left:"20px",opacity:"1"},{left:"315px",opacity:"1"}]; }else if(_index == 1){ arrlist = ["img.f_2_1","img.f_2_2","img.f_2_3"]; arrlist2 = [{top:"50px",opacity:"1"},{top:"160px",opacity:"1"},{top:"0px",opacity:"1"}] }else if(_index == 2){ arrlist = ["img.f_3_1","img.f_3_2","img.f_3_3"]; arrlist2 = [{left:"320px",opacity:"1"},{top:"200px",opacity:"1"},{opacity:"1"}] }else if(_index == 3){ arrlist = ["img.f_4_1","img.f_4_2","img.f_4_3"]; arrlist2 = [{top:"0px",opacity:"1"},{opacity:"1"},{top:"220px",opacity:"1"}] } } function donghua(){ $("#flash .content").find("img").removeAttr("style");//移除jq加上去的样式 $("#flash .content").eq(_index).find(arrlist[0]).animate(arrlist2[0],1000,function(){ $("#flash .content").eq(_index).find(arrlist[1]).animate(arrlist2[1],1000,function(){ $("#flash .content").eq(_index).find(arrlist[2]).animate(arrlist2[2],1000); }); }); } /*if(_index == 0){//第一部分动画 $("#flash .content").find("img").removeAttr("style");//移除jq加上去的样式 $("#flash .content").eq(_index).find(arrlist[0]).animate(arrlist2[0],1000,function(){ $("#flash .content").eq(_index).find(arrlist[1]).animate(arrlist2[1],1000,function(){ $("#flash .content").eq(_index).find(arrlist[2]).animate(arrlist2[2],1000); }); }); }else if(_index == 1){//第二部分 $("#flash .content").find("img").removeAttr("style");//移除jq加上去的样式 $("#flash .content").eq(_index).find(arrlist[0]).animate(arrlist2[0],1000,function(){ $("#flash .content").eq(_index).find(arrlist[1]).animate(arrlist2[1],1000,function(){ $("#flash .content").eq(_index).find(arrlist[2]).animate(arrlist2[2],1000); }); }); }else if(_index == 2){//第三部分 $("#flash .content").find("img").removeAttr("style");//移除jq加上去的样式 $("#flash .content").eq(_index).find(arrlist[0]).animate(arrlist2[0],1000,function(){ $("#flash .content").eq(_index).find(arrlist[1]).animate(arrlist2[1],1000,function(){ $("#flash .content").eq(_index).find(arrlist[2]).animate(arrlist2[2],1000); }); }); }else if(_index == 3){//第四部分内容 $("#flash .content").find("img").removeAttr("style");//移除jq加上去的样式 $("#flash .content").eq(_index).find(arrlist[0]).animate(arrlist2[0],1000,function(){ $("#flash .content").eq(_index).find(arrlist[1]).animate(arrlist2[1],1000,function(){ $("#flash .content").eq(_index).find(arrlist[2]).animate(arrlist2[2],1000); }); }); } }); */ /*animate(要改变的动画值,动画执行时间,动画执行完成的内容)*/ /*第一部分动画*/ /*$("#flash .content").eq(0).find("img.f_1_1").animate({left:"20px",opacity:"1"},1000,function(){ $("#flash .content").eq(0).find("img.f_1_2").animate({left:"20px",opacity:"1"},1000,function(){ $("#flash .content").eq(0).find("img.f_1_3").animate({left:"315px",opacity:"1"},1000); }); }); */ /*第二部分动画*/ /*$("#flash .content").eq(1).find("img.f_2_1").animate({top:"50px",opacity:"1"},1000,function(){ $("#flash .content").eq(1).find("img.f_2_2").animate({top:"160px",opacity:"1"},1000,function(){ $("#flash .content").eq(1).find("i
评论
    相关推荐