基于jQuery实现多边形箭头焦点图滑动切换



63 249 84



特效描述:基于jQuery实现 多边形箭头 焦点图 滑动切换,基于jQuery实现多边形箭头焦点图滑动切换

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/mg.js"></script>

3. HTML代码

<div class="full_bg zoom">
	<div class="warrper m_auto"> 
		<!--main-->
		<div class="game_pic_tab zoom mt_10" id="container">
	<div id="example2-item-0" class="game_pic" onClick="window.open('http://51qianduan.com/jiaoben/?index-20464.html')">
		<img src="images/5326d5867874d.jpg" width="600" height="248" alt="决战喵星 Naughty Kitties" title="决战喵星 Naughty Kitties" style="cursor: pointer" />
		<div class="info-wrapper">
			<div class="info-background"></div>
			<div class="pic-info"><h3>决战喵星 Naughty Kitties</h3><p>游戏的主角是一群可爱又淘气的小猫咪,将小猫放在船舰上就能发动攻击,有损伤是要派出修复猫进行修复,当然淘气不是白说的,至于为什么,看下面的详细介绍吧。</p></div>
		</div>
	</div><div id="example2-item-1" class="game_pic" onClick="window.open('http://51qianduan.com/jiaoben/?index-21293.html')">
		<img src="images/532038aaa9602.jpg" width="600" height="248" alt="无敌弹珠 Smash Hit" title="无敌弹珠 Smash Hit" style="cursor: pointer" />
		<div class="info-wrapper">
			<div class="info-background"></div>
			<div class="pic-info"><h3>无敌弹珠 Smash Hit</h3><p>在超凡的维度开始一段奇幻之旅,随着音效和音乐的节奏移动,粉碎沿路的所有物体!这段旅程需要十分专注,游戏时间内不仅要尽可能走的最远,还需撞碎阻挡道路的美丽玻璃物体。</p></div>
		</div>
	</div><div id="example2-item-2" class="game_pic" onClick="window.open('http://51qianduan.com/jiaoben/?index-21049.html')">
		<img src="images/53144d2392623.jpg" width="600" height="248" alt="超越空间 Beyond Space" title="超越空间 Beyond Space" style="cursor: pointer" />
		<div class="info-wrapper">
			<div class="info-background"></div>
			<div class="pic-info"><h3>超越空间 Beyond Space</h3><p>一款最新的 3D 太空射击游戏,玩家将在一部上乘的太空歌剧佳作中体会各种黑暗阴谋。众多的行星系、星云和小行星带等着你来探险。细节逼真的 3D 游戏画面,引人入胜而又美丽神秘的手绘太空场景,壮观的游戏特效,经过渲染的光晕、光线、太阳耀斑和反射。</p></div>
		</div>
	</div><div id="example2-item-3" class="game_pic" onClick="window.open('http://51qianduan.com/jiaoben/?index-21112.html')">
		<img src="images/53144d0c5fec7.jpg" width="600" height="248" alt="神之光金币版 God of Light" title="神之光金币版 God of Light" style="cursor: pointer" />
		<div class="info-wrapper">
			<div class="info-background"></div>
			<div class="pic-info"><h3>神之光金币版 God of Light</h3><p>坐下来沉浸于 God of Light 的世界,这款游戏以独特的环境探索玩法、不可思议的画面以及由电子音乐标志性乐队 UNKLE 创作的专属原声,重新思考和定义了物理谜题游戏。</p></div>
		</div>
	</div><div id="example2-item-4" class="game_pic" onClick="window.open('http://51qianduan.com/jiaoben/?index-20751.html')">
		<img src="images/5306c84e70a72.jpg" width="600" height="248" alt="又一个案件解决了 Another Case Solved" title="又一个案件解决了 Another Case Solved" style="cursor: pointer" />
		<div class="info-wrapper">
			<div class="info-background"></div>
			<div class="pic-info"><h3>又一个案件解决了 Another Case Solved</h3><p>游戏以惊悚的为题材,总的来说还是回归到了麒麟狗最喜爱的卡通休闲风格。在游戏中玩家要扮演的是一名探长,你要使用一种比较特殊的方法来办案。
</p></div>
		</div>
	</div>	<div id="example2-click-prev" class="game_pic_icon game_pic_icon_l">Prev</div>
	<div id="example2-click-next" class="game_pic_icon game_pic_icon_r">Next</div>
	<div class="prev_l"></div><div class="next_r"></div>
</div>
<script type="text/javascript"> 
$(document).ready(
	function() {
		var example2 = new Mg({
			reference : "example2",
			click : {
				activated : [ 0 ],
				cycle : true,
				multiMode : 'centered',
				interactive : true,
				multiLess : 2,
				multiPlus : 2,
				auto : 3000,
				autoSlow : 5000
			}
		});
		example2.click.onEvent = function() {
			$("#" + this.reference + "-item-" + this.deactivated)
					.removeClass("active");
			$("#" + this.reference + "-item-" + this.activated)
					.addClass("active");
			$('[id^="' + this.reference + '-item-"]').css("display",
					"none");
			//
			var arr = this.multiActivated;
			for ( var i = 0; i < arr.length; i++) {
				var depth = Math.abs(example2.mapDistanceReverse(
						this.multiPlus, i, arr.length, 0)); // Parameters: center, num, max, min
				var path = $("#" + this.reference + "-item-" + arr[i]);
				path.css("position", "absolute").css("z-index", depth);
				path.css("display", "block")
						.css("position", "absolute").animate({
							left : ((i - 2) * 604 + 190) + "px"
						}, 500);
			}
		}
		example2.init();
	}
);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 图片滑动 图片切换 图片轮播 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到