网友小鸟分享3行jquery代码实现图片360度旋转特效

作者：管理员

发布时间：2013/11/1 11:01:02

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=360

首先非常感谢网友小鸟的无私分享，此作品是他改良前段时间JquerySchool网站上的作品《网友木木分享原创jquery实现图片360度旋转特效》，从27行代码改良到3行代码，太厉害了，真是技术无极限啊，主要用到了背景位置控制属性background-position，做跟作品《乐峰网带分页显示的明星专栏jquery特效》的原理一样的，大家可以去看一下。。。

样式代码：

#tu {
	width:400px;
	height:255px;
	border:6px solid #ccc;
	margin:30px auto;
	overflow:hidden;
	background-image:url(http://ww3.sinaimg.cn/large/adde8400gw1ea5bokgw8rg20b43jk4b8.gif);
}

jquery代码：

$('#tu').mousemove(function(e){
	$(this).css({'background-position-y':-Math.floor((e.pageX-$(this).offset().left)/400*18)*255 +'px'});
});

效果如下：

关键字：网友小鸟 360度旋转 旋转特效 图片旋转