<!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">

 <head>

     <title>JQZoom放大镜插件</title>

     <script type="text/javascript"

             src="Jscript/jquery-1.8.2.min.js">

     </script>

     <script type="text/javascript"

             src="Js-8-7/jquery.jqzoom.js">

     </script>

     <link rel="stylesheet" type="text/css"

             href="Css-8-7/jquery.jqzoom.css" />

     <style type="text/css">

            body{font-size:13px}

            span{color:Red;font-size:12px}

            .divFrame{width:260px;border:solid 1px #666}

            .divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}

            .divFrame .divContent{padding:8px;line-height:1.6em}

            .divFrame .divContent img{border:1px solid #ccc}

     </style>

     <script type="text/javascript">

         $(function() {

             $("#jqzoom").jqzoom( //绑定图片放大插件jqzoom

                  {

                      zoomWidth: 230,

                      zoomHeight: 230,

                      zoomType: 'reverse'

                  }

             );

         });

     </script>

 </head>

 <body>

     <div class="divFrame">

          <div class="divTitle">

               图片放大镜

          </div>

          <div class="divContent">

               <a href="Images-8-7/bag.jpg" id="jqzoom" title="我的背包">

                  <img src="Images-8-7/bagsmall.jpg" />

               </a>

          </div>

     </div>

 </body>

 </html>

jQuery-图片放大镜的更多相关文章

  1. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  2. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  3. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  4. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  5. Jquery的jqzoom插件的使用（图片放大镜）

    今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...

  6. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  7. 图片放大镜——jQuery插件Cloud Zoom

    下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 ...

  8. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  9. jQuery补充，模拟图片放大镜

    jQuery补充,模拟图片放大镜 html <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  10. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

随机推荐

  1. cocoa开发Mac小试笔记

    急需纠正自己的错误认识,Mac开发和iOS开发UI显示.事件交互.生命周期等存在极大的差距 首先点击事件NSButton和UIButton完全是两个不同的东西 列表UITableView和NSTabl ...

  2. iOS循环引用常见场景和解决办法

    好多场景会导致循环引用,例如使用Block.线程.委托.通知.观察者都可能会导致循环引用. 1.委托 遵守一个规则,委托方持有代理方的强引用,代理方持有委托方的弱引用. 实际场景中,委托方会是一个控制 ...

  3. C# Winform同一子窗体只允许打开一次

    在winform中一个窗口可以一直打开,是不合理的,解决方法: http://blog.csdn.net/kangkang621/article/details/49664295

  4. Chap1 引言[The Linux Command Line]

    附上链接:http://billie66.github.io/TLCL/book/chap01.html Content: part1-Introduction part2-Learning The ...

  5. [DPI][TCP] linux API的接口如何控制urgent包的收发

    做DPI,写协议栈的时候,处理到了urgent数据包.突然好奇应用层是如何控制发出urgent包的呢?而接收端又是如何知道,接受到了urgent包的呢? man 7 tcp,中有如下一段: TCP s ...

  6. 将DOS格式的shell脚本转为UNIX格式

    shell脚本是UNIX格式,在修改其中内容时,务必保持UNIX格式.UE编辑器打开时,会询问是否转为DOS格式,请点否.如果修改完成后,不能确认是否为DOS格式,可以使用UE文件菜单下的Conver ...

  7. 《linux 字符处理》- grep/sort/uniq/tr/paste

    一:基本 字符处理主要是文本的搜索和处理. 搜索也主要使用到了 管道 作为媒介. 二: grep 搜索文本 基本语法 * grep [-incv] ’文本’ 文件 * i 不区分大小写 * c 匹配行 ...

  8. 2018/03/07 每日一个Linux命令 之 cat

    每日一个Linux命令 2018-03-07 Linux 命令 cat cat [-参数] fileName 在之前的Linux使用中 cat 命令一直作为文本输出指令来使用,很少可以深入学习的该命令 ...

  9. ES6新特性三： Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  10. 实践-通过matlab操作sqlite数据库

    1.下载sqlite-jdbc连接数据库地址 https://bitbucket.org/xerial/sqlite-jdbc/downloads/ 2.将该jar包的绝对路径写入matlab的cla ...