利用jquery实现鼠标悬停放大显示图片代码



30 117 40



特效描述:利用jquery实现 鼠标悬停 放大显示图片,利用jquery实现鼠标悬停放大显示图片代码

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div class="applist">
	<ul class="clearfix" id="app_iphone_list">
		<li><a href="http://51qianduan.com/"><img src="images/01.jpg" name="经典GTD SlickTasks" ver="1.6" cate="效率" star="391" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/02.jpg" name="网格镜头 Grid Lens" ver="1.3.2" cate="摄影与录像" star="8415" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/03.jpg" name="Jing颠覆音乐搜索" ver="1.0.3" cate="音乐" star="37" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/04.jpg" name="网易云阅读-杂志新闻书籍" ver="1.5.1" cate="新闻" star="161393" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/05.jpg" name="行李管理 Busy Bags" ver="0.2" cate="游戏" star="1270" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/06.jpg" name="感染者 Infestor" ver="1.0" cate="游戏" star="0" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/07.jpg" name="僵尸与足球 Undead Soccer" ver="1.1" cate="游戏" star="105" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><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="http://51qianduan.com/"><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="http://51qianduan.com/"><img src="images/11.jpg" name="三重镇" ver="1.21" cate="游戏" star="27180" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/12.jpg" name="飞信-免费短信" ver="3.1.0" cate="社交" star="858369" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/13.jpg" name="怪兽之战-Monster Wars" ver="1.5" cate="游戏" star="12128" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/14.jpg" name="科迪的天空 Cordy Sky" ver="1.1.11735" cate="动作游戏" star="42368" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/15.jpg" name="兜兜友" ver="4.3.1" cate="社交" star="113542" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/16.jpg" name="死亡恶魔 Dead Grind" ver="1.2" cate="游戏" star="284" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/17.jpg" name="习惯清单 Habit List" ver="2.0.2" cate="效率" star="921" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/18.jpg" name="Any To Do - 印象笔记 任务时间管理" ver="1.28" cate="效率" star="2087" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/19.jpg" name="蝉游记-旅行时光机" ver="1.2" cate="旅行" star="1028" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/20.jpg" name="寻侠OL" ver="1.0.1" cate="游戏" star="1039" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/21.jpg" name="佳明i导航" ver="2.2" cate="导航" star="1257" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/22.jpg" name="死亡高尔夫 Death Golf?" ver="1.0" cate="游戏" star="569" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/23.jpg" name="战斗吧,奥尼尔 ShaqDown" ver="1.4" cate="游戏" star="31890" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/24.jpg" name="空手道 Karateka" ver="1.01" cate="游戏" star="4777" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/25.jpg" name="小小武士 Little Warrior" ver="1.4" cate="游戏" star="601" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/26.jpg" name="吵醒猫猫 Wake the Cat" ver="1.1" cate="游戏" star="53589" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/27.jpg" name="莉莉向前冲 Little Amazon" ver="1.0" cate="游戏" star="12543" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><img src="images/29.jpg" name="看球啦" ver="2.4" cate="体育" star="12901" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/30.jpg" name="泽诺尼亚传奇5" ver="1.0.0" cate="游戏" star="9327" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/31.jpg" name="网易新闻" ver="3.0.2" cate="新闻" star="1100246" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/32.jpg" name="Instant110" ver="2.1.0" cate="摄影与录像" star="1579" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><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="http://51qianduan.com/"><img src="images/35.jpg" name="成百上千 Hundreds" ver="1.1" cate="游戏" star="14884" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/36.jpg" name="传奇战机 Legendary Fighters" ver="1.0" cate="游戏" star="2613" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/37.jpg" name="坏习惯:康复 Bad Habit: Rehab" ver="1.01" cate="游戏" star="1505" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><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="http://51qianduan.com/"><img src="images/40.jpg" name="VSCO CAM" ver="1.2.8" cate="摄影与录像" star="188" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/41.jpg" name="Today Weather" ver="1.1.1" cate="天气" star="0" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><img src="images/43.jpg" name="LINE camera" ver="3.1.1" cate="摄影与录像" star="146505" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/44.jpg" name="手写便签 GOLD" ver="6.0`" cate="商业" star="6005" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/45.jpg" name="精益六西格玛评论" ver="1.1" cate="商业" star="179" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/46.jpg" name="穷人通胀富人通缩" ver="V1.6" cate="商业" star="1046" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/47.jpg" name="PDF阅读器" ver="1.0" cate="商业" star="0" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/48.jpg" name="掌上公文包(专业版) - 强大的文件查看和管理工具,让手机变U盘" ver="1.3" cate="商业" star="30" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><img src="images/49.jpg" name="澳門天氣報告 Macau Weather Report" ver="1.3" cate="天气" star="554" height="75" width="75"></a></li>
		<li><a href="http://51qianduan.com/"><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="http://51qianduan.com/"><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="http://51qianduan.com/" class="appdetail_h"><img src="" height="140" width="140"></a>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 浮动提示框 放大缩小 变大变小 放大 缩小 变大 变小 缩放 缩放切换 其他 鼠标悬停 图片广告 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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