Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > javascript实现的一个图片转移效果_图象特效

javascript实现的一个图片转移效果_图象特效

WBOY

Freigeben： 2016-05-16 19:12:43

Original

1053 Leute haben es durchsucht

应网友要求修改一个图片转移效果一个比较漂亮的效果，只是在增加图片效果时有些麻烦。今天应网友的要求，对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。
var firstnum = 1;
var secnum = 2;
var tounum=1;
这三个变量分别作用是传入图片 ID 变量。以及保存当前图片 ID 便于操作！相信大家都会很容易的修改成自己想要的效果 !
代码如下:

<style type="text/css"> #mainid{position:absolute;right:5px;top:10px;height:435px;width:650px;overflow:hidden;background:#fff;left: 400px;border: 3px solid #666666;} .imgbox{position:absolute; left:35px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} .moveimgbox{position:absolute; left:700px; margin-top:20px; top:105px; z-index:90; width:100px;height:100px;background:#ffffff} </style> <script> var ticked=0; var okayToGo = true; var currentCreature = 1; var forwardBackward = 1; var firstnum = 1; var secnum = 2; var tounum=1; function moveItem(firstnum,secnum){ if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+10*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+20*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20); } } function rightOrLeft(firstnum,secnum) { if (ticked == 1020) { window.clearInterval(startTheMove); ticked = 0; forwardBackward = 1; okayToGo = true; } else { okayToGo = false; thisAngle = (Math.PI/2)*(ticked/1000); document.getElementById("y"+firstnum).style.left = " "+(735-Math.sin(thisAngle)*700)+"px"; document.getElementById("y"+firstnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle)*55))+"px"; document.getElementById("y"+secnum).style.left = " "+(735-Math.sin(thisAngle+Math.PI/2)*700)+"px"; document.getElementById("y"+secnum).style.top = " "+(105-(forwardBackward*Math.cos(thisAngle+Math.PI/2)*55))+"px"; ticked += 20; } } </script> <a href="javascript:moveItem(1,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/1.GIF"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <a href="javascript:moveItem(2,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/2.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a>
 <a href="javascript:moveItem(3,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/3.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <a href="javascript:moveItem(4,tounum);"><img  src="http://www.szrgb.net/text/moveimg/images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></a> <div align="right" id="mainid"> <div id="y1" class="imgbox"><img  src="http://www.szrgb.net/text/moveimg/images/1.GIF" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y2" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/2.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y3" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/3.JPG"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> <div id="y4" class="moveimgbox"><img  src="http://www.szrgb.net/text/moveimg/images/4.jpg"    style="max-width:90%"  style="max-width:90%" alt="javascript实现的一个图片转移效果_图象特效" ></div> </div>

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

Verwandte Etiketten：

javascript实现的一个图片转移效果

Quelle：php.cn

Vorheriger Artikel：用js实现键盘方向键翻页功能的代码_javascript技巧 Nächster Artikel：推荐一个不错的图片浏览效果_图象特效

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

Fügen Sie mithilfe von Javascript zusätzliche Werte zu den angezeigten Formatdatenfeldern hinzu Ich versuche Folgendes zu erreichen: Ich möchte ein Formular erstellen, das vom Benutzer e...

Aus 2024-04-04 15:17:13

0

1

3589

Erstellen Sie einen Hover-Effekt, der die Menüschaltfläche mit einer schattierten Klonversion in eine X-Form umwandelt Zunächst möchte ich zugeben, dass mein Titel verwirrend ist, und das tut mir leid. Was ich...

Aus 2024-04-04 11:55:21

0

2

315

Wie kann ich dafür sorgen, dass sich Text beim Klicken in ein neues Element (z. B. eine Trennlinie) verwandelt? Ich versuche eine Möglichkeit zu finden, bestimmte Texte auf der Seite beim Klicken in Tre...

Aus 2024-04-04 11:21:03

0

1

3580

Erstellen Sie vielfältige Kartenlayouts mit einem einzigen Raster oder Flex: eine praktische Anleitung Ich versuche, ein responsives Kartenlayout wie das abgebildete zu erstellen. Derzeit erste...

Aus 2024-04-02 21:07:36

0

2

377

Vanilla JS setTimeout(): Falsches Verhalten identifizieren Ich habe eine Animation auf meinem Hamburger-Menü, die in HTML, CSS und Vanilla-JavaScript...

Aus 2024-04-02 20:44:40

0

1

284

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