百叶窗基本的jQuery代码如下:
html——
<div class="dh sfq">
<ul>
<li style="width:435px;">
<div class="aa"><img src="images/datouwang5.jpg" alt=""></div>
<div class="teacher-Txt">
<div class="teacher-title pt30 clearfix">
<div class="teacher-tl l">王诚</div>
<div class="teacher-tr l">199管理类联考</div>
</div>
<div class="teacher-baseline"></div>
<div class="teacher-baseline1"></div>
<div class="teacher-contain">
<span>主讲科目:</span>逻辑、写作<br><span>辅导资历:</span>启航考研专业硕士师资,多年来致力于专业硕士逻辑与写作领域的研究与教学工作<br>
<span>学术背景:</span>国内著名985教授<br><span>辅导佳绩:</span>精于把握命题方向和本质,独创性地将管理知识、实战案例与课程相结合,在解析应试技巧的同时,注重考生思维的训练,多次命中联考真题。
</div>
</div>
</li>
<li>
<div class="aa"><img src="images/datouwang1.jpg" alt="" width=""></div>
<div class="teacher-Txt">
<div class="teacher-title pt30 clearfix">
<div class="teacher-tl l">朱杰</div>
<div class="teacher-tr l">199管理类联考</div>
</div>
<div class="teacher-baseline"></div>
<div class="teacher-baseline1"></div>
<div class="teacher-contain">
<span>主讲科目:</span>初等数学<br><span>辅导资历:</span>启航考研专业硕士师资,管理类联考数学师资,从事管理类联考数学培训9年<br>
<span>学术背景:</span>曾多次参与研究生入学考试阅卷工作,并担任组长<br><span>辅导佳绩:</span>培养出多名状元,关心关爱学生,深受学生欢迎
</div>
</div>
</li>
<li>
<div class="aa"><img src="images/datouwang2.jpg" alt=""></div>
<div class="teacher-Txt">
<div class="teacher-title pt30 clearfix">
<div class="teacher-tl l">李雪娇</div>
<div class="teacher-tr l">199管理类联考</div>
</div>
<div class="teacher-baseline"></div>
<div class="teacher-baseline1"></div>
<div class="teacher-contain">
<span>主讲科目:</span>逻辑,写作<br><span>辅导资历:</span>启航考研逻辑与写作讲师<br>
<span>学术背景:</span>中国科学院大学硕士,天津大学管理学学士,文学学士<br><span>辅导佳绩:</span>深受学生信赖,历年辅导的学员成绩均有显著提高。
</div>
</div>
</li>
<li>
<div class="aa"><img src="images/datouwang3.jpg" alt=""></div>
<div class="teacher-Txt">
<div class="teacher-title pt30 clearfix">
<div class="teacher-tl l">邵宁</div>
<div class="teacher-tr l">英语</div>
</div>
<div class="teacher-baseline"></div>
<div class="teacher-baseline1"></div>
<div class="teacher-contain">
<span>主讲科目:</span>阅读<br><span>辅导资历:</span>新一代考研英语辅导的领军人物,在考研英语以及四六级辅导领域颇有建树<br>
<span>学术背景:</span>著名学者<br><span>辅导佳绩:</span>曾连续五年命中考研英语大小作文题目,在业内广为传颂
</div>
</div>
</li>
<li>
<div class="aa"><img src="images/datouwang4.jpg" alt=""></div>
<div class="teacher-Txt">
<div class="teacher-title pt30 clearfix">
<div class="teacher-tl l">孙永丹</div>
<div class="teacher-tr l">英语</div>
</div>
<div class="teacher-baseline"></div>
<div class="teacher-baseline1"></div>
<div class="teacher-contain">
<span>主讲科目:</span>长难句、翻译<br><span>辅导资历:</span>启航考研英语团队新生派骨干教师<br>
<span>学术背景:</span>英语语言学硕士,英语专业八级<br><span>辅导佳绩:</span>对知识点、考点把握精准,注重课堂学习效率
</div>
</div>
</li>
</ul>
</div>
juery——
$('.sfq ul li').hover(function(){
// 获取索引
var _index = $(this).index();
$(this).stop('li').stop().animate({width:'435px'},'500')
.siblings().stop().animate({width:'151px'},'500');
//.removeClass('curr');
},function(){
//移出
})
出现的问题是扩展部分的css样式不用absolute而是用float,结果animate逐渐变化的特性显示不出来。
在编程的过程中不熟的部分是find的引用。还有swiper中左右按钮是可以在容器外边的。
最后就是遮罩层特效:其实主要是css3.需要及时补充进去。