jQuery实现鼠标滑过九宫格动画效果源码.zip资源-CSDN文库

共18个文件

png：13个

jpg：2个

js：1个

版权申诉

jquery

43 浏览量 2022-11-07 23:59:26 上传评论收藏 960KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现鼠标滑过九宫格动画效果源码.zip （18个子文件）

132686954192928230

css

zxmk.css 12KB

images

forma-icon.png 1KB

admin.jpg 1KB

xx-logo.jpg 6KB

quest-icon2.png 5KB

means-icon.png 1KB

course-icon2.png 4KB

bg.png 918KB

quest-icon.png 5KB

jxst.png 1KB

course-icon.png 5KB

chart.png 2KB

report-icon.png 1KB

yl.png 1KB

zlDown.png 1KB

mryl.png 2KB

index.html 6KB

core.js 2KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery鼠标经过九宫格动画效果</title> <link href="css/zxmk.css" rel="stylesheet" type="text/css"/> <script src="js/core.js" type="text/javascript"></script> <script src="js/jquery-1.5.1.min.js" type="text/javascript"></script> </head> <body> <div class="index-con" style="z-index: 0"> <ul> <li class="in-kct in-course"> <a href="http://www.jb51.net/" title="视频"> <div class="in-block"> <i class="bigger"></i> <span class="ch show" style="display: block;">视频</span> <i class="in-none"></i> <span class="in-text" style="display: none;"> <p><em>零基础</em>  通关保障 </p> </span> </div> </a> </li> <li class="in-kct in-quest"> <a href="http://www.jb51.net/" title="题库"> <div class="in-block"> <i class=""></i> <span class="ch" style="display: inline;">题库</span> <i class="in-none"></i> <span class="in-text" style="display: none; width: 280px; left: 30px"> <p><em>4.34万</em>道试题、<em>4640</em>份试卷</p> <p>让你的水平提<em>升更容易</em>！</p> </span> </div> </a> </li> <li class="in-jbk in-plan"> <a href="http://www.jb51.net/" title="每日一练"> <div class="in-block"> <i style="display: block;"></i> <span style="display: inline;">每日一练</span> <i class="in-none toLeft1" style="display: none;"></i> <span class="in-text" style="display: none;"> <p>完备的规划是指引</p> <p>我们取得成功的前提</p> </span> </div> </a> </li> <li class="in-jbk in-report"> <a href="http://www.jb51.net/" title="真题演练"> <div class="in-block"> <i style="display: block;"></i> <span style="display: inline;">真题演练</span> <i class="in-none toLeft2" style="display: none;"></i> <span class="in-text" style="display: none;"> <p>预测成绩</p> <p>知识点强弱项目分析</p> </span> </div> </a> </li> <li class="in-zxl in-forma"> <a href="http://www.jb51.net/" title="精选试题"> <div class="in-block"> <i style="display: block;"></i> <span style="display: inline;">精选试题</span> <i class="in-none toLeft0 toLeft4" style="display: none;"></i> <span class="in-text" style="display: none;"> <p>更简洁、更简单、更强大、更专业</p> </span> </div> </a> </li> <li class="in-zxl in-means"> <a href="http://www.jb51.net/" title="资料"> <div class="in-block"> <i></i> <span>资料</span> <i class="in-none"></i> <span class="in-text"> <p>辅导资料、常用软件</p> <p>应有尽有</p> </span> </div> </a> </li> <li class="in-jbk in-client"> <a href="http://www.jb51.net/" target="_blank" title="微社区"> <div class="in-block"> <i></i> <span>微社区</span> <i class="in-none"></i> <span class="in-text"> <p>在线交流</p> <p>让你学习考试更简单</p> </span> </div> </a> </li> </ul> </div> <script> seajs.use('jquery',function($) { $(function () { // $(".index-con .in-kct").hover(function() { $(this).find('i:first').addClass('smaller').removeClass('bigger') $(this).find('span:first').fadeOut('') $(this).find('.in-text').show('fast').addClass('show') $(this).find('.ch').removeClass('') }, function() { $(this).find('i:first').removeClass('smaller').addClass('bigger') $(this).find('span:first').fadeIn('') $(this).find('.in-text').hide('').removeClass('fast') $(this).find('.ch').addClass('show') }) $(".index-con .in-jbk").hover(function() { $(this).find('i:first').addClass('hide') $(this).find('span:first').hide('') $(this).find('.in-text').show('').addClass('show') var num = $(this).index('.in-jbk') + 1; $(this).find('.in-none').show('').addClass('toLeft' + num).removeClass('toRight' + num) $(this).find('.ch1').removeClass('show') }, function() { $(this).find('i:first').addClass('hide') $(this).find('span:first').fadeIn('') $(this).find('.in-text').hide('').removeClass('show') var num = $(this).index('.in-jbk') + 1; $(this).find('.in-none').show().addClass('toRight' + num).removeClass('toLeft' + num) $(this).find('.ch1').addClass('show') }) $(".index-con .in-zxl").hover(function() { $(this).find('i:first').addClass('hide') $(this).find('span:first').hide('') $(this).find('.in-text').show().addClass('show') var nums = $(this).index('.in-zxl') + 1; $(this).find('.in-none').show().addClass('toLeft4').removeClass('toRight4') $(this).find('.ch2').removeClass('show') }, function() { $(this).find('i:first').addClass('hide') $(this).find('span:first').fadeIn('fast') $(this).find('.in-text').hide().removeClass('show') $(this).find('.in-none').show().addClass('toRight4').removeClass('toLeft4') $(this).find('.ch2').addClass('show') }); }); }) </script> </body> </html>

评论收藏

内容反馈

版权申诉