手风琴式焦点图jQuery特效是一款鼠标点击人物图像滑动切换案例说明信息代码。效果图如下：
实现的代码。
html代码：
<div class="ag-content-customer-wrap"> <div class="ag-content-customer"> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>传统企业主</span> <img src="images/ag-customer-tradition_ad3bf6f.png" data-hover="77" data-normal="85" /> </div> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>淘宝掌柜</span> <img src="images/ag-customer-taobao_a9d7af6.png" style="left: 65px;" data-hover="57" data-normal="65" /> </div> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>中小企业主</span> <img src="images/ag-customer-small_35b8744.png" style="left: 96px;" data-hover="88" data-normal="96" /> </div> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>大品牌客户</span> <img src="images/ag-customer-brand_9ca1bac.png" style="left: 83px;" data-hover="75" data-normal="83" /> </div> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>搜索引擎广告主</span> <img src="images/ag-customer-search_83f9a60.png" style="left: 56px;" data-hover="48" data-normal="56" /> </div> <div class="ag-content-customer-ele"> <div class="ag-content-customer-ele-shadow"> </div> <span>网站主</span> <img src="images/ag-customer-web_d2729dd.png" style="left: 83px;" data-hover="75" data-normal="83" /> </div> <div class="ag-content-customer-ele-detail"> <ul> <li class="acced-li-1"></li> <li class="acced-li-2"></li> <li class="acced-li-3"></li> <li class="acced-li-4"></li> <li class="acced-li-5"></li> <li class="acced-li-6"></li> </ul> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-tradition_ad3bf6f.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 30px; right: 0px;"> <img src="images/ag-customer-tradition-txt_d2077c8.png" /></span> <a href="/products/weixin" class="agwyx" style="top: 190px; left: 262px;">AG微营销</a> </div> </div> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-taobao_a9d7af6.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 30px; right: 0px;"> <img src="images/ag-customer-taobao-txt_2d1d5db.png" /></span> <a href="/products/dsp" class="agwm" style="top: 190px; left: 262px;">AG网盟</a> </div> </div> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-small_35b8744.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 27px; left: 0px; text-align: right;"> <img src="images/ag-customer-small-txt-1_c935044.png" /></span> <span class="point" style="top: 88px; right: 158px;">></span> <a href="/products/dsp" class="agwm" style="top: 40px; right: 0px;">AG网盟</a> <span style="top: 235px; left: 50px; text-align: right;"> <img src="images/ag-customer-small-txt-2_b08da8b.png" /></span> <span class="point" style="top: 262px; right: 158px;">></span> <a href="/products/reporting-analytics" class="aggg" style="top: 210px; right: 0px;">AG广告效果分析平台</a> </div> </div> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-brand_9ca1bac.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 46px; left: 10px; text-align: right;"> <img src="images/ag-customer-brand-txt-1_ad914ee.png" /></span> <span class="point" style="top: 88px; right: 158px;">></span> <a href="/products/enterprise" class="agxt" style="top: 40px; right: 0px;">AG广告系统旗舰版</a> <span style="top: 220px; left: -18px; text-align: right;"> <img src="images/ag-customer-brand-txt-2_b3dd522.png" /></span> <span class="point" style="top: 262px; right: 158px;">></span> <a href="/products/dsp" class="agwm" style="top: 210px; right: 0px;">AG网盟</a> </div> </div> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-search_83f9a60.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 30px; right: 20px;"> <img src="images/ag-customer-search-txt_592f82b.png" /></span> <a href="/products/smb" class="jjzs" style="top: 190px; left: 92px;">AG竞价助手</a> <a href="http://sc.chinaz.com" class="tgrb" style="top: 190px; left: 262px;">推广日报</a> <a href="/products/ag360editor" class="ag360" style="top: 190px; left: 432px;">AG360营销助手</a> </div> </div> <div class="ag-content-customer-ele-detail-display"> <div class="ag-content-customer-ele-detail-display-left"> <img src="images/ag-customer-web_d2729dd.png" /> </div> <div class="ag-content-customer-ele-detail-display-right"> <span style="top: 60px; right: 60px;"> <img src="images/ag-customer-web-txt_c205aff.png" /></span> <a href="/products/reporting-analytics" class="aggg" style="top: 190px; left: 262px;">AG广告效果分析平台</a> </div> </div> <div class="ag-content-customer-ele-detail-return"> <span><</span>重选角色</div> </div> </div> </div>
js代码：
var ctrlBar = false; var float_timer = null; var float_max_X; var float_max_Y; var float_ctrl_X = true; var float_ctrl_Y = true; $(function () { float_max_X = $(window).width(); float_max_Y = $(window).height(); }); function showVideoImage() { if ($(\'.vjs-poster\').css(\'display\') == \'none\') { $(\'.vjs-poster\').addClass(\'index\').show(); } else { setTimeout(\'showVideoImage()\', 50); } } function startMove() { var obj = $(\'#floatAdv\'); var limit_X = float_max_X - obj.width(); var limit_Y = float_max_Y - obj.height(); float_timer = setInterval(function () { var _x = parseInt(obj.css(\'left\')); var _y = parseInt(obj.css(\'top\')); if (_x >= limit_X) { float_ctrl_X = false; } if (_x <= 0) { float_ctrl_X = true; } if (_y >= limit_Y) { float_ctrl_Y = false; } if (_y <= 0) { float_ctrl_Y = true; } if (float_ctrl_X) { _x += 1; } else { _x -= 1; } if (float_ctrl_Y) { _y += 1; } else { _y -= 1; } obj.css({ \'left\': _x + \'px\', \'top\': _y + \'px\' }); }, 10); } function endMove() { clearInterval(float_timer); } $(document).ready(function () { $(\'.ag-header ul li:eq(0)\').addClass(\'current-page\'); showVideoImage(); $(\'#floatAdv\').mouseenter(function () { endMove(); }); $(\'#floatAdv\').mouseleave(function () { startMove(); }); $(\'#floatAdv span\').click(function (e) { endMove(); $(\'#floatAdv\').attr(\'href\', \'javascript:;\').removeAttr(\'target\').hide(); }); $(".ag-content-customer-ele").bind("mouseenter mouseleave", function (e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; if (e.type == \'mouseenter\') { // 0:up - 1:right - 2:down - 3:left if (direction == 0) { $(this).find(\'div\').css({ \'top\': \'-470px\', \'left\': \'0px\' }); $(this).find(\'div\').animate({ \'top\': 0 }, { queue: false, duration: 300 }); } else if (direction == 2) { $(this).find(\'div\').css({ \'top\': \'470px\', \'left\': \'0px\' }); $(this).find(\'div\').animate({ \'top\': 0 }, { queue: false, duration: 300 }); } else if (direction == 1) { $(this).find(\'div\').css({ \'top\': \'0px\', \'left\': \'167px\' }); $(this).find(\'div\').animate({ \'left\': 0 }, { queue: false, duration: 300 }); } else if (direction == 3) { $(this).find(\'div\').css({ \'top\': \'0px\', \'left\': \'-167px\' }); $(this).find(\'div\').animate({ \'left\': 0 }, { queue: false, duration: 300 }); } $(this).find(\'span\').css(\'color\', \'#fff\'); $(this).find(\'img\').animate({ \'left\': $(this).find(\'img\').attr(\'data-hover\') }, { queue: false, duration: 200 }); } else { if (direction == 0) { $(this).find(\'div\').animate({ \'top\': -470 }, { queue: false, duration: 300 }); } else if (direction == 2) { $(this).find(\'div\').animate({ \'top\': 470 }, { queue: false, duration: 300 }); } else if (direction == 1) { $(this).find(\'div\').animate({ \'left\': 167 }, { queue: false, duration: 300 }); } else if (direction == 3) { $(this).find(\'div\').animate({ \'left\': -167 }, { queue: false, duration: 300 }); } $(this).find(\'span\').css(\'color\', \'#262626\'); $(this).find(\'img\').animate({ \'left\': $(this).find(\'img\').attr(\'data-normal\') }, { queue: false, duration: 200 }); } }); $(".ag-content-customer-ele").bind(\'click\', function (e) { var navIndex = $(e.target).parent().index(); $(\'.ag-content-customer-ele-detail ul li\').removeClass(\'current\'); $(\'.ag-content-customer-ele-detail ul li\').eq(navIndex).addClass(\'current\'); $(\'.ag-content-customer-wrap\').css(\'background-color\', \'#469acb\'); $(\'.ag-content-customer-ele\').animate({ \'width\': 0 }, 500); $(\'.ag-content-customer-ele-detail\').animate({ \'width\': 1002 }, { duration: 500, complete: function () { $(\'.ag-content-customer-ele-detail ul li\').eq(navIndex).click(); } }); }); $(\'.ag-content-customer-ele-detail-return\').bind(\'click\', function (e) { $(\'.ag-content-customer-wrap\').css(\'background-color\', \'#f1f1f1\'); $(\'.ag-content-customer-ele-detail\').css(\'overflow\', \'hidden\'); $(\'.ag-content-customer-ele\').animate({ \'width\': 167 }, 500); $(\'.ag-content-customer-ele-detail\').animate({ \'width\': 0 }, 500); $(\'.ag-content-customer-ele-detail-display\').hide(); }); $(\'.ag-content-customer-ele-detail ul li\').bind(\'click\', function () { $(\'.ag-content-customer-ele-detail ul li\').removeClass(\'current\'); $(this).addClass(\'current\'); $(\'.ag-content-customer-ele-detail\').css(\'overflow\', \'visible\'); var disIndex = $(this).index(); $(\'.ag-content-customer-ele-detail-display\').hide(); $(\'.ag-content-customer-ele-detail-display\').eq(disIndex).show(); // IE if ("ActiveXObject" in window) { $(\'.ag-content-customer-ele-detail-display-left\').css({ \'left\': \'0px\', \'opacity\': \'1\' }); $(\'.ag-content-customer-ele-detail-display-right\').css({ \'right\': \'-120px\', \'opacity\': \'1\' }); $(\'.ag-content-customer-ele-detail-display-left\').eq(disIndex).animate({ \'left\': 120 }, { duration: 1000, easing: \'easeOutQuint\' }); $(\'.ag-content-customer-ele-detail-display-right\').eq(disIndex).animate({ \'right\': 0 }, { duration: 1000, easing: \'easeOutQuint\' }); } }); $(\'body\').on(\'click\', \'.vjs-big-play-button\', function () { $(this).hide(); ctrlBar = true; $(\'.vjs-control-bar\').removeClass(\'vjs-fade-out\').addClass(\'vjs-fade-in\'); }); $(\'.ag-content-app-wytgg-right\').click(function () { if (!$(\'#ag-app-video\').hasClass(\'vjs-playing\')) { $(\'.vjs-big-play-button\').css(\'display\', \'none\'); ctrlBar = true; $(\'.vjs-control-bar\').removeClass(\'vjs-fade-out\').addClass(\'vjs-fade-in\'); } }); // IE7 if (window.navigator.userAgent.indexOf(\'MSIE 7.0\') >= 0) { $(\'#ag-app-video\').css({ \'width\': \'570px\', \'height\': \'380px\', \'position\': \'relative\' }); $(\'#ag-app-video\').find(\'div.vjs-poster\').css({ \'width\': \'570px\', \'height\': \'380px\', \'position\': \'absolute\', \'top\': \'0px\' }); $(\'.vjs-big-play-button\').css({ \'width\': \'100px\', \'height\': \'100px\', \'position\': \'absolute\', \'top\': \'140px\', \'left\': \'235px\' }); $(\'.ag-content-app-wytgg-right\').css(\'overflow\', \'hidden\'); } else { $(\'.ag-content-app-wytgg-right\').hover( function () { if (ctrlBar) { $(\'.vjs-control-bar\').removeClass(\'vjs-fade-out\').addClass(\'vjs-fade-in\'); } }, function () { $(\'.vjs-control-bar\').removeClass(\'vjs-fade-in\').addClass(\'vjs-fade-out\'); } ); } });