添加javascript动画 [英] Adding javascript animation

查看：52
本文介绍了添加javascript动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

http://imgur.com/D60mEG9 [ ^ ]



如何将javascript动画添加到上图中的css框我没有任何线索如何添加它帮助我...

CSS部分

http://imgur.com/D60mEG9[^]

How do i add an javascript animation to the css box in the above image i dnt have any clue how to add it help me out...
the CSS Part

body
{
    margin: 0;
    padding: 0;
}
#main
{
    width: 1920px;
    height: 1080px;
    background-image: URL('../assets/images/iwmi-bg.jpg');
}
.circle
{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    border: 5px solid #fdb219; /*box-shadow: 5px 5px #000;*/
    text-align: center;
    background-repeat:no-repeat;
    background-position:center; 
    z-index:10;}
    
@keyframes blink1 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 333.5px; top: 241.5px;  }
}

@-webkit-keyframes blink1 {
    0% {  width:60px; height:60px;left: 120px; top: 90px; }
    100% { width:65px; height:65px;left: 117.5px; top: 87.5px;  }
}

.blink1 {
    -webkit-animation: blink1 .75s linear infinite;
    -moz-animation: blink1 .75s linear infinite;
    -ms-animation: blink1 .75s linear infinite;
    -o-animation: blink1 .75s linear infinite;
    animation: blink1 .75s linear infinite;
} 

@keyframes blink2 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 332.5px; top: 240.5px;  }
}

@-webkit-keyframes blink2 {
    0% {  width:60px; height:60px;left: 665px; top: 360px; }
    100% { width:65px; height:65px;left: 662.5px; top: 357.5px;  }
}

.blink2 {
    -webkit-animation: blink2 .75s linear infinite;
    -moz-animation: blink2 .75s linear infinite;
    -ms-animation: blink2 .75s linear infinite;
    -o-animation: blink2 .75s linear infinite;
    animation: blink2 .75s linear infinite;
} 

@keyframes blink3 {  
   0% {  width:60px; height:60px;left: 721px; top: 206px; }
    100% { width:65px; height:65px;left:718.5px; top: 203.5px;  }
}

@-webkit-keyframes blink3 {
    0% {  width:60px; height:60px;left: 206px; top: 721px; }
    100% { width:65px; height:65px;left:203.5px; top: 718.5px;  }
}

.blink3 {
    -webkit-animation: blink3 .75s linear infinite;
    -moz-animation: blink3 .75s linear infinite;
    -ms-animation: blink3 .75s linear infinite;
    -o-animation: blink3 .75s linear infinite;
    animation: blink3 .75s linear infinite;
} 

@keyframes blink4 {  
    0% {  width:60px; height:60px; left: 570px; top: 800px; }
    100% { width:65px; height:65px; left: 567.5px; top: 767.5px;  }
}

@-webkit-keyframes blink4 {
    0% {  width:60px; height:60px;left: 661px; top: 500px; }
    100% { width:65px; height:65px;left: 658.5px; top: 497.5px;  }
}

.blink4 {
    -webkit-animation: blink4 .75s linear infinite;
    -moz-animation: blink4 .75s linear infinite;
    -ms-animation: blink4 .75s linear infinite;
    -o-animation: blink4 .75s linear infinite;
    animation: blink4 .75s linear infinite;
} 

@keyframes blink5 {  
    0% {  width:60px; height:60px; left: 1287px; top: 165px; }
    100% { width:65px; height:65px; left: 1284.5px; top: 162.5px;  }
}

@-webkit-keyframes blink5 {
    0% {  width:60px; height:60px;left:1291px; top: 154px; }
    100% { width:65px; height:65px;left: 1289.5px; top: 151.5px;  }
}

.blink5 {
    -webkit-animation: blink5 .75s linear infinite;
    -moz-animation: blink5 .75s linear infinite;
    -ms-animation: blink5 .75s linear infinite;
    -o-animation: blink5 .75s linear infinite;
    animation: blink5 .75s linear infinite;
} 

@keyframes blink6 {  
    0% {  width:60px; height:60px; left: 1450px; top: 308px; }
    100% { width:65px; height:65px; left: 1447.5px; top: 305.5px;  }
}

