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


Posted in Javascript onJune 14, 2012
$(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.3water.com/js/2012/mypic360/

Javascript 相关文章推荐
JavaScript EasyPager 分页函数
May 25 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
绑定回车enter事件代码
May 18 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 #Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 #Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 #Javascript
javascript倒计时功能实现代码
Jun 07 #Javascript
基于jQuery的计算文本框字数的代码
Jun 06 #Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 #Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 #Javascript
You might like
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
2013/06/03 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python开头的coding设置方法
2019/08/08 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
《我的信念》教学反思
2014/02/15 职场文书
交通文明倡议书
2014/05/16 职场文书
运动会口号16字
2014/06/07 职场文书
单位政审意见范文
2015/06/04 职场文书
Python Django模型详解
2021/10/05 Python