Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 特漂亮的JS图片排列旋转效果代码_图象特效

特漂亮的JS图片排列旋转效果代码_图象特效

WBOY

Freigeben： 2016-05-16 19:06:57

Original

1268 Leute haben es durchsucht

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来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="http://files.jb51.net/upload/20071228115115772.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p2" src="http://files.jb51.net/upload/20071228115115527.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p3" src="http://files.jb51.net/upload/20071228115115831.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p4" src="http://files.jb51.net/upload/20071228115115794.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p5" src="http://files.jb51.net/upload/20071228115116920.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p6" src="http://files.jb51.net/upload/20071228115115772.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p7" src="http://files.jb51.net/upload/20071228115115527.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
<img  class="point" id="p8" src="http://files.jb51.net/upload/20071228115115831.jpg" alt="特漂亮的JS图片排列旋转效果代码_图象特效" > 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

js 图片旋转

Quelle：php.cn

Vorheriger Artikel：浏览器无法运行JAVA脚本的解决方法_javascript技巧 Nächster Artikel：js实现iframe动态调整高度的代码_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

Kann ein in mehreren Routen deklarierter Workerpool seine CPU-Auslastung trotzdem beibehalten, ohne sich um den Schwellenwert zu kümmern? Ich hoffe, ein node.js-System mit einem Workerpool zu finden, um CPU-intensive Aufgaben zu...

Aus 2024-04-06 19:54:23

0

1

444

Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...

Aus 2024-04-06 18:16:26

0

1

403

Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...

Aus 2024-04-06 15:49:33

0

1

319

Sollten wir SSG verwenden, um mit Nuxt.js erstellte Dashboards bereitzustellen? Wir werden mit Nuxt.js ein Dashboard für den internen Gebrauch entwickeln. Da es sich um e...

Aus 2024-04-06 13:17:44

0

1

493

Electron erhält AppData beim Vorladen Wie erhalte ich das vorinstallierte AppData-Verzeichnis? Background.js[...]asyncfunctioncr...

Aus 2024-04-06 11:05:31

0

1

417

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage