masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > javascript实现的一个图片转移效果_图象特效

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

WBOY

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

asal

1054 orang telah melayarinya

应网友要求修改一个图片转移效果一个比较漂亮的效果，只是在增加图片效果时有些麻烦。今天应网友的要求，对 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需刷新才能执行]

Label berkaitan：

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

sumber：php.cn

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Tambahkan nilai tambahan pada medan data format yang dipaparkan menggunakan javascript Saya cuba mencapai ini: Saya ingin mencipta borang yang mengumpul data yang dimasukkan ole...

daripada 2024-04-04 15:17:13

0

1

3589

Buat kesan hover yang mengubah butang menu menjadi bentuk x dengan versi klon berbayang Pertama saya ingin mengakui bahawa tajuk saya mengelirukan dan saya minta maaf untuk itu. ...

daripada 2024-04-04 11:55:21

0

2

315

Bagaimanakah saya boleh menjadikan teks bertukar menjadi elemen baharu (seperti pembahagi) apabila diklik? Saya cuba mencari cara untuk menjadikan teks tertentu pada halaman bertukar menjadi pemisa...

daripada 2024-04-04 11:21:03

0

1

3580

Buat susun atur kad yang pelbagai menggunakan grid tunggal atau Flex: panduan praktikal Saya cuba membuat susun atur kad responsif seperti dalam gambar. Apa yang saya lakukan pad...

daripada 2024-04-02 21:07:36

0

2

377

Vanilla JS setTimeout(): Mengenal pasti tingkah laku yang salah Saya mempunyai animasi pada menu hamburger saya yang ditulis dalam HTML, CSS dan JavaScrip...

daripada 2024-04-02 20:44:40

0

1

284

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan