jquery hover 心型图片墙鼠标悬浮图片变大插件


jquery hover 心型图片墙鼠标悬浮图片变大插件
jquery hover 心型图片墙鼠标悬浮图片变大插件以及心型图片墙、鼠标悬浮、图片变大等js/jquery网页特效代码下载。

1. 引入JS

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

2. HTML代码

<div class="heartPic">
	<ul>
		<li></li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_01.jpg" />
                <p class="pTxt">可爱的女娃娃</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_02.jpg" />
                <p class="pTxt">呆萌的小熊</p>
            </div>
        </li>
		<li></li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_03.jpg" />
                <p class="pTxt">卡哇伊的小熊</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_04.jpg" />
                <p class="pTxt">女巫骑着扫帚</p>
            </div>
        </li>
		<li></li>
	</ul>
	<ul>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_05.jpg" />
                <p class="pTxt">女娃娃</p>
            </div>
        </li>
		<li>
        	<div class="in">
        		<img width="100" height="100" src="img/index_06.jpg" />
                <p class="pTxt">星星可爱</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_07.jpg" />
                <p class="pTxt">呆萌女</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_08.jpg" />
                <p class="pTxt">狗狗</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_09.jpg" />
                <p class="pTxt">绿树</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_10.jpg" />
                <p class="pTxt">粉爱粉爱的</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_11.jpg" />
                <p class="pTxt">蜡笔小新</p>
            </div>
        </li>
	</ul>
	<ul>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_12.jpg" />
                <p class="pTxt">震不碎的心</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_13.jpg" />
                <p class="pTxt">很有意境</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_14.jpg" />
                <p class="pTxt">樱木花道最爱啊</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_15.jpg" />
                <p class="pTxt">俩骷髅</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_16.jpg" />
                <p class="pTxt">萌妹子</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_17.jpg" />
                <p class="pTxt">可爱的小狗</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_18.jpg" />
                <p class="pTxt">夫妇俩白头偕老</p>
            </div>
        </li>
	</ul>
	<ul>
		<li></li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_19.jpg" />
                <p class="pTxt">刷子</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_20.jpg" />
                <p class="pTxt">偶的头像</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_21.jpg" />
                <p class="pTxt">树叶子</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_22.jpg" />
                <p class="pTxt">星星</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_23.jpg" />
                <p class="pTxt">浅色哦</p>
            </div>
        </li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_24.jpg" />
                <p class="pTxt">太阳帅哥</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_25.jpg" />
                <p class="pTxt">大笑脸</p>
            </div>
        </li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_26.jpg" />
                <p class="pTxt">企鹅</p>
            </div>
        </li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li>
        	<div class="in">
            	<img width="100" height="100" src="img/index_27.jpg" />
                <p class="pTxt">小兔子</p>
            </div>
        </li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<script type="text/javascript">
$(function(){
	$(".heartPic li").hover(function(){
		$(this).addClass("on");
		$(this).find("img").animate({"width":"200px","height":"200px"});
		$(this).find("div").animate({"width":"200px","height":"200px"});
		$(this).find(".pTxt").animate({"width":"200px","height":"20px"});
		$(this).find("p").addClass("showDiv");
	},function(){
		$(this).animate({height:"100px"},100).removeClass("on");
		$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
		$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
		$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
	});
})
</script>

相关推荐

发表评论

相关文章