一、鼠标经过图标变换
<script src="images/jquery.1.9.1.js"></script>
<style type="text/css">
.xxgk_list li {
display: inline-block;
float: left;
position: relative;
margin-top: 7px;
}
.xxgk_list li a {
display: inline-block;
width: 173px;
height: 58px;
text-align: center;
color: #fff;
font-size: 16px;
}
.xxgk_list li p {
position: absolute;
z-index: 1;
background-image: url(images/2017hd_zdlyxxgk_list_bg.png);
background-repeat: no-repeat;
width: 173px;
height: 58px;
left: 0;
}
.xxgk_list_1 a p {
background-position: 0px 0px;
}
.xxgk_list_2 a p {
background-position: -181px 0px;
}
.xxgk_list_3 a p {
background-position: 0px -68px;
}
.xxgk_list_4 a p {
background-position: -181px -68px;
}
.xxgk_list_5 a p {
background-position: 0px -136px;
}
.xxgk_list_6 a p {
background-position: -181px -136px;
}
</style>
</head>
<body>
<div class="xxgk_list">
<div class="xxgk_list">
<ul id="xxgkList">
<li class="xxgk_list_1">
<a href="" target="_blank">
<p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px; overflow: hidden;"></p>
</a>
</li>
<li class="xxgk_list_2 mrLeft">
<a href="" target="_blank">
<p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; overflow: hidden; border-radius: 0px;"></p>
</a>
</li>
<li class="xxgk_list_3 ">
<a href="" target="_blank">
<p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p>
</a>
</li>
<li class="xxgk_list_4 mrLeft">
<a href="./xxgk/wgkzl/" target="_blank">
<p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p>
</a>
</li>
<li class="xxgk_list_5 ">
<a href="./grfw/" target="_blank">
<p style="width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px; overflow: hidden;"></p>
</a>
</li>
<li class="xxgk_list_6 mrLeft">
<a href="http://wsbs.gz.gov.cn/gz/hotline/gotoIndex.action" target="_blank">
<p style="overflow: hidden; width: 173px; display: block; height: 58px; top: 0px; left: 0px; opacity: 1; border-radius: 0px;"></p>
</a>
</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
//首页图标效果
$(‘#xxgkList li a‘).hover(function(){
$(this).find(‘p‘).stop(true).animate({width:‘170px‘,height:‘55px‘,top:‘5‘,left:‘5‘,opacity:0.5}, 200).animate({width:‘170px‘,height:‘55px‘,top:‘0‘,left:‘0‘,‘border-radius‘:‘0px‘,opacity:1}, 300);
},function(){
$(this).find(‘p‘).stop(true).animate({width:‘173px‘,height:‘58px‘,top:‘0‘,left:‘0‘,‘border-radius‘:‘0‘,opacity:1}, 500);
})
</script>
</html>
二、鼠标经过图标旋转
<!--效果二：鼠标经过时图标旋转-->
<div class="section00CenterLeft_list">
<ul>
<li class="section00CenterLeft_list1"><a href="" target="_blank"><em class="icon"></em><span>权责清单</span></a>
</li>
<li class="section00CenterLeft_list2" style="margin-left:21px;"><a href="" target="_blank">
<em class="icon"></em><span style="right:10px">信用信息双公示</span></a>
</li>
<li class="section00CenterLeft_list3" style="margin-left:21px;"><a href="" target="_blank">
<em class="icon"></em><span>电子地图</span></a>
</li>
<li class="section00CenterLeft_list4" style="margin-left:21px;"><a href="" target="_blank">
<em class="icon"></em><span style="right:15px">人才招聘信息</span></a>
</li>
</ul>
</div>
css样式：
/*例子二：鼠标经过图标旋转*/
.section00CenterLeft_list {
display: inline-block;
margin-top: 21px;
}
.section00CenterLeft_list li {
display: inline-block;
float: left;
width: 182px;
height: 67px;
position: relative;
}
.section00CenterLeft_list li a {
display: inline-block;
width: 100%;
height: 100%;
line-height: 67px;
}
.section00CenterLeft_list li a:hover {
}
.section00CenterLeft_list li a span {
position: absolute;
right: 30px;
color: #135ca9;
font-size: 16px;
font-weight: bold;
}
.section00CenterLeft_list li a .icon {
display: inline-block;
float: left;
width: 80px;
height: 67px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.section00CenterLeft_list li a:hover .icon {
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.section00CenterLeft_list1 a .icon {
background: url(images/section00CenterLeft_list1.png) 35px center no-repeat;
}
.section00CenterLeft_list2 a .icon {
background: url(images/section00CenterLeft_list2.png) 15px center no-repeat;
}
.section00CenterLeft_list3 a .icon {
background: url(images/section00CenterLeft_list3.png) 35px center no-repeat;
}
.section00CenterLeft_list4 a .icon {
background: url(images/section00CenterLeft_list4.png) 20px center no-repeat;
}