HTML5拖动按钮齿轮动画切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5拖动按钮齿轮动画切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <title>HTML5拖动按钮齿轮动画切换特效</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/chilun.js"></script>
</head>
<body>
    <div class="main">
        <div class="wh_200"><img src="images/chilun.png" width="200" height="200" /></div>
        <div class="wh_120"><img src="images/chilun.png" width="120" height="120" /></div>
        <div class="wh_100"><img src="images/chilun.png" width="100" height="100" /></div>
        <div class="wh_150"><img src="images/rotate.png" width="150" height="150" /></div>
        <div class="chuansong"><img src="images/chuan.png" width="300" height="211" /></div>
        <div class="line"></div>
        <div class="slide">
            <div id="slide_btn"></div>
        </div>
    </div>
    <div class="container2" style="display:none">
        <div class="article2" style="display:none"><p>第二版内容蓝莲花没有什么能够阻挡 你对自由地向往 天马行空的生涯 你的心了无牵挂 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花</p></div>
    </div>
    <div class="container3" style="display:none">
        <div class="article3" style="display:none"><p>第三版内容蓝莲花没有什么能够阻挡 你对自由地向往 天马行空的生涯 你的心了无牵挂 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 穿过幽暗地岁月 也曾感到彷徨 当你低头地瞬间 才发觉脚下的路 心中那自由地世界 如此的清澈高远 盛开着永不凋零 蓝莲花</p></div>
    </div>
</body>
</html>

JS代码(chilun.js):

jQuery(document).ready(function(){
	var num=0;
	$("#slide_btn").mousedown(function (event){
	var btn_x=event.pageX-$("#slide_btn").offset().left,isMove=true;
	$(document).mousemove(function (event){
	if (isMove){
	if(parseInt($("#slide_btn").css("left"))>=80){
	$("#slide_btn").css({
	"left":80}
);
}
else{
	$("#slide_btn").css({
	"left":event.pageX-btn_x}
);
}
}
;
}
).mouseup(function(){
	isMove= false;
	if(parseInt($("#slide_btn").css("left"))>=80){
	num++;
	console.log(num)if(num==1){
	function move(){
	$(".container").stop().animate({
	"width":0}
,1000,function(){
	$(".container2").stop().animate({
	"width":"60%"}
,1000)}
);
}
setTimeout(move,500);
	$(".article").fadeOut();
	function art2(){
	$(".article2").fadeIn();
}
setTimeout(art2,2500)}
if(num==2){
	function move2(){
	$(".container2").stop().animate({
	"width":0}
,1000,function(){
	$(".container3").stop().animate({
	"width":"60%"}
,1000)}
);
}
setTimeout(move2,500);
	$(".article2").fadeOut();
	function art3(){
	$(".article3").show();
}
setTimeout(art3,2500)}
if(num==3){
	num=0;
	function move4(){
	$(".container3").stop().animate({
	"width":0}
,1000,function(){
	$(".container").stop().animate({
	"width":"60%"}
,1000)}
);
}
setTimeout(move4,500);
	$(".article3").fadeOut();
	function art4(){
	$(".article").fadeIn();
}
setTimeout(art4,2500)}
function rot(){
	$(".wh_200").removeClass("chilun").addClass("chilun2");
	$(".wh_120").removeClass("chilun2").addClass("chilun");
	$(".wh_100").removeClass("chilun3").addClass("chilun2");
	$(".wh_150").removeClass("chilun3").addClass("chilun2");
}
function rot_stop(){
	$(".wh_200").removeClass("chilun2");
	$(".wh_120").removeClass("chilun");
	$(".wh_100").removeClass("chilun2");
	$(".wh_150").removeClass("chilun2");
}
rot();
	setTimeout(rot_stop,2000)}
else{
	$("#slide_btn").css({
	"left":event.pageX-btn_x}
);
}
$("#slide_btn").css({
	"left":0}
)}
)}
)}
)

CSS代码(css.css):

*{margin:0;padding:0;list-style:none;}
body{background:#3a5b70;}
body,html{overflow:hidden;}
.main{height:570px;width:560px;position:relative;}
.wh_200{width:200px;height:200px;}
.wh_120{width:120px;height:120px;}
.wh_100{width:100px;height:100px;}
.wh_150{width:150px;height:150px;position:absolute;left:220px;top:200px;}
.chilun{animation:myfirst 2s linear 500ms alternate running;-moz-animation:myfirst 2s linear 500ms alternate running;-webkit-animation:myfirst 2s linear 500ms alternate running;-ms-animation:myfirst 2s linear 500ms alternate running;-o-animation:myfirst 2s linear 500ms alternate running;}
.chuansong{width:300px;height:211px;position:absolute;left:37px;top:205px;}
@keyframes myfirst{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
50%{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);}
75%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-moz-keyframes myfirst{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
50%{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);}
75%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-webkit-keyframes myfirst{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
50%{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);}
75%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-ms-keyframes myfirst{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
50%{transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);}
75%{transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
.chilun2{animation:namebox 2s linear 500ms alternate running;-moz-animation:namebox 2s linear 500ms alternate running;-webkit-animation:namebox 2s linear 500ms alternate running;-ms-animation:namebox 2s linear 500ms alternate running;-o-animation:namebox 2s linear 500ms alternate running;}
.chilun3{animation:myfirst 2s linear 500ms alternate running;-moz-animation:myfirst 2s linear 500ms alternate running;-webkit-animation:myfirst 2s linear 500ms alternate running;-ms-animation:myfirst 2s linear 500ms alternate running;-o-animation:myfirst 2s linear 500ms alternate running;}
@keyframes namebox{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
50%{transform:rotate(-360deg);-moz-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
75%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-moz-keyframes namebox{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
50%{transform:rotate(-360deg);-moz-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
75%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-webkit-keyframes namebox{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
50%{transform:rotate(-360deg);-moz-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
75%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-ms-keyframes namebox{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
50%{transform:rotate(-360deg);-moz-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
75%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
@-o-keyframes namebox{0%{transform:rotate(0);-moz-transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);}
25%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
50%{transform:rotate(-360deg);-moz-transform:rotate(-360deg);-webkit-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
75%{transform:rotate(-180deg);-moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);}
100%{transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);}
}
.rotate{animation:myfirst 2s linear 500ms alternate running;-moz-animation:myfirst 2s linear 500ms alternate running;-webkit-animation:myfirst 2s linear 500ms alternate running;-ms-animation:myfirst 2s linear 500ms alternate running;-o-animation:myfirst 2s linear 500ms alternate running;}
.line{width:400%;height:6px;position:absolute;left:300px;top:344px;/*background:url(../images/line_bg.png) repeat-x;*/
background:#00273f;}
.container{width:60%;height:100%;background:#00426c;position:absolute;right:0;top:0;}
.container2,.container3{height:100%;background:#00426c;position:absolute;right:0;top:0;}
.slide{width:120px;height:30px;margin-top:30px;background:url(../images/slide_bg.png) repeat-x;border-top-right-radius:3px;border-bottom-right-radius:3px;overflow:hidden;}
.slide div{width:40px;height:17px;background:#fff url(../images/btn_img.png) no-repeat center center;margin-top:6px;border-radius:3px;text-align:center;line-height:17px;left:0;position:absolute;z-index:20;cursor:pointer;}
.article,.article2,.article3{margin:20% 10%;position:absolute;z-index:50;}
.article p,.article2 p,.article3{text-indent:2em;color:#fff;line-height:24px;}

附件:下载该文件资源,减少时间成本(增值服务)