---本系列文章所用使用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. {CSDN}{英雄会}{反相互}

    思路: 给定一个字符串,求两个不重叠的字串,他们翻转互补.其中一个字符串可以是删掉最多两个字符的原字符串子串. 动态规划,由于可以对子串进行删除操作,我首先想到了LCS问题,但需要枚举所有的长度,这样 ...

  2. AsyncTask的学习

    具体的用法请看我之前的一篇随笔,用php+mysql+json实现用户反馈. AsyncTask的目标是为你的线程提供管理服务. AsyncTask的执行分为四个步骤,每一步都对应一个回调方法,这些方 ...

  3. TOJ3650 Legal or Not

    Legal or Not   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByte Total Submit: 41   ...

  4. Hrbust1328 相等的最小公倍数 (筛素数,素因子分解)

    本文出自:http://blog.csdn.net/svitter/ 题意: 求解An 与 An-1是否相等. n分为两个情况-- 1.n为素数, 2.n为合数. =  =好像说了个废话..素数的时候 ...

  5. [Codeforces Round #237 (Div. 2)] A. Valera and X

    A. Valera and X time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  6. 洛谷-语文成绩-[有奖]洛谷5月月赛:kkksc03的三大神器

    题目背景 Background语文考试结束了,成绩还是一如既往地有问题. 题目描述 Description语文老师总是写错成绩,所以当她修改成绩的时候,总是累得不行.她总是要一遍遍地给某些同学增加分数 ...

  7. 数据源从druid迁移到HikariCP

    最近正好在做新项目,使用的是druid数据源,也真是巧,有朋友建议我使用HikariCP这个数据源,可以说是牛的一笔,速度快的飞起,性能极高! 要比druid不知道好多少倍,druid其实在某些情况下 ...

  8. VBA:Excel使用SQL进行查询

    Sub Query() Dim Conn As Object, Rst As Object Dim strConn As String, strSQL As String Dim i As Integ ...

  9. 1.1(Spring学习笔记)Spring-事务基础

    一.Spring 事务 Spring提供对事务支持的核心包是spring-tx-4.3.6.RELEASE包. 该包类有三个核心接口,提供对事务的支持: 1.1PlatformTransactionM ...

  10. Java之美[从菜鸟到高手演变]之字符串

    一.String 1.String简介 初始化: 一般由String声明的字符串,长度是不可变的,这也是它与StringBuffer和StringBuilder最直观的一个区别.一般初始化方式:Str ...