手风琴式焦点图jQuery特效

手风琴式焦点图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‘);
                }
            );
            }
        });

via：http://www.w2bc.com/Article/33306

时间： 2024-10-13 06:13:20

手风琴式焦点图jQuery特效的相关文章

正益无线首页jQuery焦点图

分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码. 在线预览   源码下载 实现的代码. html代码: <div id="slideBox" class="slideBox"> <div class="hd"> <ul><li></li><li></li><li></li></ul> </d

基于jQuery带标题的图片3D切换焦点图

今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <div id="wowslider-container"> <div class="ws_images"> <ul> <li><a href="#"> &

一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片. 在线预览   源码下载 实现的代码. html代码: <div class="main_visual"> <div class="flicking_con"> <a class="on" href=&quo

基于jquery左侧带选项卡切换的焦点图

今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="film_focus"> <div class="film_focus_desc"> <h3> 标题1</h3> <ul class="film_focus_nav"> <li clas

jquery可播放视频的焦点图

jquery可播放视频的焦点图,设计简洁优雅,支持左右翻页,支持暂停焦点图,焦点图左上角的标题可替换.视频支持全屏播放和静音.JS代码 源于:http://www.huiyi8.com/js/jiaodiantu/

基于jQuery仿Flash横向切换焦点图

给各网友分享一款基于jQuery仿Flash横向切换焦点图.利用Flash可以制作很多漂亮的图片相册应用,今天我们要用jQuery来实现这样的效果.它是一款仿Flash的横向图片切换焦点图插件,可以自动切换图片,也可以点击导航按钮来切换至指定的图片.该jQuery焦点图使用非常简单,而且切换效果也相当流畅.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="slide-holder"> <div id="slide-runn

分享jQuery背景动画全屏焦点图

jquery重力实现效果 能在支持 FireFox.Chrome.Safari.傲游.搜狗.360浏览器. 源码下载/   在线演示  jQuery纸张切割效果 源码下载/   在线演示 纯CSS3实现3D小球动画 源码下载/   在线演示 分享jQuery背景动画全屏焦点图

9种网页Flash焦点图和jQuery焦点图幻灯片

jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的jQuery网页焦点图幻灯片 css3 jQuery轮播焦点图幻灯片 html5网页图片左右滑动焦点图

基于jQuery标题有打字效果的焦点图

给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <!-- 代码 开始 --> <div id="header"> <div class="wrap"> <div id="slide-holder&q