(1)主题(目标):
完成悦轩饼家商品详情动态页面
(2)完成页面所需要的知识点(重难点)
jQuery click()方法:
当单击元素时,发生click事件。
click()方法触发click事件,或规定当发生click事件时运行的函数
jquery操作css
addClass()-向被选元素添加一个或多个类
removeClass-从被选元素删除一个或多个类
放大镜效果框架:
(3)完成页面的步骤
给物品重量文字加上点击加边框效果:
给储存文字的span标签设相同的class名字,在css样式中自定义一个需要的边框效果,再用js代码写function函数即可完成:
/*自定义需要的边框CSS样式*/
.dj {
border: 3px #FF4F0D solid;
}
/*js代码:*/
$(function() {
$(".bang").click(function() {
$(this).addClass("dj").siblings().removeClass("dj");
});
});
图片放大镜效果:
通过网站找到放大镜效果框架代码并复制,根据需求将原来的静态图片代码替换掉,再将复制的图片的地址换成自己图片的地址,再把css代码和js代码复制进来,并引入jQuery插件就完成了
(4)写页面的过程中碰到的问题,怎么解决的?
问题:商品重量点击效果的代码和要引用的都弄了,但是点击没反应
解决:将原来静态页面的hover的css代码和原来的边框代码都删掉,用点击事件自定义的边框css代码就可以
问题:放大镜效果大的图片不显示,放大镜效果也不显示
解决:引入css和jQuery要分先后,先引入css再引入jQuery