@-webkit-keyframes blink6 {
    0% {  width:60px; height:60px;left: 1488px; top: 309px; }
    100% { width:65px; height:65px;left: 1485.5px; top:306.5px;  }
}

.blink6 {
    -webkit-animation: blink6 .75s linear infinite;
    -moz-animation: blink6 .75s linear infinite;
    -ms-animation: blink6 .75s linear infinite;
    -o-animation: blink6 .75s linear infinite;
    animation: blink6 .75s linear infinite;
} 

@keyframes blink7 {  
    0% {  width:60px; height:60px; left: 1390px; top: 600px; }
    100% { width:65px; height:65px; left: 1387.5px; top: 575.5px;  }
}

@-webkit-keyframes blink7 {
    0% {  width:60px; height:60px;left: 1488px; top: 606px; }
    100% { width:65px; height:65px;left: 1485.5px; top:603.5px;  }
}

.blink7 {
    -webkit-animation: blink7 .75s linear infinite;
    -moz-animation: blink7 .75s linear infinite;
    -ms-animation: blink7 .75s linear infinite;
    -o-animation: blink7 .75s linear infinite;
    animation: blink7 .75s linear infinite;
} 

@keyframes blink8 {  
    0% {  width:60px; height:60px; left: 1720px; top: 820px; }
    100% { width:65px; height:65px; left: 1717.5px; top: 817.5px;  }
}

@-webkit-keyframes blink8 {
    0% {  width:60px; height:60px;left: 1635px; top:711px; }
    100% { width:65px; height:65px;left: 1632.5px; top: 708.5px;  }
}

.blink8 {
    -webkit-animation: blink8 .75s linear infinite;
    -moz-animation: blink8 .75s linear infinite;
    -ms-animation: blink8 .75s linear infinite;
    -o-animation: blink8 .75s linear infinite;
    animation: blink8 .75s linear infinite;
} 

#c1
{
      left:120px;
      top:90px;
}
#c2
{
  left:665px;
  top: 360px;  
}
#c3
{
  left: 206px;
  top: 721px;  
}
#c4
{
  left:661px;
  top: 500px;  
}
#c5
{
  left: 1291px;
  top: 154px;  
}
#c6
{
  left:1488px;
  top:309px;  
}
#c7
{
  left:1420px;
  top:608px;  
}
#c8
{
  left:1635px;
  top: 711px;  
}


/* Popup Box Css - Right side set*/

#mainbox {
	background-color:#084679;
	height: 290px;
	width: 497px;
	position:absolute;
}
#videobox {
	background-color:#084679;
	height: 169px;
	width: 300px;
	left: 15px;
	top: 19px;
	float: left;
	position: absolute;
}
#smallbox1 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 15px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox2 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 136px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox3 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 257px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox4 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 378px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox5 {
	background-color: #084679;
	height: 62px;
	width: 110px;
	left: 330px;
	top: 60px;
	float: left;
	position: absolute;
}


/* Popup Box Css - Left side set*/

#mainbox1 {
	background-color:#084679;
	height: 290px;
	width: 497px;
	position: absolute;
}
#videobox1 {
	background-color: #084679;
	height: 169px;
	width: 300px;
	left: 187px;
	top: 19px;
	float: left;
	position: absolute;
}
#smallbox11 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 15px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox21 {
	background-color: #0dd4d7;
	height: 62px;
	width: 110px;
	left: 136px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox31 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 257px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox41 {
	background-color:#0dd4d7;
	height: 62px;
	width: 110px;
	left: 378px;
	top: 211px;
	float: left;
	position: absolute;
}
#smallbox51 {
	background-color: #084679;
	height: 62px;
	width: 110px;
	left: 22px;
	top: 55px;
	float: left;
	position: absolute;
}





The Java Script Part



The Java Script Part

