Rumah >hujung hadapan web >tutorial js >perkongsian kod pembesaran menatal imej jquery (2)_jquery
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>