masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > JS实现鼠标移动到缩略图显示大图的图片放大效果_图象特效

JS实现鼠标移动到缩略图显示大图的图片放大效果_图象特效

WBOY

Lepaskan： 2016-05-16 17:47:01

asal

1021 orang telah melayarinya

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>图片提示效果</title> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script> 
<style type="text/css"> 
body{margin:0 ;padding:40px;line-height:180%;} 
img{border:none;} 
ul,li{margin:0 ;padding:0;} 
li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;} 
/*tooltip*/ 
#tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;} 
</style> 
<script type="text/javascript"> 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var imgTitle = this.myTitle?"
"+ this.myTitle : ""; 
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 
document.write(tooltip); 
$("body").append(tooltip); //把它追加到文档中 
$("#tooltip").css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).fadeIn(600); //设置x坐标和y坐标，并且显示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip").css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
</script> 
 
 
<h3>效果</h3> 
<ul> 
<li><a class="tooltip" title="苹果 iPod" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall1.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" alt="苹果 iPod"></a></li> 
<li><a class="tooltip" title="苹果 iPod nano" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall2.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" alt="苹果 iPod nano"></a></li> 
<li><a class="tooltip" title="苹果 iPone" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall3.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" alt="苹果 iPone"></a></li> 
<li><a class="tooltip" title="苹果 Mac" href="http://files.jb51.net/file_images/article/201212/picmove_2/wall4.jpg"><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" alt="苹果 Mac"></a></li> 
</ul>

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

Label berkaitan：

tetikus ke atas

sumber：php.cn

Artikel sebelumnya：解决js正则匹配换行问题实现代码_基础知识 Artikel seterusnya：如何用ajax来创建一个XMLHttpRequest对象_基础知识

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

Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...

daripada 2024-04-06 20:02:10

0

2

543

Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}

daripada 2024-04-06 19:25:49

0

1

505

Hasilkan nilai lalai dan pembolehubah CSS menggunakan SCSS Saya sedang melaksanakan penggayaan laman web. Atas sebab sokongan warisan, saya perlu men...

daripada 2024-04-06 17:46:54

0

1

355

Gaya CSS tidak digunakan pada tapak Saya sedang membuat tapak web menggunakan Bootstrap5 tetapi sifat index.css tidak digunaka...

daripada 2024-04-06 17:12:23

0

1

336

Kemungkinan untuk menyimpan kod ASP Classic sebagai rentetan dalam pangkalan data MYSQL Adakah mungkin untuk menyimpan kod klasik asp ke dalam pangkalan data MySQL dan minta ia m...

daripada 2024-04-06 13:38:43

0

1

358

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