首先非常感谢网友木木的无私分享，此作品是她分享到JquerySchool网站上的第一款原创jquery实现图片360度旋转特效，效果非常棒，除了jquery插件库文件之外，实现360度旋转的功能只有27行代码，跟现有的不是开源的图片360度旋转jquery插件相比，代码非常简洁，也不需要设置和添加自定义属性，多的不讲了，网友们自己去下载看吧。。。
jquery功能代码如下：
$(function(){
var pic_X=$('.list').offset().left;
var pic_Y=$('.list').offset().top;
var pic_W=$('.list').width()/2;
var pic_H=$('.list').height()/2;
var center_X=pic_X+pic_W;
var center_Y=pic_Y+pic_H;
var movestop=pic_W/10;
$('.list').mousemove(function(event){
var mouse_X=event.pageX;
var mouse_Y=event.pageY;
if(mouse_X-center_X<=0){
//鼠标在中心的左侧
moveImg(mouse_X,mouse_Y,'left')
}else{
moveImg(mouse_X,mouse_Y)
}
});
function moveImg(m_X,m_Y,dir){
var index=Math.ceil(Math.abs(m_X-center_X)/movestop);
if(dir){
$('.list li').eq(index).show().siblings().hide();
}else{
$('.list li').eq(18-index).show().siblings().hide();
}
}
})
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友木木 旋转特效 图片滚动 3D特效 图片3D旋转 360度旋转 3D效果