Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Hauptteil

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

WBOY

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

Original

989 Leute haben es durchsucht

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用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需刷新才能执行]

Verwandte Etiketten：

鼠标经过

Quelle：php.cn

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

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

So verwenden Sie Laravel-Komponenten mit Livewire-Lazy-Platzhaltern Ich möchte das Skelett meiner Laravel-Komponente in einen Livewire3-Platzhalter einfügen. ...

Aus 2024-04-06 20:02:10

0

2

543

Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...

Aus 2024-04-06 19:25:49

0

1

505

Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...

Aus 2024-04-06 17:46:54

0

1

355

CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...

Aus 2024-04-06 17:12:23

0

1

336

Möglichkeit, ASP Classic-Code als String in der MYSQL-Datenbank zu speichern Ist es möglich, klassischen ASP-Code in einer MySQL-Datenbank zu speichern und ihn beim Ab...

Aus 2024-04-06 13:38:43

0

1

358

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1418658
php入门教程之一周学会PHP

4260177
JAVA 初级入门视频教程

2495477
小甲鱼零基础入门学习Python视频教程

504724
PHP 零基础入门教程

859698

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage