手风琴式焦点图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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/ag-customer-tradition_ad3bf6f.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top: 30px; right: 0px;">
<img src="data: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="data:images/ag-customer-taobao_a9d7af6.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top: 30px; right: 0px;">
<img src="data: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="data: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="data: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="data: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="data: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="data: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="data: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="data:images/ag-customer-search_83f9a60.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top: 30px; right: 20px;">
<img src="data: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="data:images/ag-customer-web_d2729dd.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top: 60px; right: 60px;">
<img src="data: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
手风琴式焦点图jQuery特效的更多相关文章
- 正益无线首页jQuery焦点图
分享一款正益无线首页jQuery焦点图,带索引按钮,自动轮播切换特效焦点图代码. 在线预览 源码下载 实现的代码. html代码: <div id="slideBox" ...
- 一款基于jQuery轮播切换焦点图,可播放多张图片
今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- 基于jQuery标题有打字效果的焦点图
给大家分享一款基于jQuery标题有打字效果的焦点图.之前为大家分享了好多jquery的焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- jQuery 焦点图,图像文件js档
jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...
- 9种网页Flash焦点图和jQuery焦点图幻灯片
jQuery图标放大轮播焦点图 Flash图片焦点图滑动切换 Flash右侧焦点图上下滑动切换 左右按钮滑动切换的网页幻灯片 双图同时滑动切换的焦点图 含有上下按钮的双图同时滑动切换的焦点图 常见的j ...
- 基于jQuery自适应宽度跟高度可自定义焦点图
基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section cl ...
随机推荐
- 使用openssl进行证书格式转换
各类证书由于存储的内容不同(如是否包含公钥/私钥是否加密存储/单一证书或多证书等).采用编 码不同(DER/BASE64).标准不同(如PEM/PKCS),所以尽管X.509标准规定了证书内容规范,但 ...
- 文本挖掘之文本聚类（MapReduce）
刘 勇 Email:lyssym@sina.com 简介 针对大数量的文本数据,采用单线程处理时,一方面消耗较长处理时间,另一方面对大量数据的I/O操作也会消耗较长处理时间,同时对内存空间的消耗也是 ...
- PAT 1085 Perfect Sequence
PAT 1085 Perfect Sequence 题目: Given a sequence of positive integers and another positive integer p. ...
- EditPlus正则表达式中英文详解(附常用事例操作)
http://www.cnblogs.com/JustinYoung/articles/editplus_regular_expression.html EditPlus正则表达式中英文详解 \t T ...
- SDUT 2608 Alice and Bob （巧妙的二进制）
Alice and Bob Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 Alice and Bob like playing ...
- GO语言学习 ---nil
nil是什么 相信写过Golang的程序员对下面一段代码是非常非常熟悉的了: if err != nil { // do something.... } 当出现不等于nil的时候,说明出现某些 ...
- Android中如何实现文件下载
最近做一个项目需要从服务器下载图片到本地sdcard,上网查找了一些例子,下面这个比较合适,原文内容如下: 我们在开发中经常需要从服务器下载文件,下载的内容可能有交换的信息,缓存的图片,程 ...
- Linux内存初始化(一)
一.前言 一直以来,我都非常着迷于两种电影拍摄手法:一种是慢镜头,将每一个细节全方位的展现给观众.另外一种就是快镜头,多半是反应一个时代的变迁,从非常长的时间段中,截取几个典型的snapshot,合成 ...
- 编码规范：Eclipse Code Templates设置
现在的项目一般都是一个团队共同开发,而每个人都有自己的编码习惯,为了统一格式,项目组在项目开发之前都会制定一系列的规范.设置Code Templates的目的主要是为了统一各种注释的格式以及代码的模板 ...
- 温故而知新： 关于 js Form 方式提交的一些新认知
这里介绍的是通过js进行异步form提交,而不是表单Form Submit提交. 提交方式主要有以下两种: 参数为字符串方式的提交,如:a=b&c=d formData方式提交, 如:new ...