Welcome, Old Sport!

一款动画效果的分享按钮插件 CSS & jQuery

by ilikecss ON 2011/05/04 7220

我想很多同学的 Blog 上都按有分享按钮,如果只是硬生生的固定在一个位置恐怖不能展示出你独到的风格,今天这里给大家展示一款带动画效果的分享按钮,喜欢的同学一如既往的可以下载。这里做了2个效果,一个是点击,一个是鼠标划过。这款效果你也可以用作其他用途,图片展示等等。

Step1. 创建HTML Demo1

<div class="socials">
    <ul class="reset">
        <li><a href="#"><img src="images/socials/delicious.png" alt="" /></a></li>
        <li><a href="#"><img src="images/socials/digg.png" alt="" /></a></li>
        <li><a href="#"><img src="images/socials/google.png" alt="" /></a></li>
        <li><a href="#"><img src="images/socials/stumbleupon.png" alt="" /></a></li>
        <li><a href="#"><img src="images/socials/technorati.png" alt="" /></a></li>
        <li><a href="#"><img src="images/socials/twitter.png" alt="" /></a></li>
    </ul>			
</div>	

创建HTML Demo2

<div class="nature">
    <ul class="reset">
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_2"><img src="images/onepiece/pic_2.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_3"><img src="images/onepiece/pic_3.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_5"><img src="images/onepiece/pic_4.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_4"><img src="images/onepiece/pic_5.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_6"><img src="images/onepiece/pic_6.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_7"><img src="images/onepiece/pic_7.png" alt="" /></a></li>
        <li><a target="_blank" href="http://baike.baidu.com/view/2889.htm#2_8"><img src="images/onepiece/pic_8.png" alt="" /></a></li>
    </ul>			
</div>	

Step2. 创建CSS

.socials {
	display: block;
	width: 32px;
	height: 32px;
	background: url(../images/socials/share.png) no-repeat;
	cursor: pointer;
	position: relative;
}
.nature {
	display: block;
	width: 107px;
	height: 107px;
	background: url(../images/onepiece/pic_1.png) no-repeat;
	cursor: pointer;
	position: relative;
}
.socials, .nature {
	margin: 0 auto;
}
.socials {
	margin-bottom: 150px;
}
ul.reset,
ul.reset li {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}
ul.reset li {
	position: absolute;
}
ul.reset li a {
	outline: none;
}

Step3. 插入jQuery和脚本包

$(function(){

$('.socials').mobilyblocks();

$('.nature').mobilyblocks({
trigger: 'hover',
direction: 'counter',
duration: 500,
zIndex: 50,
widthMultiplier: 1.25
});

});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Plugin scripts -->
<script src="js/mobilyblocks.js" type="text/javascript"></script>
目前还没有评论



TOP