Rumah >hujung hadapan web >tutorial js >perkongsian kod pembesaran menatal imej jquery (2)_jquery

perkongsian kod pembesaran menatal imej jquery (2)_jquery

WBOY
WBOYasal
2016-05-16 15:41:571237semak imbas

Contoh dalam artikel ini menerangkan kesan penatalan dan pembesaran imej jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini adalah kod berdasarkan jquery yang melaksanakan penatalan imej dan kesan pembesaran Ia seperti kaca pembesar dan sesuai untuk paparan produk untuk memudahkan pengguna melayari butiran produk. Ia adalah kod kesan khas yang sangat praktikal.
Penyampaian berjalan: ------------------------------------------------- ------------------------------------------------- ---------------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kesan menatal dan zum imej jquery yang dikongsi dengan anda adalah seperti berikut



<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="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img2.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img3.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img4.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img5.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img6.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img7.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img8.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img9.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img10.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img11.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img12.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img13.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img14.jpg" alt="perkongsian kod pembesaran menatal imej jquery (2)_jquery" /></a>
 <a href="#"><img src="images/img15.jpg" alt="perkongsian kod pembesaran menatal imej jquery (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>
Di atas ialah kod kesan pembesaran menatal imej jquery yang dikongsi dengan anda, saya harap anda boleh menyukainya.

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