jQuery放大镜实现

一、插件介绍

今天在用到放大镜效果的时候，突然发现网站里没有放大镜的插件。于是总结了一下，放到这里。为自己，也为他人提供方便。jquery.imagezoom.js这款插件用途很简单，就是鼠标移过去，将图片放大。

二、插件作者及下载

插件作者及官网：很抱歉没有在各方面的资料中找到这款插件的介绍。
插件下载地址： http://www.ijquery.cn/js/imagezoom/jquery.imagezoom.js

三、参数

暂无

四、最简使用教程

最简DEMO演示：爱上JQuery致力于前端的开发设计！

最简DEMO下载：爱上JQuery致力于前端的开发设计！

1、HTML代码

<div class="box"><div class="tb-booth tb-pic tb-s310"><a href="images/01.jpg"><img src="data:images/01_mid.jpg" alt="美女" rel="images/01.jpg" class="jqzoom" /></a></div><ul class="tb-thumb" id="thumblist"><li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="data:images/01_small.jpg" mid="images/01_mid.jpg" big="images/01.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="data:images/02_small.jpg" mid="images/02_mid.jpg" big="images/02.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="data:images/03_small.jpg" mid="images/03_mid.jpg" big="images/03.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="data:images/04_small.jpg" mid="images/04_mid.jpg" big="images/04.jpg"></a></div></li><li><div class="tb-pic tb-s40"><a href="#"><img src="data:images/05_small.jpg" mid="images/05_mid.jpg" big="images/05.jpg"></a></div></li></ul>
</div>

2、JS代码

<script type="text/javascript">$(document).ready(function(){$(".jqzoom").imagezoom();$("#thumblist li a").click(function(){//增加点击的li的class:tb-selected，去掉其他的tb-selecte$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");//赋值属性$(".jqzoom").attr('src',$(this).find("img").attr("mid"));$(".jqzoom").attr('rel',$(this).find("img").attr("big"));});});
</script>

3、CSS代码

/* box */
.box{width:610px;margin:100px auto;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:310px;}
.tb-s310, .tb-s310 img{max-height:310px;max-width:310px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:40px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}

转载于:https://www.cnblogs.com/linjiaxin/p/5961945.html

jQuery放大镜实现相关推荐

html放大镜移动,支持移动手机的jquery放大镜插件enlarge.js
enlarge.js是一款支持移动手机的响应式jquery放大镜插件.该jquery放大镜插件在移动手机上通过长按图片,可以调出放大镜,对图片进行放大查看.它的特点还有: 支持内部放大镜和外部放大镜模 ...
jquery zoom jquery放大镜特效
这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问: http://www.mind-projects.i ...
JQuery放大镜效果
在网上找了些实现放大镜效果的方法,感觉这个方法符合我的要求就摘过来了,非原创在一些电子商务或商品展示网上,为了更好的显示商品,一般都会添加放大镜的效果. 如图:(当把鼠标放到小图片上,右边会自动的出 ...
jQuery放大镜实现图片的放大
@TOC使用jQuery实现简单的图片放大操作一张图片的放大 <!DOCTYPE html> <html lang="en"> <head>& ...
JQuery放大镜效果实现实例
实现效果演示: 鼠标移入左侧缩略图时,小盒子和右边大图显示,并且小盒子跟随鼠标移动,右侧大图出现放大效果. 实现步骤: HTML部分: 要实现放大镜效果,只需要一个简单的布局,左右各一个盒子,左侧放缩 ...
jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用一.总结一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
很漂亮实用的jQuery实例123个
很漂亮实用的jQuery实例, http://download.csdn.net/detail/haoyoul/4637329 1. 2款jQuery图片自动切换常用广告代码 2. jquery+cs ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
java图片放大插件_javashop 发布开源放大镜HiZoom插件
HiZoom HiZoom: 一个简单,易用,轻量(3KB)的jQuery放大镜插件. 特性简单:文档详细清楚,直接上手轻量: 压缩后的文件仅仅3KB,是 MagicZoom 插件的 1/24 兼 ...