给一个图片设置放大镜。跟淘宝的放大镜一样,代码怎么做。

 我来答
扎俊
2013-04-26 · 知道合伙人互联网行家
扎俊
知道合伙人互联网行家
采纳数:366 获赞数:1525
涉猎C#;C++,vb,vb script,asp,PHP,JS,w3c,网站运营、推广等

向TA提问 私信TA
展开全部

你好,可以使用jquery的插件:jqzoom来实现。

下载地址:

http://www.jb51.net/jiaoben/29216.html

 

演示的代码如下:

 【以下并非原创】

<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>
&lt;a href="<A href="http://www.mind-projects.it/projects/jqzoom/contact.php" target=_blank data_ue_src="http://www.mind-projects.it/projects/jqzoom/contact.php">http://www.mind-projects.it/projects/jqzoom/contact.php<;/A>"&gt;Hire me&lt;/a&gt;&lt;br&gt;
&lt;a href="<A href="http://www.mind-projects.it/projects/jqzoom" target=_blank data_ue_src="http://www.mind-projects.it/projects/jqzoom">http://www.mind-projects.it/projects/jqzoom<;/A>"&gt;view all Demos&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;&lt;/html&gt;

 

 

下面主要演示Jqzoom的方法!推荐一下!

代码如下:

 

&lt;script type="text/javascript"&gt;
window.onload = function() {
$(".jqzoom").jqueryzoom({
xzoom: 250, //设置放大 DIV 长度(默认为 200)
yzoom: 250, //设置放大 DIV 高度(默认为 200)
offset: 10, //设置放大 DIV 偏移(默认为 10)
position: "right", //设置放大 DIV 的位置(默认为右边)
preload: 1,
lens: 1
});
}
&lt;/script&gt;

来自:求助得到的回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式