小引:以这个名字为标题也是应客户的要求...把它宣传下......提高点击率...
前天突然赶着把这个网站前台做完,美工把幻灯片切换和栏目鼠标滑过切换交给我来完成,我是参考以前各大网站,之后修改开源代码来实现这个效果...
代码中心一:
- <script language="JavaScript" type="text/javascript">
- function ChangeDiv(divId,divName,zDivCount)
- {
- for(i=0;i<=zDivCount;i++)
- {
- document.getElementByIdx_x_x_x(divName+i).style.display="none";
- }
- document.getElementByIdx_x_x_x(divName+divId).style.display="block";
- }
- </script>
放到<head></head>当中,
代码中心二:
- <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
- <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
- <span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>
- <div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
- <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容第一区<br></div> <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容第二区<br></div>
- <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容第三区</div>
- </div>
放到body当中......
最后的效果是鼠标滑过,内容达到切换
看下效果:
索菲娅教育致力于英语教学、欧美课堂课程开发、国际幼儿园、早期教育、中英文化交流等教育事业的教育咨询机构。由从事教育事业的留美人士、海外教育专家和高校的教授联合创办。
国际经济合作发展组织OECD公布的“国际学生教育评估量PISA”显示,欧美80%的孩子是自主学习并希望终生学习,而在中国,这样的孩子的比例只有2%。 悬殊的数字令人惊讶和深思。索菲娅教育的创建团队多年的海外教学生涯与实践,深感国内教学理念与方法和欧美国家的差距。于是他们把欧美教学教学理念和方法“打包”回国,与国内教育人士一起潜心研究与开发,建立一套既渗透纯正欧美课堂的教学理念,又使之适合中国孩子心智发展的课程系统,应用到索菲娅教育机构旗下英语培训中心、幼儿园以及早教中心等教学实体当中。让中国的孩子也能享受到快乐自由的课堂教学,自主地学习。只有自主兴趣的学习,才是真正的学习,只有重视兴趣引导的教学,才是真正有意义的教学。
索菲娅教育崇尚爱与自由,也希望在教育的过程中让孩子懂得爱,身心得到自由的发展。索菲娅教育的宗旨---for love, for children 为了爱,为孩子。来到索菲娅,就来到了一个充满爱与欢笑的学习乐园。
给这个索菲亚教育学校打个广告:sophieeducation.com/
下面是添加模块:
看下上面的效果图你会发现有6个子目录要切换,所有我们只要修改代码中心而就可以了:
现增加2个模块:
鼠标划过的区域代码:
- <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',4)" style="cursor:hand;">内容dsda</span>
- <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',4)" style="cursor:hand;">内容dasda</span>
- <span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',4)" style="cursor:hand;">内容ddadfe</span>
- <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',4)" style="cursor:hand;">内容dsdadadf</span>
- <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',4)" style="cursor:hand;">内容dasdaffSD</span>
鼠标划过显示的模块:
- <div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
- <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容dsda<br></div>
- <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dasda<br></div>
- <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容ddadfe</div>
- <div id="JKDiv_3" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dsdadadf<br></div>
- <div id="JKDiv_4" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dasdaffSD</div>
- </div>
添加成功.....
这个网站后台在做当中,到时候共享下...哈哈