原生Js封装的产品图片360度展示
挺简单的一段程序，但是效果不错：
1.把需要展示的36张图片先预加载到浏览器缓存里
2.给展示图片的div添加方法
3.通过鼠标左右移动的像素转换图片
在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js产品图片360度展示</title>
<style type="text/css">
*{margin: 0;padding: 0} h1{background-color: #666;color: #fff;text-align: center;margin:10px;}
#content{margin:10px;border: 5px solid #666;text-align: center;} </style>
</head> <body>
<h1>鼠标左键点击图片-并左右移动</h1>
<div id="content">
<img id="car" src="https://images0.cnblogs.com/blog/150659/201307/30094341-d352147c67e844c18c302810804efea0.gif" />
</div> <script type="text/javascript">
var _CalF = {
$ : function(object){//选择器
if(object === undefined ) return;
var getArr = function(name,tagName,attr){
var tagName = tagName || '*',
eles = document.getElementsByTagName(tagName),
clas = (typeof document.body.style.maxHeight === "undefined") ? "className" : "class";//ie6
attr = attr || clas,
Arr = [];
for(var i=0;i<eles.length;i++){
if(eles[i].getAttribute(attr)==name){
Arr.push(eles[i]);
}
}
return Arr;
}; if(object.indexOf('#') === 0){ //#id
return document.getElementById(object.substring(1));
}else if(object.indexOf('.') === 0){ //.class
return getArr(object.substring(1));
}else if(object.match(/=/g)){ //attr=name
return getArr(object.substring(object.search(/=/g)+1),null,object.substring(0,object.search(/=/g)));
}else if(object.match(/./g)){ //tagName.className
return getArr(object.split('.')[1],object.split('.')[0]);
}
},
addHandler:function(node, type, handler){
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on'+ type, handler);
}
}; function show360(){
this.init.apply(this, arguments);
} show360.prototype = {
init:function(id,src){
var divId = "#"+id,
div = _CalF.$(divId);
this.div = div;
this.src = src;
this.xDown; //鼠标按下x的值
this.isDown = false;
this.i = 1;
this.moved;
this.time;
this.loadImg();
this.addEvent();
},
setImgSrc : function(i){
var img = this.div.getElementsByTagName("img")[0];
img.setAttribute('src',this.src+i+'.png');
},
loadImg : function(){ //加载图片
var that = this,
num = 1,
imgs =[];
for(var i=1; i<37; i++){
imgs[i] = new Image;
imgs[i].src = that.src + i + '.png';
imgs[i].onload = function(){
num++;
if(num==37) that.setImgSrc(1);
}
}
},
addEvent : function(){
var that = this,
div = that.div; _CalF.addHandler(div,"mousedown",function(event){
var event = window.event || event;
if(event.button == 0 ||event.button==1){ //鼠标左键chrome=0 ie=1
(!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
that.xDown = event.clientX;
that.isDown = true;
}else if(event.button == 2){
alert("请用鼠标左键!");
}
}); _CalF.addHandler(div,"mousemove",function(event){
var event = window.event || event,
x = event.clientX;
(!window.ActiveXObject) ? event.preventDefault() : event.returnValue = false; //取消默认行为
if(that.isDown && (typeof that.time !== undefined)){
that.time = setTimeout(function(){
that.moved = x - that.xDown;
if(that.moved>15){
that.i++;
if(that.i>36) that.i=1;
}else if(that.moved<-15){
that.i--;
if(that.i<1) that.i=36;
}else{
return;
}
that.setImgSrc(that.i)
that.xDown = x;
},50);
}
}); _CalF.addHandler(div,"mouseup",function(){
that.isDown = false;
});
}
}
var car = new show360("content","http://sandbox.runjs.cn/uploads/rs/369/vuy2vmwn/car_");
</script>
</body>
</html>
原生Js封装的产品图片360度展示的更多相关文章
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- threesixty.min.js 和jquery.threesixty.js使用总结----实现360度展示
最近公司做一个项目需要360度展示汽车的外观,就用到了threesixty.min.js,自己总结一下使用方法: treesixty.min.js 源码: /*! threesixty-slider ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线 横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...
- 通过CSS3实现：鼠标悬停图片360度旋转效果
效果很好玩,代码很简单: 效果: 鼠标放置在图片上:360度顺时针旋转 鼠标离开图片:图片260度逆时针旋转 只要将下面代码拷贝过去,并将图片改成你想要的就可以看到效果 <!doctype ht ...
随机推荐
- SVM明确的解释1__
线性可分问题
笔者:liangdas 出处:简单点儿,通俗点儿,机器学习 http://blog.csdn.net/liangdas/article/details/44251469 引言: 1995年Cor ...
- unix shell（壳）的简单实现
用户程序通过调用操作系统提供的系统调用(system call)API 来获得操作系统提供的各种服务.但使用 API 需要手动编写程序.对于不编程序.且需要与操作系统进行交互的用户,又如何使用操作系统 ...
- TEdit,TMemo背景透明（SetWindowLong(WS_EX_TRANSPARENT)增加透明风格）
The component below works perfectly, except for the following problem: 1) Saves the component below ...
- 国产操作系统剽窃Linux内核可耻！
10月28日,新浪科技发表文章,题为"国产操作系统迎来利好:部委机构正大量採购",读后有感. 如今,国家进入法制时代.政府採购"国产操作系统",似乎成为一种&q ...
- windows 10 常用快捷键
alt + space:最大.最小.关闭: 多屏互动:win+p 仅此电脑屏幕:复制:拓展:仅第二屏幕: 0. 不同于之前版本的变化 切换输入法:shift + alt: win + space: w ...
- C++中placement new操作符
placement new是重载operator new的一个标准.全局的版本,它不能被自定义的版本代替(不像普通的operator new和operator delete能够被替换成用户自定义的版本 ...
- cookie登录功能实现
站点经常使用的记住我,或是一周内自己主动登录,这些功能一般都是是用cookie进行登录的!以下对此功能进行分析: package cookielogin; import java.io.IOExcep ...
- WPF图形/文字特别效果之一:交叉效果探讨(续)
原文:WPF图形/文字特别效果之一:交叉效果探讨(续) 在"WPF图形/文字特别效果之一:交叉效果探讨"(http://blog.csdn.net/johnsuna/archive ...
- OpenCV实现马赛克和毛玻璃滤镜效果
一.马赛克效果 马赛克的实现原理是把图像上某个像素点一定范围邻域内的所有点用邻域内随机选取的一个像素点的颜色代替,这样可以模糊细节,但是可以保留大体的轮廓. 以下OpenCV程序实现马赛克效果,通过鼠 ...
- WPF中利用RadialGradient模拟放大镜效果
原文:WPF中利用RadialGradient模拟放大镜效果 --------------------------------------------------------------------- ...