Heim  >  Artikel  >  Web-Frontend  >  jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery

jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery

WBOY
WBOYOriginal
2016-05-16 15:41:571170Durchsuche

Das Beispiel in diesem Artikel beschreibt den Scroll- und Vergrößerungseffekt von JQuery-Bildern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein auf JQuery basierender Code, der Bildlauf- und Vergrößerungseffekte implementiert. Er ist wie eine Lupe und eignet sich für die Produktanzeige, um Benutzern das Durchsuchen von Produktdetails zu erleichtern.
Laufende Renderings: ------------------ -------------------------------------------------- ---------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Der mit Ihnen geteilte jquery-Bild-Scroll- und Zoom-Effektcode lautet wie folgt



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片滚动条放大效果 -</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>

<body>

<div class="headeline"></div>

<!--演示内容开始-->
<link href="css/default.css" rel="stylesheet" type="text/css" />
 <div id="content">
 <h1>jquery图片滚动条放大效果</h1>
 <div class="scroller demo1">
 <div class="inside">
 <a href="#"><img src="images/img1.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img2.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img3.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img4.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img5.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img6.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img7.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img8.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img9.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img10.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img11.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img12.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img13.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img14.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 <a href="#"><img src="images/img15.jpg" alt="jquery Bild-Scrolling-Vergrößerungscode-Sharing (2)_jquery" /></a>
 </div>
 </div>
 </div>
<link href="css/demo1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/scroller.js"></script>
<script type="text/javascript">
$(function(){
 $(".demo1").scroller();
});
</script>
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>
</body>
</html>
Das Obige ist der mit Ihnen geteilte JQuery-Bildlauf-Vergrößerungseffektcode. Ich hoffe, er gefällt Ihnen.

Stellungnahme:
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