基于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 5 新增 Array 方法实现介绍
Feb 06 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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/09/23 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP分享图片的生成方法
2018/04/25 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python 爬取疫情数据的源码
2020/02/09 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
求网格中的黑点分布
2013/11/06 面试题
幼儿园运动会加油词
2014/02/14 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
2015年国培研修感言
2015/08/01 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
个人向公司借款协议书
2016/03/19 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers