javascript 3d 逐侦产品展示(核心精简)

3d 逐侦图片 素材

javascript 部分代码


代码如下:

<span style="white-space:pre"> </span>var step = 0;
var first = 0;
var lth = document.querySelectorAll('#tobj img').length;

window.addEventListener('touchstart',function(e){
e.preventDefault();
first = e.touches[0].pageX;
})
window.addEventListener('touchmove',function(e){
e.preventDefault();
var x = e.pageX || e.touches[0].pageX;
document.getElementById('outs').innerHTML = step;
if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}
})
window.addEventListener('touchend',function(e){
e.preventDefault();
step = step;
})

核心精简


代码如下:

if(Math.abs(x - first)>10){
document.querySelectorAll('#tobj img')[step].style.display = 'none'
if(x<first){
step++;
if(step>=lth-1){
step =0
}
}else{
step--
if(step<=0){
step = lth-1;
}
}
first = x;
document.querySelectorAll('#tobj img')[step].style.display = 'block'
}

赞 (0)

相关推荐

  • 纯JS实现旋转图片3D展示效果

    CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

  • JS实现六边形3D拖拽翻转效果的方法

    JS实现六边形3D拖拽翻转效果的方法

    效果图 实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • js实现3D图片展示效果

    js实现3D图片展示效果

    点击左上角的按钮前后切换 效果图: 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0; padding:0; list-style:none;} ul{ width:300px; height:300px; margin:100px auto; positi

  • JavaScript实现的图片3D展示空间(3DRoom)

    JavaScript实现的图片3D展示空间(3DRoom)

    程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间.很久以前就看过一个3DRoom效果,是用复杂的计算实现的.在上一篇图片变换研究过css3的transform之后,就想到一个更简单的方法来实现.兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 3DRoom程序说明 [实现原理] 3D效果的关键,是深度的实现.把3D容器看成一个由多个不同深度的层组成的空间,这些层的尺寸默认跟容器一样.层里面

  • JS实现3D图片旋转展示效果代码

    JS实现3D图片旋转展示效果代码

    本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

  • javascript 3d 逐侦产品展示(核心精简)

    3d 逐侦图片 素材 javascript 部分代码 复制代码 代码如下: <span style="white-space:pre"> </span>var step = 0; var first = 0; var lth = document.querySelectorAll('#tobj img').length; window.addEventListener('touchstart',function(e){ e.preventDefault(); f

  • ASP.NET MVC使用Boostrap实现产品展示、查询、排序、分页

    ASP.NET MVC使用Boostrap实现产品展示、查询、排序、分页

    在产品展示中,通常涉及产品的展示方式.查询.排序.分页,本篇就在ASP.NET MVC下,使用Boostrap来实现. 源码放在了GitHub: https://github.com/darrenji/ProductsSearchSortPage 先上效果图: 最上面是搜索和排序,每次点击搜索条件.排序,或者删除搜索条件都会触发异步加载. 中间部分为产品展示,提供了列表和格子这2种显示方式. 最下方为分页. 能实现的功能包括: 点击某一个搜索条件,该搜索条件被选中,选中项以标签的形式显示到"搜索

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

  • 可左右平滑滚动的产品展示效果

    可左右平滑滚动的产品展示效果

    图片 =0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false} AutoPlay_1()} function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_

  • javascript实现QQ空间相册展示源码

    javascript实现QQ空间相册展示源码

    知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等. 源码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词一,关键词二"> <meta name="De

  • Android实现3D层叠式卡片图片展示

    Android实现3D层叠式卡片图片展示

    本文实例为大家分享了Android实现3D层叠式卡片图片展示的具体代码,供大家参考,具体内容如下 先看效果 好了效果看了,感兴趣的往下看哦! 整体实现思路 1.重写RelativeLayout 实现 锁定宽高比例的 RelativeLayout 2.自定义一个支持滑动的面板 继承 ViewGroup 3.卡片View绘制 4.页面中使用布局 首先为了更好的展示图片我们重写一下 RelativeLayout 编写一个锁定宽高比例的 RelativeLayout AutoScaleRelativeL

  • Javascript基础知识（一）核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • javascript 历史记录 经常用于产品最近历史浏览第1/2页

    javascript 历史记录 经常用于产品最近历史浏览第1/2页

    本文将用js+cookie来实现这一功能,因为最近都在研究jquery,所以也就顺便用上了,如果你不想用jquery,那么你更需要了解实现的过程就可以了,代码自己去写. 需要用到一个jquery的cookie插件,用来操作cookie,连接http://www.jb51.net/article/18276.htm需要稍微了解json,资料使用json然为了简单,这里假设浏览记录只记录3个. 基本流程如下: 1.如果cookie中记录的历史产品数目为0或1或2,那么直接在cookie中插入. 2.

  • 基于javascript的JSON格式页面展示美化方法

    {"name": "monkey","age": "24","height": 164.0} 如果想让以上json字符串在页面上展示的比较易读,即变成下面的style: { "name": "monkey", "age": "24", "height": 164.0cm } 本文介绍的方法基于javascri

  • JavaScript实现QQ聊天消息展示和评论提交功能

    QQ聊天消息显示,提交评论等实现原理,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } .bos { margin: 100px auto; width: 350px; posi

随机推荐