關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
更新時間：2010年04月12日 18:37:19 作者：
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測試下。
下面是完整的代碼 jqzoom打包下載地址
<html>
<head>
<title>JQzoom Demo</title>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
font-size:12px;
}
div.notes a{
color:#990000;
}
</style>
<script type="text/javascript">
$(function() {
$(".jqzoom").jqzoom();
});
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
<img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">
</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>
<br>
<div class="notes">
<small>created by Renzi Marco</small>
<a >Hire me</a><br>
<a >view all Demos</a>
</div>
</div>
</body></html>
下面主要演示Jqzoom的方法！推薦一下！
<script type="text/javascript">
window.onload = function() {
$(".jqzoom").jqueryzoom({
xzoom: 250, //設置放大 DIV 長度（默認為 200）
yzoom: 250, //設置放大 DIV 高度（默認為 200）
offset: 10, //設置放大 DIV 偏移（默認為 10）
position: "right", //設置放大 DIV 的位置（默認為右邊）
preload: 1,
lens: 1
});
}
</script>
復制代碼 代碼如下:
<html>
<head>
<title>JQzoom Demo</title>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
font-size:12px;
}
div.notes a{
color:#990000;
}
</style>
<script type="text/javascript">
$(function() {
$(".jqzoom").jqzoom();
});
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
<img src="kawasakigreen_small.jpg" title="kawasakigreen" style="border: 1px solid #666;">
</a><select style="position:absolute;left:400px;top:10px;"><option>sdsdsds</option></select>
<br>
<div class="notes">
<small>created by Renzi Marco</small>
<a >Hire me</a><br>
<a >view all Demos</a>
</div>
</div>
</body></html>
下面主要演示Jqzoom的方法！推薦一下！
復制代碼 代碼如下:
<script type="text/javascript">
window.onload = function() {
$(".jqzoom").jqueryzoom({
xzoom: 250, //設置放大 DIV 長度（默認為 200）
yzoom: 250, //設置放大 DIV 高度（默認為 200）
offset: 10, //設置放大 DIV 偏移（默認為 10）
position: "right", //設置放大 DIV 的位置（默認為右邊）
preload: 1,
lens: 1
});
}
</script>
相關(guān)文章
jquery怎樣實現(xiàn)ajax聯(lián)動框(一)
ajax聯(lián)動框想必大家早有所耳聞，接下來本文詳細介紹下使用jquery實現(xiàn)的原理及代碼，感興趣的你可以參考下，或許對你有所幫助2013-03-03
jQuery.ajax 用戶登錄驗證代碼，需要的朋友可以參考下。2010-10-10
通配符在控制input標簽時相當好用,這里簡單進行了jQuery中的通配符選擇器使用總結(jié),需要的朋友可以參考下2016-05-05
jQuery.ajax實現(xiàn)根據(jù)不同的Content-Type做出不同的響應
使用H5+ASP.NET General Handler開發(fā)項目，使用ajax進行前后端的通訊。有一個場景需求是根據(jù)服務器返回的不同數(shù)據(jù)類型，前端進行不同的響應，這里記錄下如何使用$.ajax實現(xiàn)該需求,需要的朋友可以參考下2016-11-11
JQuery實現(xiàn)動態(tài)添加刪除評論的方法
這篇文章主要介紹了JQuery實現(xiàn)動態(tài)添加刪除評論的方法,涉及jQuery處理鼠標事件及json數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-05-05
詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
這篇文章主要為大家剖析了JavaScript for循環(huán)中發(fā)送AJAX請求問題，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法
這篇文章主要介紹了jQuery實現(xiàn)文字超過1行、2行或規(guī)定的行數(shù)時自動加省略號的方法,涉及jQuery針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-03-03
在文章的正文中，往往會出現(xiàn)一些超大的圖片，把頁面撐開變形，影響了美觀。用這段JS代碼就可解決這個問題，你可以把圖片的最大值限定在一定范圍內(nèi)，當圖片大小超出這個尺寸后，就會被自動按比例縮小2012-10-10
原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jquery ajax 請求小技巧,結(jié)合實例形式分析了jquery ajax請求操作相關(guān)配置與使用技巧,需要的朋友可以參考下2019-11-11