特漂亮的JS图片排列旋转效果代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 特漂亮的JS图片排列旋转效果代码

Javascript: Jquery实战_读书笔记2 选择器; JQuery 确定css方框模型（盒模型Box Model）; jQuery 入门级学习笔记及源码; 被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用; JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探; JQuery 构建客户/服务分离的链接模型中Table中的排序分析; JQuery.uploadify 上传文件插件的使用详解 for ASP.NET; JavaScript 学习笔记（十四）正则表达式; JQuery 操作Javascript对象和数组的工具函数小结; 用JS写的一个TableView控件代码; JQuery 1.4 中的Ajax问题; window.onbeforeunload方法在IE下无法正常工作的解决办法; 优化javascript的执行速度; jQuery 1.4 15个你应该知道的新特性(译); js 模拟实现类似c#下的hashtable的简单功能代码; setTimeout与setInterval在不同浏览器下的差异; php gethostbyname获取域名ip地址函数详解; JavaScript 未结束的字符串常量常见解决方法; document.getElementById为空或不是对象的解决方法; javascript中利用数组实现的循环队列代码

No. « ‹ 280 281 282 283 › »

技术文章搜索

关键字

Javascript 中的特漂亮的JS图片排列旋转效果代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 106 ::

收藏到网摘: n/a

用cookies实现的可记忆的样式切换效果代码下载 js jquery做的图片连续滚动代码

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp!

点击运行可以看到效果:

<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/tech/20091012/20091012090425_2ba596643cbbbc20318224181fa46b28.jpg"/>
<img class="point" id="p2" src="/upload/tech/20091012/20091012090428_2723d092b63885e0d7c260cc007e8b9d.jpg"/>
<img class="point" id="p3" src="/upload/tech/20091012/20091012090431_a4a042cf4fd6bfb47701cbc8a1653ada.jpg"/>
<img class="point" id="p4" src="/upload/tech/20091012/20091012090441_b2eeb7362ef83deff5c7813a67e14f0a.jpg"/>
<img class="point" id="p5" src="/upload/tech/20091012/20091012090444_9be40cee5b0eee1462c82c6964087ff9.jpg"/>
<img class="point" id="p6" src="/upload/tech/20091012/20091012090425_2ba596643cbbbc20318224181fa46b28.jpg"/>
<img class="point" id="p7" src="/upload/tech/20091012/20091012090428_2723d092b63885e0d7c260cc007e8b9d.jpg"/>
<img class="point" id="p8" src="/upload/tech/20091012/20091012090431_a4a042cf4fd6bfb47701cbc8a1653ada.jpg"/>
</div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

用cookies实现的可记忆的样式切换效果代码下载 js jquery做的图片连续滚动代码

评论 (0) All