jQuery Zoom解決你放大鏡的困擾,make it!

0
50

簡要介紹:

jquery.zoom.js是一款非常簡單實用的圖片放大鏡效果,基於jquery。該套件可以點擊圖片並實現內部放大效果,有多種不同的放大模式,讓我們往下瞧瞧!

查看演示

 

search  使用方法

在頁面中引入jQuery和-zoom.js文件。

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-zoom.js"></script>

 

computer   HTML代碼

可使用<a>,<span>,<li>和<div>等元素來包裹圖片。

注意這邊有添加id,等下會使用id啟動js效果。

<span class='zoom' id='ex1'>
    <img src='img/design.jpg' width='555' height='320' alt='web design'/>
	<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
    <img src='img/women.jpg' width='290' height='320' alt='women'/>
	<p>Grab</p>
</span>
<span class='zoom' id='ex3'>
    <img src='img/horse.jpg' width='555' height='320' alt='horse'/>
	<p>Click to activate</p>
</span>
<span class='zoom' id='ex4'>
    <img src='img/women2.jpg' width='290' height='320' alt='women2'/>
	<p>Click to toggle</p>
</span>

 

settings  啟動JS

調用4次zoom(),分別對應不同的id。

on:’click’ , on:’grab’ , on:’toggle’ 分別對應不同效果。

<script>
   $(document).ready(function(){
	$('#ex1').zoom();
	$('#ex2').zoom({ on:'grab' });
	$('#ex3').zoom({ on:'click' });			 
	$('#ex4').zoom({ on:'toggle' });
   });
</script>

 

如此一來便能實現放大鏡效果囉!是不是很簡單呢?

趕快去試看看吧^^~

 

本文章所屬frankbite,未經授權,不得轉載!如需轉載,煩請通知。

如果你喜歡我們的文章,請 Follow 我們的 Facebook 專頁,會分享許多很棒的文章唷!

%e6%9c%aa%e5%91%bd%e5%90%8d-1_03