<script>
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<arrimg.length;n++){
var lk=arrimg[n].getAttribute("link");
if (lk!=null) arrimg[n].setAttribute("title",lk)
arrimg[n].onclick=function(){
if (this.getAttribute("link")!=null){
if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
else window.open(this.getAttribute("link"))
}
}
arrimg[n].onmouseout=function(){smove=true;}
arrimg[n].onmouseover=function(){smove=false;}
arrimg[n].style.position="absolute";
imgArr.push(arrimg[n]);
}
this.roundMove=function(){
for (n=0;n<=pn-1;n++){
var o=imgArr[n];
var ta=Math.sin(d+ed*n),strFilter;
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x+"px";
else o.style.left=Math.cos(d+ed*n+pd)*r+x+"px";
o.style.top=ta*rh+rh+y+"px";
var zoom=Math.abs(Math.sin((d+ed*n)/2+pi/4))*0.5+0.5;
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*zoom*r+"px";
o.style.height=zoom*h+"px";
if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
else {ta=100;o.style.zIndex=1}
if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)";
strFilter=strFilter+" alpha(opacity="+ta+")";
o.style.opacity=ta/100;
o.style.filter=strFilter;
}
if (smove) d=d+dv;
}
}
</script>
<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">
<img src="http://www.111cn.cn/blueidea/images/s1.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s2.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s3.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s4.jpg" link="http://www.baidu.com" target="_blank"/>
<img src="http://www.111cn.cn/blueidea/images/s5.jpg" link="http://www.111cn.cn"/>
<img src="http://www.111cn.cn/blueidea/images/s1.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s2.jpg"/>
<img src="http://www.111cn.cn/blueidea/images/s3.jpg"/>
</div>
分享到:
相关推荐
js 图片滚动 效果 function toleft(demo,demo1,demo2,speed,flag) { demo=$(demo); demo1=$(demo1); demo2=$(demo2) demo2[removed]=demo1[removed] function Marquee() { if(demo2.offsetWidth-demo....
JS自动滚动图片特效 横向的 自动滚动JS自动滚动图片特效 横向的 自动滚动JS自动滚动图片特效 横向的 自动滚动JS自动滚动图片特效 横向的 自动滚动JS自动滚动图片特效 横向的 自动滚动
js 图片滚动网页特效 希望对初学学习CSS网页设计的人有帮助
js图片滚动效果,div标签 引用操作简单的一个好例子
原生js图片滚动插件新浪电影大片首页焦点图片滚动切换效果代码
jQuery图片左右滚动效果代码是一款带左右箭头,自动轮播的jQuery图片切换特效。
两种效果的图片滚动,包括演示,代码,需要插件,简单易用,功能强大,全部JS完成
用于Html的javascript图片滚动效果,
mootools写的简单的图片滚动切换效果,功能待完善,ScrollPicture.js是类源文件
js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片滚动js 特效 图片滚动 渐变 多张图片...
支持两个图片(亦可更多)点击滚动效果,向左或者向右整个板块的移动,js包含原信息,支持二次修改
强仿苹果网站导航下边的产品滚动功能,类似js图片滚动效果,苹果厉害啊,仿的就是它
js无缝图片滚动,很不错,可以做到无缝图片流动效果,js无缝图片滚动.
带左右箭头的图片滚动特效,点击小图有放大特效.
js文字图片滚动特效,包括文字上下滚动、左右滚动、停顿滚动;图片上下滚动、左右滚动、停顿滚动。
图片横向滚动js特效 图片横向滚动js特效 图片横向滚动js特效
jS实现的幻灯片效果,非常漂亮。Jquery实现。
一款简单小巧的JS图片横向滚动的展示效果
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...