地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
网页图片特效
> 正文:
一款兼容性很好的图片旋转展示效果,可带链接
网页图片特效
一款兼容性很好的图片旋转展示效果,可带链接
日期: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"> <!--把下面代码加到<head>与</head>之间--> <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> <!--把下面代码加到<body>与</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实现的渐隐渐现的…
相关信息
js+css精美二级导航菜单
背景不停变换颜色
仿腾讯迷你首页的jQuery选项…
JS实现的隐藏源代码文件
一款CSS+JS实现的漂亮简约的…
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间1.6094 s