css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果
CSS:
#show{position:relative;margin:20px auto;width:800px;}
.item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}
Html:
input id="l" type="button" value="left" />
JS
var len;
var showerObj;
var listObj;
var showerWidth=800;
var showerHeight=400;
var r;
var cR=0;
var ccR=0;
var timer=0;
window.οnlοad=function(){
showerObj=document.getElementById("show");
listObj=showerObj.getElementsByTagName("div");
len=listObj.length;
r=Math.PI/180*360/len;
for(var i=0;i
var item=listObj[i];
item.style.top=showerHeight/2+Math.sin(r*i)*showerWidth/2-20+"px";
item.style.left=showerWidth/2+Math.cos(r*i)*showerWidth/2-30+"px";
item.rotate=(r*i+2*Math.PI)%(2*Math.PI);
item.οnclick=function(){
cR=Math.PI/2-this.rotate;
timer || (timer=setInterval(rotate,10));
}
}
var rX=showerObj.offsetLeft+showerWidth/2;
var ry=showerObj.offsetTop+showerHeight/2;
var rotate=function(){
ccR=(ccR+2*Math.PI)%(2*Math.PI);
if(cR-ccR<0) cR=cR+2*Math.PI;
if(cR-ccR
ccR=ccR+(cR-ccR)/19;
}else{
ccR=ccR-(2*Math.PI+ccR-cR)/19;
}
if(Math.abs((cR+2*Math.PI)%(2*Math.PI)-(ccR+2*Math.PI)%(2*Math.PI))
ccR=cR;
clearInterval(timer);
timer=0;
}
for(var i=0;i
var item=listObj[i];
var w,h;
var sinR=Math.sin(r*i+ccR);
var cosR=Math.cos(r*i+ccR);
w=60+0.6*60*sinR;
h=(40+0.6*40*sinR);
item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR*showerWidth/2/3-w/2)+";";
}
}
document.getElementById("l").οnclick=function(){
cR=(cR+r+2*Math.PI)%(2*Math.PI);
timer || (timer=setInterval(rotate,10));
}
document.getElementById("r").οnclick=function(){
cR=(cR-r+2*Math.PI)%(2*Math.PI);
timer || (timer=setInterval(rotate,10));
}
rotate();
}
以上所述就是本文的全部内容了,希望大家能够喜欢。相关阅读:
MySQL删除数据库的两种方法
Linux中安装sosreport和supportconfig来收集系统信息
PHP面向对象程序设计之接口用法
CSS3 滤镜 webkit-filter详细介绍及使用方法
javascript实现详细时间提醒信息效果的方法
Win7开机自动跳出desktop.ini记事本怎么办?Desktop.ini删除方法
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
C#用递归算法解决经典背包问题
android 网络连接处理分析
在CentOS系统中安装SVN版本控制软件的教程
详解HTML中table表格的frame和rules属性
win10自带MSN天气可以设置到到区县地区天气吗?
Linux系统下tar命令的使用技巧总结
Win10 RS1预览版中Edge浏览器扩展官网曝光
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...相关推荐
- 纯html折叠文字代码,不用JS,教你只用纯HTML做出几个实用网页效果
不用JS,教你只用纯HTML做出几个实用网页效果 在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果. 1. 折叠手风琴 使用D ...
- style type=text/css中的type=text/css到底是什么意思
最佳答案 type="text/css"是指定MIME类型,其中: text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件 ...
- php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能,1.实现原理直接见代码,需要一 - phpStudy...
纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...
- 将网页以页面仅html,不用JS,教你只用纯HTML做出几个实用网页效果
在我们以往看到的页面效果中,很多效果是需要JS搭配使用的,而今天在本文中,我将介绍如何使用纯HTML打造属于自己的实用效果. 1.折叠手风琴 使用Details和Summary标签可以创建没有Java ...
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
基于 PDF.js 开发了 PDF 批注注释插件库,支持多种批注类型,支持写入批注到pdf中并保存,为目前纯前端 JavaScript 最佳实现方案,完美支持 老版浏览器.手机.平板 等移动端设备,仅 ...
- html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件,实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- js:原生ajax【纯js】
ajax 同步与异步区别 同步:按顺序,依次执行,向服务器发送请求-->客户端做其他操作 异步:分别执行,向服务器发送请求==>同时执行其他操作 原生ajax 四步骤 创建ajax对象 v ...
- php 图片 旋转图片吗,php能实现旋转图片吗
php能旋转图片,其实现方法是:首先创建图像资源:然后使用"imagerotate()"函数按指定的角度旋转:最后通过"$imagejpeg($rotate,$filen ...
- php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码 背景切换 因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
最新文章
- 11.18 Apache用户认证 11.19/11.20 域名跳转 11.21 Apache访问日志
- java开发环境的建立过程_Java开发环境的搭建及第一个Java程序的创建
- Ubuntu之make:make命令行工具的简介、安装、使用方法之详细攻略
- how I can force redetermination everytime
- MySQL 高级 —— 深入理解 InnoDB 与 MyISAM
- Linux查找大文件 (find的用法)
- linux 网络装机,如何搭建和配置PXE网络装机服务
- mfc界面的onvscroll没反应_电脑小技巧之360安全卫士卸载不掉怎么办?只因一个开关没打开...
- python机器学习库sklearn——特征选择
- python文件处理——文件读写
- matlab ga工具箱编程,遗传算法 -- matlab ga工具箱
- 免费的html模板开源网站
- 苹果新功能之Continuity Camera连续性摄像头,是拯救者还是革新者
- echarts 多个 geo 实现缩放拖拽同步
- kali linux学习手册,Kali Linux学习手册
- Maven-仓库概念,下载与配置
- PX4中的二阶巴特沃斯低通滤波
- 欧洲急了,正式发起 2nm 芯片总攻
- 有没有微信相互投票群?
- No pyvenv.cfg file