$(document).ready(function () {

            $('#mainbox').hide();   // This is Right side  box 
            $('#mainbox1').hide(); // This is left side  box 

           $('#smallbox11').click(function () {

               // $('#videobox1').empty();
               // $('#videobox1').css('background-image', 'URL(assets/images/images1.jpg)');

           })

           $("#c1").click(function () {
               $("#mainbox").animate({
                   width: "70%",
                   opacity: 0.4,
                   marginLeft: "0.6in",
                   fontSize: "3em",
                   borderWidth: "10px"
               }, 1500);
           });

//                function AnimatePosition(TheSelector, SomeTopValue, SomeLeftValue. SomeWidthValue, SomeHeightValue) {

//                        TheSelector.animate({ top: SomeTopValue,
//                          left: SomeLeftValue
//                          width: SomeWidthValue,
//                          height: SomeHeightValue}, 500);
//}


            $('#c1').click(function () {
                setPos();

                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');
                clearCircle()


                $(this).removeClass("blink1");
                //$(this).addClass("blink1");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');

                $(this).css('top', 90 - ((190 - 60) / 2));
                $(this).css('left', 120 - ((190 - 60) / 2));

                $(this).css('background-image', 'URL(assets/images/blue_back.png)');

////                TheSelector = $(this); //or TheSelector = $('#mainbox1'); or another element
////                TheTop = 721 - ((190 - 60) / 2);
////                TheLeft = 206 - ((190 - 60) / 2);
////                TheHeight = 190;
////                TheWidth = 190;

////                AnimatePosition(TheSelector, TheTop, TheLeft, TheWidth, TheHeight);

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '160px');
                $('#mainbox1').css('left', '165px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })

            $('#c2').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                $(this).removeClass("blink2");
                // $(this).addClass("blink2");
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 360 - ((190 - 60) / 2));
                $(this).css('left', 665 - ((190 - 60) / 2));
                $(this).css('background-image', 'URL(assets/images/1.png)');
                $('#mainbox1').hide();
                $('#mainbox').hide();
                $('#mainbox').css('top', '440px');
                $('#mainbox').css('left', '200px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c3').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 721 - ((190 - 60) / 2));
                $(this).css('left', 206 - ((190 - 60) / 2));
                $(this).removeClass("blink3");
                // $(this).addClass("blink3");
                $(this).css('background-image', 'URL(assets/images/2.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '785px');
                $('#mainbox1').css('left', '265px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c4').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()

                $(this).css('z-index', '1');
                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 500 - (
                (190 - 60) / 2));
                $(this).css('left', 661 - ((190 - 60) / 2));
                $(this).removeClass("blink4");
                //$(this).addClass("blink4");
                $(this).css('background-image', 'URL(assets/images/3.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox1').css('top', '550px');
                $('#mainbox1').css('left', '738px');
                $('#mainbox1').css('z-index', '');
                $('#mainbox1').show();

            })


            $('#c5').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 154 - ((190 - 60) / 2));
                $(this).css('left', 1291 - ((190 - 60) / 2));
                $(this).removeClass("blink5");
                //$(this).addClass("blink5");
                $(this).css('background-image', 'URL(assets/images/5.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '223px');
                $('#mainbox').css('left', '820px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c6').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 309 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink6");
                // $(this).addClass("blink6");
                $(this).css('background-image', 'URL(assets/images/6.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '390px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })


            $('#c7').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color','#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 608 - ((190 - 60) / 2));
                $(this).css('left', 1488 - ((190 - 60) / 2));
                $(this).removeClass("blink7");
                // $(this).addClass("blink7");
                $(this).css('background-image', 'URL(assets/images/7.png)');

                $('#mainbox').hide();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '680px');
                $('#mainbox').css('left', '1025px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

            $('#c8').click(function () {
                setPos()
                $('.circle').css('width', '60px');
                $('.circle').css('height', '60px');

                clearCircle()


                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 711 - ((190 - 60) / 2));
                $(this).css('left', 1635 - ((190 - 60) / 2));
                $(this).removeClass("blink8");
                // $(this).addClass("blink8");
                $(this).css('background-image', 'URL(assets/images/8.png)');

                $('#mainbox').show();
                $('#mainbox1').hide();
                $('#mainbox').css('top', '785px');
                $('#mainbox').css('left', '1170px');
                $('#mainbox').css('z-index', '');
                $('#mainbox').show();

            })

        })

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function ResetCircle() {
            $('.circle').css('width', '60px');
            $('.circle').css('height', '60px');
        }

        //<!--  Postion tags-->

        function clearCircle() {

            $('.circle').css('background-image', '');
        }

        function setPos() {

            if ($('#c1').width() == 190) {
                $('#c1').css('top', 90);
                $('#c1').css('left', 120);
                $('#c1').addClass("blink1");
            }
            if ($('#c2').width() == 190) {
                $('#c2').css('top', 360);
                $('#c2').css('left', 665);
                $('#c2').addClass("blink2");
            }

            if ($('#c3').width() == 190) {
                $('#c3').css('top', 721);
                $('#c3').css('left', 206);
                $('#c3').addClass("blink3");
            }

            if ($('#c4').width() == 190) {
                $('#c4').css('top', 500);
                $('#c4').css('left', 661);
                $('#c4').addClass("blink4");
            }

            if ($('#c5').width() == 190) {
                $('#c5').css('top', 154);
                $('#c5').css('left', 1291);
                $('#c5').addClass("blink5");
            }

            if ($('#c6').width() == 190) {
                $('#c6').css('top', 309);
                $('#c6').css('left', 1488);
                $('#c6').addClass("blink6");

            }

            if ($('#c7').width() == 190) {
                $('#c7').css('top', 608);
                $('#c7').css('left', 1420);
                $('#c7').addClass("blink7");
            }

            if ($('#c8').width() == 190) {
                $('#c8').css('top', 711);
                $('#c8').css('left', 1635);
                $('#c8').addClass("blink8");
            }
        }





