jquery期末实验报告

本次jquery实验主要是通过实现一个简单的动画网站来巩固和运用jquery语法知识。

代码实现

$(document).ready(function () {
    $(".circle").animate({ left: '200px' }, "slow");
    $(".circle").animate({ top: '200px' }, "slow");
    $(".circle").animate({ left: '0px' }, "slow");
    $(".circle").animate({ top: '0px' }, "slow");
});

通过jQuery中的animate()方法，实现了一个简单的圆形图片在页面中的平移动画效果。

$("#btn-show").click(function () {
    $(".hidden-text").show("slow");
});

$("#btn-hide").click(function () {
    $(".hidden-text").hide("slow");
});

通过jQuery中的show()和hide()方法，分别实现了点击按钮可以展示和隐藏网站中的一个隐藏文本区域。

页面效果

最终实现的页面效果如下：

总结

通过本次jquery实验，深入掌握了jQuery中的常用语法方法，并且实现了一个简单的动画网站，增强了对前端技术的理解和应用能力。