jQuery的动画效果

原创 2019-04-15 16:34:08 249
摘要:<!DOCTYPE html><html><head> <title>jQuery的动画效果</title> <script type="text/javascript" src="../jQuery/jquery-3.3.1.min.js"></script> <st

<!DOCTYPE html>

<html>

<head>

<title>jQuery的动画效果</title>

<script type="text/javascript" src="../jQuery/jquery-3.3.1.min.js"></script>

<style type="text/css">

div{width: 200px;height: 200px;background: pink;position: absolute;}

</style>

<script type="text/javascript">

  $(document).ready(function(){

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

  $('.box1').animate({

  left:'+400px'

  },3000)

  $('.box1').animate({

  fontSize:'40px'

  },500)

  })

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

  $('.box1').stop(true)

  })

  })

</script>

</head>

<body>

<!-- 点击右移按钮 div右移 点击停止按钮当前效果停止 -->

<button id="right">右移</button>

<button id="stop">停止</button>

<div class="box1">php中文网</div>

</body>

</html>


批改老师:查无此人批改时间:2019-04-16 09:57:15
老师总结:完成的不错。jq比js容易,多练习,可以代替js的常规操作,继续加油。

发布手记

热门词条