复制代码 代码如下:
$(function(){
var box_W = $(".PIC360").width();
var box_H = $(".PIC360").height();
var box_X = $(".PIC360").offset().left;
var box_Y = $(".PIC360").offset().top;
//求出中心点的横坐标值
var center_X = Math.ceil(box_X+(box_W/2));
//求出中心点的纵坐标值
var center_Y = Math.ceil(box_X+(box_H/2));
var moveSetp = (box_W/2)/10//设定为10次移动,完成左边的图片显示。这里求出每次移动多少像素,算移动一次?;
$(".PIC360").mousemove(function(event){
var evX = event.pageX;
var evY = event.pageY;
//判断是向左还是向左
if(center_X - evX>=0){
changePic(evX,evY,"left")
}else{
changePic(evX,evY)
}
function changePic(mX,mY,f){
if(f){
//求出鼠标移动了多少次,每次对应一个LI的索引。
var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));
$(".PIC360 li").eq(index).show().siblings().hide();
}else{
var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));
var li_lengt = $(".PIC360 li").length;
$(".PIC360 li").eq(li_lengt-index).show().siblings().hide();
}
}
})
})
一、功能分析:
1.鼠标在图片区域向左滑动,图片“向左转动”。
2.鼠标在图片区域向右滑动,图片“向右转动”。
二、功能分析:
2.1如何判断鼠标在图片上面的滑动方向,即如何知道鼠标是向左还是向右?
以图片的中心为参照,在中心点左边,就是向左,在中心点右边,就是向右。解决方法,是把鼠标当前的X坐标值,与中心点的X坐标值,相减如果是负数就是向左的,如果是正数,就是向右的。
2.2鼠标滑动多少距离,图片切换一张(转动的实质,是不同面的图片,在切换显示)?
分析:2.21整个图片一共有18张,向左切换10张,向右就是切换8张。这样所有的图片,都能显示出来,即可以有360度的效果。
2.22鼠标在图片左边和右边移动的最大距离是图片宽度的一半,如果我设定10次移动让图片全部切换一次,那么就用这个最大距离除以10,就得到每次移动多少距离,算一次,而这一次就要切换一张图片。
DEMO下载 http://demo.jb51.net/js/2012/mypic360/
$(function(){
var box_W = $(".PIC360").width();
var box_H = $(".PIC360").height();
var box_X = $(".PIC360").offset().left;
var box_Y = $(".PIC360").offset().top;
//求出中心点的横坐标值
var center_X = Math.ceil(box_X+(box_W/2));
//求出中心点的纵坐标值
var center_Y = Math.ceil(box_X+(box_H/2));
var moveSetp = (box_W/2)/10//设定为10次移动,完成左边的图片显示。这里求出每次移动多少像素,算移动一次?;
$(".PIC360").mousemove(function(event){
var evX = event.pageX;
var evY = event.pageY;
//判断是向左还是向左
if(center_X - evX>=0){
changePic(evX,evY,"left")
}else{
changePic(evX,evY)
}
function changePic(mX,mY,f){
if(f){
//求出鼠标移动了多少次,每次对应一个LI的索引。
var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));
$(".PIC360 li").eq(index).show().siblings().hide();
}else{
var index = Math.ceil(Math.abs((mX - center_X)/moveSetp));
var li_lengt = $(".PIC360 li").length;
$(".PIC360 li").eq(li_lengt-index).show().siblings().hide();
}
}
})
})
一、功能分析:
1.鼠标在图片区域向左滑动,图片“向左转动”。
2.鼠标在图片区域向右滑动,图片“向右转动”。
二、功能分析:
2.1如何判断鼠标在图片上面的滑动方向,即如何知道鼠标是向左还是向右?
以图片的中心为参照,在中心点左边,就是向左,在中心点右边,就是向右。解决方法,是把鼠标当前的X坐标值,与中心点的X坐标值,相减如果是负数就是向左的,如果是正数,就是向右的。
2.2鼠标滑动多少距离,图片切换一张(转动的实质,是不同面的图片,在切换显示)?
分析:2.21整个图片一共有18张,向左切换10张,向右就是切换8张。这样所有的图片,都能显示出来,即可以有360度的效果。
2.22鼠标在图片左边和右边移动的最大距离是图片宽度的一半,如果我设定10次移动让图片全部切换一次,那么就用这个最大距离除以10,就得到每次移动多少距离,算一次,而这一次就要切换一张图片。
DEMO下载 http://demo.jb51.net/js/2012/mypic360/
标签:
360,图片展示
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于jQuery的360图片展示实现代码”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