---本系列文章所用使用js均可在本博客文件中找到。

像淘宝一样，鼠标放在某一件商品上，展示大图信息，甚至查看图片的具体部位。给人超炫的效果，这种效果实现基于js文件和js插件。大致可以分为三步，添加js样式和插件，找到对应图片，写html代码和jQuery代码。

1，添加jQuery插件：jquery-1.8.3.js和jquery-1.8.3.min.js（插件可以下载）。

基本上jQuery效果实现都基于此插件，类似于咱们在三层中的DbHelp类

2，添加查看图片的插件和样式和图片（big.jpg和small.jpg演示所用的图片）：

jquery.jqzoom-core.js

jquery.jqzoom.css

3，编写代码：

<body>

    <a class="myclass" title="mytitle" href="image/big.jpg">

        <img title="title" src="data:image/small.jpg">

    </a>

</body>

jQuery代码：

    <script type="text/javascript">

        $(document).ready(function () {

            $('.myclass').jqzoom();

        });

    </script>

实现效果：

【jQuery小实例】js 插件 查看图片的更多相关文章

  1. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

  2. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  3. 通过jquery.transit.min.js插件，实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  4. 【jQuery小实例】---3 凤凰网首页图片动态效果

    ---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...

  5. jQuery 小知识点（插件）

    1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...

  6. jQuery 关于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二弹）

    如果你看了上一篇<ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)>的话,应该就知道我是逼不得已要认真学 ...

  7. 使用jquery的lazy loader插件实现图片的延迟加载

    当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较 ...

  8. JSON对象配合jquery.tmpl.min.js插件，手动攒出一个table

    jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...

  9. web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo

    背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...

随机推荐

  1. 最小生成树 prime + 队列优化

    存图方式 最小生成树prime+队列优化 优化后时间复杂度是O(m*lgm) m为边数 优化后简直神速,应该说对于绝大多数的题目来说都够用了 具体有多快呢 请参照这篇博客:堆排序 Heapsort / ...

  2. >hibernate初认识

    一.什么是hibernate 1.hibernate是java领域的一款开源的ORM框架技术 2.hibernate对JDBC进行了非常轻量级的封装(使用了反射机制+配置或注解) 二.hibernat ...

  3. js通过注册表找到本地软件安装路径并且执行

    场景:用js执行本地的安装软件,如果不存在就执行安装 操作步骤: 1.前台js代码 <script type="text/javascript"> function e ...

  4. Spring MVC 框架的架包分析，功能作用，优点

    由于刚搭建完一个MVC框架,决定分享一下我搭建过程中学习到的一些东西.我觉得不管你是个初级程序员还是高级程序员抑或是软件架构师,在学习和了解一个框架的时候,首先都应该知道的是这个框架的原理和与其有关j ...

  5. 代码片段：处理HTTP请求的接口

    以下程序用来获取用户传递过来的信息. 1.头文件 /* * 这个是处理HTTP请求的接口头文件 */ #define KEY_VALUE_MAX 1024 /* 键值的最大长度 */ typedef ...

  6. 【实战Java高并发程序设计 1】Java中的指针：Unsafe类

    是<实战Java高并发程序设计>第4章的几点. 如果你对技术有着不折不挠的追求,应该还会特别在意incrementAndGet() 方法中compareAndSet()的实现.现在,就让我 ...

  7. SQL Server复制出错文章集锦

    SQL Server复制出错文章集锦 为了方便大家对数据库复制过程中出错的时候更好地解决问题 本人收集了SQL Server相关复制出错解决的文章   The process could not ex ...

  8. 在Visual Studio中将现有.NET Framework项目迁移至.NET Core 1.1 Preview 1

    1)下载安装包含 .NET Core 1.1 Preview 1 的 SDK:Windows x64 安装包(下载地址列表) 2)下载最新 VS 2015 NuGet 插件:https://dist. ...

  9. Redis高可用分布式内部交流(九)

    这是上月在公司内部的一次分享,现把PPT及交流内容整理成博客. 阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务 ...

  10. ubuntu下rhythmbox歌名显示乱码问题解决

    问题描述:本人装有双系统,一个是win7,另一个是ubuntu12.04LTS版本,所有的歌曲都在windows磁盘下KuGou目录中,这个时候,使用ubuntu的rhythmbox播放的歌曲的时候, ...