炫酷jQuery鼠标滑过图片3d折叠效果

当前位置:主页 > jQuery库 > 图片效果 > 炫酷jQuery鼠标滑过图片3d折叠效果
炫酷jQuery鼠标滑过图片3d折叠效果
分享:

    插件介绍

    jquery.hoverfold是一款效果十分酷炫的jQuery鼠标滑过图片3d折叠效果。当鼠标滑过图片或鼠标悬停时,图片像折纸一样3d折叠或3d弯曲。hoverfold 3d折叠共有5种不同的效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-02
    阅读:

简要教程

hoverfold效果是当我们用鼠标滑过图片时,图片能产生折叠或弯曲的3d效果。当鼠标滑过图片时,我们使用jQuery来向适当的节点中插入产生图片效果的html结构,然后用css3来制作各种图片折叠或弯曲效果。

插件中精美的插图来自于花瓣

HTML

<div id="grid" class="main"> 
	<div class="view">
		<div class="view-back">
			<span data-icon="A">566</span>
			<span data-icon="B">124</span>
			<a href="#">→</a>
		</div>
		<img src="images/1.jpg" />
	</div>
	<div class="view">
	<!-- ... -->
	</div>
	<!-- ... -->	
</div>
    

更详细的教程请参看《鼠标滑过图片3D折叠效果