<style type="text/css">
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;}
</style>
<script>
var r=200,dv=0.01,w=100,x=400;y=100,pn=8
var pi=3.1415926575,d=pi/2;
var pd=Math.asin(w/2/r);
ed=pi*2/pn;smove=true
function window.onload(){
var o=document.getElementById("imground");
var arrimg=o.getElementsByTagName("img");
for (n=0;n<arrimg.length;n++){
arrimg[n].onmouseout=function(){smove=true;}
arrimg[n].onmouseover=function(){smove=false;}
arrimg[n].onmousedown=function(){dv=dv*2}
}
setInterval(roundMove,20);
}
function roundMove(){
for (n=1;n<=8;n++){
var o=document.getElementById("p"+n)
var ta=Math.sin(d+ed*n);
var strFilter;
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x;
else o.style.left=Math.cos(d+ed*n+pd)*r+x;
o.style.top=ta*10+10+y;
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
o.style.zIndex=ta*10;
if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)";
if (ta<0) ta=(ta+1)*80+20; else ta=100;
strFilter=strFilter+" alpha(opacity="+ta+")";
o.style.opacity=ta/100;
o.style.filter=strFilter;
}
if (smove) d=d+dv;
}
</script>
<div id="imground">
<img class="point" id="p1" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p2" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p3" src="/upload/20071228115115831.jpg"/>
<img class="point" id="p4" src="/upload/20071228115115794.jpg"/>
<img class="point" id="p5" src="/upload/20071228115116920.jpg"/>
<img class="point" id="p6" src="/upload/20071228115115772.jpg"/>
<img class="point" id="p7" src="/upload/20071228115115527.jpg"/>
<img class="point" id="p8" src="/upload/20071228115115831.jpg"/>
</div>
分享到:
相关推荐
javascript和html5实现的一款兼容性较好的图片旋转JS效果,支持像QQ空间一样向左或者向右图片旋转
这是一款纯js实现360度旋转预览图片特效。该js特效仅使用120行代码,即可实现通过滑块、或鼠标手动360度旋转图片,以及自动360度旋转图片的效果。
Html5+js+CSS3实现3D旋转效果
Roundabout.js演示6种图片立体旋转效果 Roundabout.js演示6种图片立体旋转效果
原生js代码实现12张图片的3d旋转效果
jquery实现图片3d旋转,flash实现3d旋转,js实现3d旋转.一共是两个列子一个是flash实现的,一个是纯jQuery实现的
本焦点图效果是由jQuery插件中的jquery.rotate.js 实现的旋转切换的幻灯效果,在主图的两侧有左右控制的按钮,点击按钮后图片就切换,切换的方式是淡入淡出。如果你还对jquery.rotate.js用法不太熟悉的话,你可以...
Js实现旋转导航菜单,r半径,dv偏移量,w图片宽度,x菜单横坐标,y菜单纵坐标,pn菜单图片数量,当图片旋转到圆的正面时,传入当前图片移动的横坐标,正弦值对应为负弧度,即图片旋转到圆的背面,传入当前图片移动的横...
本文实例讲述了JS实现3D图片旋转展示效果代码。分享给大家供大家参考。具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的...
原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换 原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换 原生js代码3D图片叠加旋转切换缩略图片控制图片旋转切换
使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能, 解决官网移动旋转复位效果, 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....
本范例实现图片放大、旋转、拖动JQuery效果,代码经过本人手工修改,在实战项目及多浏览器中测试通过,可以放心使用。 如果你在网上找的其它效果只能 放大+拖动 而不能旋转,或者只能 放大+旋转 而不能拖动的话,我...
JS 实现3D立体效果的首页轮播图:http://blog.csdn.net/libin_1/article/details/50451121
主要介绍了JS实现图片旋转动画效果封装与使用,结合实例形式分析了JavaScript实现图片元素旋转的相关功能代码的封装与使用操作技巧,需要的朋友可以参考下
本效果是基于HTML5,CSS3及JavaScript实现的,实现了移动端和...同时,以中心图片为圆点,四周图片环绕中心图片旋转,主要使用到的技术点在于z-index以及border-radius:50%,实现效果仅供参考(其中图片请自行替换)。
一个纯CSS3无js实现超酷的图片旋转+放大缩小的玄幻效果.zip 一个纯CSS3无js实现超酷的图片旋转+放大缩小的玄幻效果.zip 一个纯CSS3无js实现超酷的图片旋转+放大缩小的玄幻效果.zip
用JS写的,可以实现图片的旋转的效果。可以实现360度旋转
根据网上找的代码修改后的成品,实现了图片的方法,缩小,旋转,拖动查看等功能
本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果,非常炫酷,有需要的小伙伴可以参考下。
以往的旋转图片展示都用FLASH实现 这个是纯JS制作的,来自蓝色经典。