---本系列文章所用使用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. 工作总结_JS_1

    获取点击下的相对应的div: $('> div', this).show(); 本身同级下的相对应的div:   $('>div[name=vv]', $(this).siblings(& ...

  2. hadoop2.2编程：MRUnit测试

    引用地址:http://www.cnblogs.com/lucius/p/3442381.html examples: Overview This document explains how to w ...

  3. JPEG文件结构

    JPEG文件由八个部分组成,每个部分的标记字节为两个,首字节固定为:0xFF,当然,准许在其前面再填充多个0xFF,以最后一个为准.下面为各部分的名称和第二个标记字节的数值,用ultraedit的16 ...

  4. FLEX布局的一些问题和解决方法

    前言 露珠最近研究了一下flex的布局方式,发现项w3c推出的这套布局解决方案对于日益复杂的前端开发布局来说是确实是一利器,并且在不同的屏幕上实现了真正的响应式布局:不再单纯地依赖百分比和float的 ...

  5. 清晰易懂TCP通信原理解析（附demo、简易TCP通信库源码、解决沾包问题等）C#版

    目录 说明 TCP与UDP通信的特点 TCP中的沾包现象 自定义应用层协议 TCPLibrary通信库介绍 Demo演示 未完成功能 源码下载 说明 我前面博客中有多篇文章讲到了.NET中的网络编程, ...

  6. UWP开发之控件：用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  7. C#图片色彩的纠正-上

    WPF(C#)图片色彩的纠正-上 WPF(C#)图片色彩的纠正-下 前言 对图片进行色彩的纠正,其实与WPF是没有什么关系的,为什么标题又是“WPF(C#)图片色彩的纠正”呢,因为这些图片色彩的纠正功 ...

  8. MySQL Dll语句

    标签:MYSQL数据库/DBA/删除数据库表 概述 因为遇到一些事情,从发表上一篇文章到现在中间间隔了好几个月时间:在接下来的时间里会陆续发表关于mysql的一些文章,从基础到优化最后到管理,欢迎关注 ...

  9. [ASP.NET MVC 小牛之路]06 - 使用 Entity Framework

    在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码中手工造的数据.本文将演示如何在ASP.NET MVC中使用E ...

  10. 学习Cassandra的开源电子书（中英文版）

    学习Cassandra的开源电子书(中英文版)发布啦:http://teddymaef.github.io/learncassandra/ 之前发布了英文版,现在包含中文版了. 学习Cassandra ...