jQuery单张放大图片展示效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery单张放大图片展示效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
<title>{title}</title>
<base target="_blank" />
</head>
<body>
<div class="container">
	<div class="clearfix">
<!-- 代码 开始 -->
		<div class="applist">
			<ul class="clearfix" id="app_iphone_list">
				<li><a href="#"><img src="images/01.jpg" name="经典GTD SlickTasks" ver="1.6" cate="效率" star="391" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/02.jpg" name="网格镜头 Grid Lens" ver="1.3.2" cate="摄影与录像" star="8415" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/03.jpg" name="Jing颠覆音乐搜索" ver="1.0.3" cate="音乐" star="37" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/04.jpg" name="网易云阅读-杂志新闻书籍" ver="1.5.1" cate="新闻" star="161393" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/05.jpg" name="行李管理 Busy Bags" ver="0.2" cate="游戏" star="1270" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/06.jpg" name="感染者 Infestor" ver="1.0" cate="游戏" star="0" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/07.jpg" name="僵尸与足球 Undead Soccer" ver="1.1" cate="游戏" star="105" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/08.jpg" name="最终幻想：勇气 FINAL FANTASY ALL THE BRAVEST" ver="1.0.0" cate="游戏" star="5737" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/09.jpg" name="保卫奥林匹斯 Clash of the Olympians" ver="1.0" cate="游戏" star="8273" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/10.jpg" name="神庙狂奔2 Temple Run 2" ver="1.0" cate="游戏" star="134377" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/11.jpg" name="三重镇" ver="1.21" cate="游戏" star="27180" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/12.jpg" name="飞信-免费短信" ver="3.1.0" cate="社交" star="858369" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/13.jpg" name="怪兽之战-Monster Wars" ver="1.5" cate="游戏" star="12128" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/14.jpg" name="科迪的天空 Cordy Sky" ver="1.1.11735" cate="动作游戏" star="42368" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/15.jpg" name="兜兜友" ver="4.3.1" cate="社交" star="113542" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/16.jpg" name="死亡恶魔 Dead Grind" ver="1.2" cate="游戏" star="284" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/17.jpg" name="习惯清单 Habit List" ver="2.0.2" cate="效率" star="921" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/18.jpg" name="Any To Do - 印象笔记 任务时间管理" ver="1.28" cate="效率" star="2087" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/19.jpg" name="蝉游记-旅行时光机" ver="1.2" cate="旅行" star="1028" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/20.jpg" name="寻侠OL" ver="1.0.1" cate="游戏" star="1039" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/21.jpg" name="佳明i导航" ver="2.2" cate="导航" star="1257" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/22.jpg" name="死亡高尔夫 Death Golf?" ver="1.0" cate="游戏" star="569" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/23.jpg" name="战斗吧，奥尼尔 ShaqDown" ver="1.4" cate="游戏" star="31890" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/24.jpg" name="空手道 Karateka" ver="1.01" cate="游戏" star="4777" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/25.jpg" name="小小武士 Little Warrior" ver="1.4" cate="游戏" star="601" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/26.jpg" name="吵醒猫猫 Wake the Cat" ver="1.1" cate="游戏" star="53589" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/27.jpg" name="莉莉向前冲 Little Amazon" ver="1.0" cate="游戏" star="12543" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/28.jpg" name="僵尸终结者 I Am Vegend: Zombiegeddon" ver="1.0" cate="游戏" star="1134" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/29.jpg" name="看球啦" ver="2.4" cate="体育" star="12901" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/30.jpg" name="泽诺尼亚传奇5" ver="1.0.0" cate="游戏" star="9327" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/31.jpg" name="网易新闻" ver="3.0.2" cate="新闻" star="1100246" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/32.jpg" name="Instant110" ver="2.1.0" cate="摄影与录像" star="1579" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/33.jpg" name="亚特战争2 AREL WARS 2" ver="1.0.1" cate="游戏" star="17641" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/34.jpg" name="空中娇娃 Bombshells: Hell′s Belles" ver="2.0.1" cate="游戏" star="16258" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/35.jpg" name="成百上千 Hundreds" ver="1.1" cate="游戏" star="14884" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/36.jpg" name="传奇战机 Legendary Fighters" ver="1.0" cate="游戏" star="2613" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/37.jpg" name="坏习惯：康复 Bad Habit: Rehab" ver="1.01" cate="游戏" star="1505" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/38.jpg" name="玩具守卫者 Toy Defender R" ver="1.00.00" cate="游戏" star="410" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/39.jpg" name="枪手跑酷 Run'n'Gun" ver="1.0.0" cate="游戏" star="658" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/40.jpg" name="VSCO CAM" ver="1.2.8" cate="摄影与录像" star="188" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/41.jpg" name="Today Weather" ver="1.1.1" cate="天气" star="0" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/42.jpg" name="丢糖果 Om Nom: Candy Flick" ver="1.0" cate="娱乐" star="59054" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/43.jpg" name="LINE camera" ver="3.1.1" cate="摄影与录像" star="146505" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/44.jpg" name="手写便签 GOLD" ver="6.0`" cate="商业" star="6005" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/45.jpg" name="精益六西格玛评论" ver="1.1" cate="商业" star="179" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/46.jpg" name="穷人通胀富人通缩" ver="V1.6" cate="商业" star="1046" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/47.jpg" name="PDF阅读器" ver="1.0" cate="商业" star="0" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/48.jpg" name="掌上公文包(专业版) - 强大的文件查看和管理工具,让手机变U盘" ver="1.3" cate="商业" star="30" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/49.jpg" name="澳門天氣報告 Macau Weather Report" ver="1.3" cate="天气" star="554" height="75" width="75"></a></li>
				<li><a href="#"><img src="images/50.jpg" name="Climate Whiz? - The Weather Tool ?.  Great for travel, retirement and outdoor activity planning." ver="1.0.1" cate="天气" star="4" height="75" width="75"></a></li>
				<li class="app_more"> <a href="#"> <span>更多应用</span> <span class="app_more_arr"></span> </a> </li>
			</ul>
			<div class="appdetail">
				<div class="appdetail_m"></div>
				<div class="appdetail_w">
					<div class="appdetail_n">
						<h3></h3>
						<p class="appdetail_v"></p>
						<p class="appdetail_c"></p>
						<p class="appdetail_s"></p>
					</div>
					<a href="#" class="appdetail_h"><img src="" height="140" width="140"></a> </div>
			</div>
		</div>
<!-- 代码 结束 -->
	</div>
</div>

<style type="text/css">
.footer p{font:normal 12px/2em '微软雅黑';text-align:center;}
</style>
</body>
</html>

JS代码(lrtk.js):

// JavaScript Document$(function(){
	var App = function(){
	var t = this;
	var applist = $('.applist');
	t.app = $('.appdetail');
	t.icon = t.app.find('img');
	t.name = t.app.find('h3');
	t.ver = t.app.find('.appdetail_v');
	t.cate = t.app.find('.appdetail_c');
	t.star = t.app.find('.appdetail_s');
	t.href = t.app.find('.appdetail_h');
	t.w = applist.width();
	t.h = applist.height();
	applist.find("li").live("mouseenter",function(){
	if(!$(this).hasClass('app_more')){
	t.appendInfo(this);
	t.resetPosition(this);
	t.app.show();
}
}
);
	t.app.bind("mouseleave",function(){
	$(this).hide()}
);
	$('.app_t a').bind("click",function(){
	var id = '#'+$(this).attr("id")+'_list';
	$('.app_t a').removeClass("current");
	$(this).addClass('current');
	applist.children('ul').hide();
	$(id).show();
}
);
	t.init();
}
;
	App.prototype ={
	init:function(){
	var t = this;
	$.ajax({
	url:'ajax.aspx?mode=app_recommend',dataType:"json",success:function(json){
	var iphone = t.renderHtml(json.app_iphone);
	var ipad = t.renderHtml(json.app_ipad);
	$('#app_iphone_list').prepend(iphone);
	$('#app_ipad_list').prepend(ipad);
	var s = "����¼"+json.iTunesSoftTotalNum+"����ϷӦ��,��������"+json.iTunesSoftTotalNumToday+"��";
	$('#search').val(s);
	search.w = s;
}
}
);
	var applist = $('.applist');
	t.w = applist.width();
	t.h = applist.height();
}
,renderHtml:function(json){
	var html = '';
	var len = 50;
	if(json.length<50) len = json.length;
	for (var i = 0;
	i < len;
	i++){
	html += '<li><a href="http://app.tongbu.com/'+json[i][20]+'.html"><img src="'+(json[i][10]==''?json[i][5]:"http://image.tongbu.com/userappicon/"+json[i][10].replace("_75.jpg",".jpg"))+'" width="75" height="75" name="'+(json[i][19]==''?json[i][1]:json[i][19])+'" ver="'+json[i][6]+'" cate="'+json[i][14]+'" star="'+json[i][7]+'"></a></li>'}
;
	return html;
}
,appendInfo:function(li){
	var t = this;
	var el = $(li).find('img');
	var name = el.attr("name");
	var ver = el.attr("ver");
	var cate = el.attr("cate");
	var star = "���أ�"+el.attr("star");
	var img = el.attr("src");
	var href = $(li).find('a').attr("href");
	t.icon.attr("src",img);
	t.name.html(name);
	t.ver.html(ver);
	t.cate.html(cate);
	t.star.html(star);
	t.href.attr('href',href);
}
,resetPosition:function(li){
	var t = this;
	var pos = $(li).position();
	pos.top = (t.h - pos.top) <= 150 ? 150:0;
	(t.w-pos.left)<300?(pos.left = t.w-300):0;
	t.app.css({
	"left":pos.left,"top":pos.top}
);
}
}
;
	var app = new App();
}
);

CSS代码(lrtk.css):

/* 转载请保留版权信息：懒人图库 www.lanrentuku.com */
*{padding:0;margin:0;font-size:12px;font-family:'Microsoft YaHei';}
ul,li{list-style:none;}
img{border:0;}
.container{display:block;width:975px;margin:0 auto;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
* html .clearfix{height:1%;}
.applist{clear:both;position:relative;z-index:1;left:0;top:0;}
.applist li{float:left;width:75px;height:75px;overflow:hidden}
.applist a{display:block}
.appdetail{position:absolute;z-index:1;left:0;top:0;width:300px;height:150px;overflow:hidden;display:none}
.appdetail_m{position:absolute;z-index:2;left:0;top:0;width:300px;height:150px;background:#000;opacity:.9;filter:alpha(opacity=90);}
.appdetail_w{position:absolute;z-index:9;left:0;top:0;padding:5px;width:290px;height:140px;overflow:hidden}
.appdetail_w img{}
.appdetail_n{float:right;color:#fff;font-size:14px;}
.appdetail_n h3{font-size:20px;display:block;width:130px;height:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.appdetail_s{text-align:right;font-size:16px;color:#FFC000;padding-top:20px;padding-right:15px}
.applist .app_more{width:150px;height:75px;line-height:75px;background:#169AFF;overflow:hidden}
.app_more a{display:block;color:#D8EEFF}
.app_more span{font-size:20px;display:block;float:left;margin-left:20px;_margin-left:12px}
.app_more_arr{width:15px;height:32px;margin-top:24px;background:url(../images/icon.png) no-repeat;}
.app_more_current a{color:#fff}
.app_more_current .app_more_arr{background-position:-89px -190px}

附件:下载该文件资源,减少时间成本(增值服务)