Heim > Web-Frontend > js-Tutorial > 基于jQuery的360图片展示实现代码_jquery

基于jQuery的360图片展示实现代码_jquery

WBOY
Freigeben: 2016-05-16 17:52:49
Original
1173 Leute haben es durchsucht
复制代码 代码如下:

$(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/
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage