关于Jqzoom的使用心得 jquery放大镜效果插件_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 href="http://www.mind-projects.it/projects/jqzoom/contact.php">Hire me</a><br>
<a href="http://www.mind-projects.it/projects/jqzoom">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>

时间: 2025-01-30 14:32:33

关于Jqzoom的使用心得 jquery放大镜效果插件_jquery的相关文章

jQuery实现的放大镜效果示例_jquery

本文实例讲述了jQuery实现的放大镜效果.分享给大家供大家参考,具体如下: zoom.css: *{ padding: 0; margin: 0; } li{ list-style-type: none; } .zoom{ margin: 50px; position: relative; } .zoomMiddle{ border: 1px solid #ccc; width: 300px; height: 300px; margin-bottom: 3px; position: relat

5款jQuery滚动效果插件

jQuery滚动效果插件 Waypoints Waypoints 是一个 jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,或者固定某个元素不让滚动等等.支持主流浏览器版本. 在线演示:http://imakewebthings.github.com/jquery-waypoints/infinite-scroll/ 下载地址:http://imakewebthings.github.com/jquery-waypoints/ jQuery滚动插件 Endless Scro

30个最佳jQuery Lightbox效果插件分享_jquery

Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示例 4.LightWindow v2.0 在线示例 5.Colorbox Lightbox Plugin 在线示例 6.FaceBox 在线示

分享30个最佳 jQuery Lightbox 效果插件

Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果.Web开发者们模仿 Lightbox 开发了各种各样的图片浏览插件,有基于 jQuery 的,有基于 Prototype 的,也有使用原生 JavaScript 写的.今天,本文要与大家分享的是30个最佳 jQuery Lightbox 效果插件. 1.jQuery LightBox 在线示例 2.Lightbox2 在线示例 3.FancyBox 在线示

免费资源:7个效果非常棒的jQuery 3D效果插件

这是一篇有关jQuery 3D效果实现的文章,对应Web开发人员来说,写更少的东西,实现更多的内容是非常幸福的事情,对应js来说,jQuery 就是为我们这样服务的,使用jQuery你可以用很少的代码轻松实现本来需要很多代码的程序应用,包括Web 3D效果. 1. Flip HTML content in 3D 2. Agile Carousel 3. Rotation 4. Tag Cloud 5. Sphere 6. Flip! 7. Faux 3D Effect via: 7 Amazin

JQuery实现的图文自动轮播效果插件_jquery

本文实例讲述了JQuery实现的图文自动轮播效果插件.分享给大家供大家参考.具体如下: intervalID = setInterval(cycleImage, slidetime); $(".main_image .desc").show(); // 展示图片 $(".main_image .block").animate({ opacity: 0.85 }, 1 ); // 设置透明度 //点击和悬停事件 $(".image_thumb ul li:f

jQuery实现图片轮播效果代码(基于jquery.pack.js插件)_jquery

本文实例讲述了jQuery实现图片轮播效果代码.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

分享20款美化网站的 jQuery Lightbox 灯箱插件_jquery

jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力. 因此在这个集合中,我们编译了20款最好的 jQuery 灯箱插件清单,这将有助于开发人员创建和设计精美的网站.您可以将这些插件很容易地集成到您的网站,可以下载他们瞬间充实你的插件库. 1. lightGallery jQuery lightGallery

分享精心挑选的23款美轮美奂的jQuery 图片特效插件_jquery

下面向大家分享精心挑选的23款优秀 jQuery 图片特效插件,带给你美轮美奂的图片展示效果.   01. 3D Image Slider 非常非常酷的 3D 图片滑动效果,有五种绚丽的效果演示.     在线演示 下载源码   02. Portfolio Image Navigator 精致的图片导航效果,通过四个方向的箭头控制,适合作品展示的应用场合.     在线演示 下载源码   03. Image Transitions 非常精美的图片切换效果,有 Flip.Multi-flip.Ro