JS旋转图片阵类

2024-10-24 01:04:51

JS旋转图片阵效果 brought to you by 斩梦人.天天 qq:22062019

body{background:black;color:white;font-family: Arial, Helvetica, sans-serif;font-size:16px;line-height:29px}
span{border:1px solid gray;background:#333;padding:4px;font-weight:bold;}

使用方法:

首先定义一个imgRound类:

var rt = new imgRound("imgContainer", 120, 90, 500, 220, 230, 0.01)

然后使用定时函数调用imgRound实例的roundMove方法:

setInterval(function(){rt.roundMove()}, 20)

window.onload=function(){
var rt=new imgRound("imgContainer",120,90,300,80,230,0.01);
setInterval(function(){rt.roundMove()},20)
}
function imgRound(id,w,h,x,y,r,dv,rh,ah){
if (ah==undefined) ah=1;
if (rh==undefined) rh=10;
var dv=dv*ah; //旋转速度
var pi=3.1415926575;
var d=pi/2;
var pd=Math.asin(w/2/r);
var smove=true;
var imgArr=new Array();
var objectId=id;
var o=document.getElementById(objectId);
o.style.position="relative";
var arrimg=o.getElementsByTagName("img");
var pn=arrimg.length; //图片数量
var ed=pi*2/pn;
for (n=0;n

参数说明: initRound(id,w,h,x,y,r,dv,rh,ah);

id: 容器ID

w: 图片宽度

h: 图片高度

x: 圆心水平位置

y: 圆心垂直位置

r: 圆圈半径

dv: 旋转速度

rh: 垂直距离 (可选,默认为10)

ah: 旋转方向 (可选,1:顺时针,2:逆时针,默认为1)

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript结合canvas实现图片旋转效果

我们在微博上可以对图片进行向左转向右转等旋转操作,让用户可以从不同的视角欣赏图片效果.本文将结合实例为您讲解如何使用Javascript结合相关技术来实现图片的旋转效果.我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie6,7,8不支持HTML5的浏览器,我们使用IE特有的滤镜效果来实现图片旋转. HTML 我们在页面中放置一张图片,在图片的上方放置两个按钮,通过onclick事件调用rotate()函数来控制图片向左向右旋转. <div id="tool">
js实现图片360度旋转

大致介绍这次是一个简单的效果,就是思路的问题效果: 思路旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转由于效果是根据鼠标的移动距离来操作的,即移动的像素值.如果按照默认的情况,移动鼠标的时候图片就旋转的太快了,所以我们要给鼠标移动的距离处以15,降低图片的旋转速度. var l = parseInt(-x/15); 有一个问题是在鼠标向左移动的时候,移动的距离是负的.要想正确的显示图片,就要对负值进行处理.例如-1,图片要显示最后一张即72张(图片一
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images
js实现图片旋转的三种方法

1 使用jQueryRotate.js实现示例代码: 复制代码代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #div1 { width: 800px; height: 600px; background-color: #ff0; position: absolute; } .imgRotate { widt
JavaScript控制图片360度旋转代码

JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i
浏览器图片选择预览、旋转、批量上传的JS代码实现

工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用IE的filter css progid:DXImageTransform.Microsoft.AlphaImageLoader chrome/firefox则用File api的file reader 2. 图片旋转,IE用progid:DXImageTransform.Microsoft.Matr
特漂亮的JS图片排列旋转效果代码

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp! body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=p
原生JS实现旋转木马式图片轮播插件

本人自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的,淡入淡出切换的.现在想做一个酷一点的放在博客或者个人网站,到时候可以展示自己的作品.逛了一下慕课网,发现有个旋转木马的jquery插件课程,有点酷酷的,于是就想着用原生JS封装出来.做起来才发现,没有自己想象中的那么容易...不啰嗦了,讲解一下实现过程吧. 二.效果由于自己的服务器还没弄好.在线演示不了(ORZ...),只能放一张效果图了. 从图片上还是可以看出大概效果的,我就不多说了.想看
纯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实现图片平面旋转的方法

本文实例讲述了JS实现图片平面旋转的方法.分享给大家供大家参考,具体如下: <!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&

JS旋转图片阵类

相关推荐

随机推荐