The HTML PArt



The HTML PArt

<!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></title>

</head>
<body>
    <div id="main">
        <div id="c1" class="circle blink1">
        </div>
        <div id="c2" class="circle blink2">
        </div>
        <div id="c3" class="circle blink3">
        </div>
        <div id="c4" class="circle blink4">
        </div>
        <div id="c5" class="circle blink5">
        </div>
        <div id="c6" class="circle blink6">
        </div>
        <div id="c7" class="circle blink7">
        </div>
        <div id="c8" class="circle blink8">
        </div>
        <!--  Pop up box div tags-->
        <div id="mainbox">
            <div id="videobox">
                <video width="300" height="169" controls>
           <source src="assets/videos/MP4/Keeping%20the%20Water%20Flowing.mp4" type="video/mp4">
           <source src="movie.ogg" type="video/ogg">
          </video>
            </div>
            <div id="smallbox1">
                <img src="assets/images/01.jpg" width="110" height="62" />
            </div>
            <div id="smallbox2">
                <img src="assets/images/02.jpg" width="110" height="62" />
            </div>
            <div id="smallbox3">
                <img src="assets/images/03.jpg" width="110" height="62" />
            </div>
            <div id="smallbox4">
                <img src="assets/images/04.jpg" width="110" height="62" />
            </div>
            <div id="smallbox5">
                <img src="assets/images/box%20tesxt.png" />
            </div>
        </div>
        <!--  Pop up box div tags 2-->
        <div id="mainbox1">
            <div id="videobox1">
                <video width="300" height="169" controls>
            <source src="assets/videos/MP4/World%20Water%20Day.mp4" type="video/mp4">  <!-- video file -->
            </div>
            <div id="smallbox11">
                <img src="assets/images/01.jpg" width="110" height="62" />
            </div>
            <div id="smallbox21">
                <img src="assets/images/02.jpg" width="110" height="62" />
            </div>
            <div id="smallbox31">
                <img src="assets/images/03.jpg" width="110" height="62" />
            </div>
            <div id="smallbox41">
                <img src="assets/images/04.jpg" width="110" height="62" />
            </div>
            <div id="smallbox51">
                <img src="assets/images/box%20tesxt.png" />
            </div>
        </div>
    </div>
</body>
</html>

推荐答案

(document).ready(function () {
(document).ready(function () {


('#mainbox').hide(); // This is Right side box
('#mainbox').hide(); // This is Right side box


('#mainbox1').hide(); // This is left side box
('#mainbox1').hide(); // This is left side box


这篇关于添加javascript动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