jQuery仿AnG無雙科技滑動手風琴特效源碼



128 509 170



特效描述:滑動手風琴 手風琴特效 滑動特效 滑動源碼,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>

3. 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" 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="#" class="jjzs" style="top:190px; left:92px;">AG競價助手</a>
                    <a href="#" class="tgrb" style="top:190px; left:262px;">推廣日報</a>
                    <a href="#" 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="#" 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>
<script type="text/javascript">
$(document).ready(function () {
	$(".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' });
		}
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滑動手風琴
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子