课程导入:通过与学生问题式交流,引入该门课程。
介绍该课程的授课基本情况。
欣赏“贵美商城”、“e客在线”等网站作品,引入本章网页设计概述的学习主要知识。
讨论问题:1、简化方案是什么?
参考代码:
$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });如果您点击我,我会消失。
点击我,我会消失。
也要点击我哦。
中国办事处
隐藏
联系人:张先生
北三环中路 100 号
北京
美国办事处
隐藏
/body>
联系人:David
第五大街 200 号
纽约
8、jQuery animate()
演示简单的 jQuery animate() 函数。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
开始动画
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
实训目标
专业背景
操作思路(视频演示)