jQuery(非插件)制作商城放大镜效果

这个功能时很常见的功能,也很简单!

首先我们来看一看这个效果如下图:

功能分析:

①作为商城的放大镜, 我们需要注意的是, 准备的是两张图片.

一张图片是商品图[左图], 另一张图片是大图[其实就是被放大后暂时的图片];

②镜片, 在商品图上, 当鼠标放上去出现的"小镜片", 如图中的绿色透明部分.

我们需要知道, 且必须知道, 我们要解决的问题是:

1. 放在商品上, 小镜片出现, 鼠标移动, 小镜片跟随移动.[且不超过商品区域]

2. 右侧出现大图, 且大图移动.

3. 保证小镜片和右侧的展示区域框大小有一定关系.

设计思路:

首先要准备两张图片（一个是小的预览图，一个是很大的高清图）
然后写一个DIV，里面放一个IMG和一个DIV

然后给img绑定mousemove事件，在事件内写下如下实现的代码

首先计算出鼠标在这个img标签上的相对坐标，如果是在img的最左上边。坐标则为0,0
然后吧这个DIV内部的小DIV固定为100*100大小，然后再就是计算它的比例。
然后再把这个DIV的背景设置成那个大图，然后再用背景的绝对定位进行移动即可.

代码如下[没有精简的代码]:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>商城放大镜特效</title><style>*{padding:0;margin:0;}img {border:none;outline: none;display: block;margin:auto;}.big,.small{width:340px;height:255px;border:1px solid black;float:left;position: relative;}.big{/*大图,超出部分溢出隐藏*/width:200px;height:200px;overflow: hidden;display: none;margin-left: 5px;}.small .move{/*小镜片*/width:120px;height:120px;background-color: green;opacity:0.4;filter:alpha(opacity=40);position: absolute;z-index: 1;top:0;left:0;display: none;}.box{border:1px solid red;height:400px;width:800px;margin:auto;padding-top: 45px;padding-left: 45px;}.big img{width:800px;height:600px;position: absolute;top:0;left:0;}</style>
</head>
<body><div class="box"><div class="small"><img src="data:images/s.jpg" width="340" height="255" alt="" /><i class="move"></i></div><div class="big"><img src="data:images/b.jpg" width="800" height="600" alt="" /></div></div><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>$(function () {//1. 放在图片上出现小镜片//鼠标距离浏览器左边的距离//small距离浏览器左边的距离//小镜片的距离100/2var move = $(".move");var small = $(".small");var jw = move.width();//小镜片的宽度var jh = move.height();//小镜片的高度var sW = small.width();//展示框的宽var sH = small.height();//展示框的高var sL = small.offset().left;//small距离里浏览器左侧距离var sT = small.offset().top;//small距离浏览器顶部的距离var big = $(".big");var showImg = big.find('img');var bW = showImg.width();var bH = showImg.height();var mW = (bW/sW)*jw;var mH = (bH/sH)*jh;
            big.css({"width":mW,"height":mH});var multiple = (bW/sW);//右侧区域和小镜片的关系
            $(".small").bind("mousemove",function (e){move.show();big.show();var mL = e.pageX;//鼠标距离浏览器左侧距离var mT = e.pageY;//鼠标距离浏览器顶部的距离var left = mL-sL - (jw/2);var top = mT - sT - (jh/2);
                left = left<= 0 ? 0 : left;left = left>= (sW-jw) ? (sW-jw) : left;top = top <= 0 ? 0 : top;top = top >= (sH-jh) ? (sH-jh) : top;// console.log("left: "+left + "// top: "+top);
                move.css({"left":left,"top":top});showImg.css({"left":-left*multiple,"top":-top*multiple});//大图}).bind("mouseout",function () {move = $(".move").hide();big.hide();});});</script>
</body>
</html>

特别提示:

大图和小图之间的关系是倍数关系, 这样可以方便计算. 所以如果和前端配合时, 这一点有时容易被忽略掉.

转载于:https://www.cnblogs.com/Zell-Dinch/articles/4470653.html

jQuery(非插件)制作商城放大镜效果相关推荐

【jQuery】前端项目实践案例6——制作产品放大镜效果（仿京东淘宝图片效果）
使用jQuery制作产品放大镜效果实现效果: 使用jQuery制作产品放大镜效果实现原理: 通过设置图像的 CSS 属性( left 和 top ),来实现图像的移动. 使用jQuery制作产品放大镜 ...
基于jQuery日历插件制作日历
这篇文章主要介绍了基于jQuery日历插件制作日历的相关资料,需要的朋友可以参考下来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天 ...
jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
如何使用myFocus插件制作焦点图效果
焦点图分有:flash焦点图 js焦点图 css焦点图 jQ焦点图(其中jQ焦点图以代码量少,实现功能成为首选): myFocus是一款专注于焦点图制作的js插件: 使用步骤:点击下载--Dem ...
【看完想不会都难系列教程】 - （1）使用CSS3+JQuery easing 插件制作绚丽菜单
在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们 ...
unity17——布料插件制作旗子飘动效果
1找到插件,按照上图调整后,选择edit constraints 点选后会出现下图界面 2.按照上图中文翻译,调整画笔,刷选你需要的点.动点与不动点.最后点击播放运行查看效果.
jQuery SuperSlide插件制作72个种常用的网页特效
SuperSlide2.1 超级滑动门72个扩展效果我￥19买的,分享给大家希望大家学会感恩 "什么?20个基础效果+72个扩展效果,做到狗一样,才19?!太不值了,大爷我给你99!&q ...
非插件实现回复可见效果
介绍: 这个教程网上很多的,包括我也是从网上搬来的,但是网上的涉及文件太多,这里给大家推荐我修改的方法,希望能帮助到大家. 首先我们进入 / 网站根目录 /usr/themes/{主题名} ,然后按照 ...
13款jQuery图片放大镜效果代码
jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...

jQuery(非插件)制作商城放大镜效果

jQuery(非插件)制作商城放大镜效果相关推荐

最新文章

热门文章