基于jQuery的360图片展示实现代码
2012-06-14 00:00
821 查看
$(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/
相关文章推荐
- 基于jQuery的360图片展示实现代码
- 基于jQuery的图片大小自动适应实现代码
- 分享25个网站常用基于jquery焦点图图片展示代码下载
- 基于jquery仿360网站图片选项卡切换代码
- 分享25个网站常用基于jquery焦点图图片展示代码下载
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- 基于jquery的防止大图片撑破页面的实现代码(立即缩放)
- 基于jquery实现的仿优酷图片轮播特效代码
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
- 基于jquery实现的仿优酷图片轮播特效代码
- 基于jquery实现图片广告轮换效果代码
- 基于jquery的手风琴图片展示效果实现方法
- 基于jquery的手风琴图片展示效果实现方法
- 基于jquery实现的上传图片及图片预览效果代码
- 基于jquery的防止大图片撑破页面的实现代码(立即缩放)
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- 基于jQuery的图片大小自动适应实现代码
- 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
- 基于jquery实现图片广告轮换效果代码