【jQuery小实例】js 插件 查看图片
---本系列文章所用使用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 插件 查看图片的更多相关文章
- Viewer.js插件浏览图片
https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- 通过jquery.transit.min.js插件,实现图片的移动
首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...
- 【jQuery小实例】---3 凤凰网首页图片动态效果
---本系列文章所用使用js均可在本博客文件中找到 本页面实现类似于凤凰网首页,鼠标点击新闻,可以在div中显示新闻图片,点击军事显示军事图片的效果.采用的思路是:鼠标悬浮,显示当前div中的内容(图 ...
- jQuery 小知识点(插件)
1.jQuery插件小知识点: 估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便: $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例 ...
- jQuery 关于ajaxfileupload.js插件的逐步解析(ajaxfileupload.js第二弹)
如果你看了上一篇<ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)>的话,应该就知道我是逼不得已要认真学 ...
- 使用jquery的lazy loader插件实现图片的延迟加载
当网站上有大量图片要展示的话,如果一次把所有的图片都加载出来的话,这势必会影响网站的加载速度,给用户带来比较差的体验.通过使用jquery的lazy loader插件可以实现图片的延迟加载,当网页比较 ...
- JSON对象配合jquery.tmpl.min.js插件,手动攒出一个table
jquery.tmpl.min.js 首先下载这个插件 1.绑定json那头的键 //TemplateDDMX 这个是这段JS的ID,这个必须写!!!!!! //${}为json的键的值,必须要填写正 ...
- web下c#用jquery.tmpl.min.js插件实现分页查询_yginuo
背景:webform或者mvc下实现插件快速分页 ps:我这里用的mvc开发的,数据库连接.用的ADO.NET实体数据模型 此案例下载地址(内含需要用到的一个插件与数据库):http://downlo ...
随机推荐
- THINKPHP之连接数据库(全局配置)
- javascript 原型及原型链的初步理解
最近折腾了好久,终于是把js里面的原型和原型链做了个初步的理解: 在这里,我打个比喻: 我(child),我妈constructor(构造函数)生了我:别人问我老妈跟谁生的我,于是此时我妈会指向我爸爸 ...
- form data和request payload的区别
HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...
- Struts2中method={1}
<action name="Person_*" class="com.action.PersonAction" method="{1}" ...
- HDU1039-Easier Done Than Said?(字符串处理)
一,题意: 判断三个条件 1:有元音字母 2:不能三个连续元音或辅音 3:不能连续两个相同的字母,除非ee或oo二,思路 写函数一个条件一个条件去判断 #include<iostream> ...
- .NET Core中遇到奇怪的线程死锁问题:内存与线程数不停地增长
一个 asp.net core 站点,之前运行在Linux 服务器上,运行一段时间后有时站点会挂掉,在日志中记录很多“EMFILE too many open files”的错误: Microsoft ...
- 送干货,实用内联gulp插件——gulp-embed
现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...
- python自动化测试(3)- 自动化框架及工具
python自动化测试(3) 自动化框架及工具 1 概述 手续的关于测试的方法论,都是建立在之前的文章里面提到的观点: 功能测试不建议做自动化 接口测试性价比最高 接口测试可以做自动化 后面所谈到 ...
- 探索c#之尾递归编译器优化
阅读目录: 递归运用 尾递归优化 编译器优化 递归运用 一个函数直接或间接的调用自身,这个函数即可叫做递归函数. 递归主要功能是把问题转换成较小规模的子问题,以子问题的解去逐渐逼近最终结果. 递归最重 ...
- 搭建 SVN 服务器
安装.启动 SVN 服务器 在 Windows 下,可以使用以下命令将 SVN 服务注册到 windows 服务中去: sc create svnserver binPath= "drive ...