地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 网页图片特效 > 正文：一款兼容性很好的图片旋转展示效果，可带链接

一款兼容性很好的图片旋转展示效果，可带链接

日期：2011-12-26 21:24:00 标签：图片特效图片展示旋转图片展示效果兼容 js特效

∷ PC蛋蛋赚积分换Q币！>>>更多礼品兑换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>一款兼容性很好的图片旋转展示效果，可带链接丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
body{background:white;color:black;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:29px;}
span{border:1px solid gray;background:#333;padding:4px;font-weight:bold;}
</style>
<script language="javascript">
 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>
</head>
<body>

<div id="imgContainer" style="width:600px;height:300px;border:1px solid red">
<img src="/images/s1.jpg" link="http://www.CsrCode.cn" target="_blank">
<img src="/images/s2.jpg" link="http://www.33567.cn" target="_blank">
<img src="/images/s3.jpg" link="http://www.33567.cn" target="_blank">
<img src="/images/s4.jpg" link="http://www.7caidy.com" target="_blank">
<img src="/images/s5.jpg" link="http://so.7caidy.com" target="_blank">
<img src="/images/s6.jpg" link="http://www.33567.cn" target="_blank">
<img src="/images/s7.jpg" link="http://changshi.csrcode.cn" target="_blank">
<img src="/images/s8.jpg" link="http://dongman.33567.cn" target="_blank">
<img src="/images/s9.jpg" link="http://links.csrcode.cn" target="_blank">
<img src="/images/s10.jpg" link="http://idc.csrcode.cn" target="_blank">
</div>
</body>
</html>

<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：中国站长天空</font></p>

提示：您可以先修改代码后再运行，复制和保存代码功能在Firefox下无效。

（本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.）
（本文由 CsrCode.CN|芯晴网页特效收集丨www.CsrCode.cn）

本文网址：

上一篇：页面从上往下缓慢降落的漂浮图片

下一篇：JS+CSS打造flash弹性效果的图片切换效果

评论信息

抱歉，本文暂停评论留言。

栏目分类

·菜单导航特效
·图层样式特效
·链接文本特效
·网页图片特效
·日期时间特效
·页面窗口特效
·鼠标特效代码
·网页背景特效
·表格表单特效
·状态栏特效
·页面搜索特效
·其他特效代码

热门排行

一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…

推荐信息

竖向排列的图片幻灯切换效果…
JS打造的大图片浏览的幻灯图…
仿土豆网带缩略图的焦点图片…
[酷] 一款媲美FLASH的图片交…
点击图片直接把图片地址复制…
一款jQuery实现的带标题的图…
仿新浪微博图片旋转效果
非常经典的图片相册展示效果…
一款基于jQuery的超实用的带…
jQuery+CSS实现的渐隐渐现的…