基于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 相关文章推荐
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
Apr 12 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
js实现跳一跳小游戏
Jul 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
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
Python使用爬虫猜密码
2016/02/19 Python
Python手机号码归属地查询代码
2016/05/04 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
python numpy元素的区间查找方法
2018/11/14 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Django缓存系统实现过程解析
2019/08/02 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
python中类与对象之间的关系详解
2020/12/16 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
自荐信的五个重要部分
2013/10/29 职场文书
气象学专业个人求职信
2014/03/15 职场文书
毕业生工作求职信
2014/06/30 职场文书
课外访万家心得体会
2014/09/03 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
小马王观后感
2015/06/11 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书