基于jquery实现放大镜效果
更新时间：2015年08月17日 17:36:31 投稿：mrr
大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下
各大商城详细页面产品图片特效展示，鼠标滑过小图显示中图，鼠标滑过中图显示大图展示，jquery放大镜效果图片类似图片放大镜展示，提高用户体验设计，jquery 图片放大镜效果是典型的一款图片特效展示。
效果图如下：
图片大框初始样式：
<div class="goods-imginfo-bimg-box" style="background-image: url(http://www.od.my/images/201507/thumb_img/142_thumb_P_1435792664520.jpg); position: relative;"></div>
添加放大区域框和放大效果框
picBox=$('.goods-imginfo-bimg-box');
picBox.css('position','relative');
picBox.append('<div class="mag-sbox"></div>');
picBox.append('<div class="mag-box"></div>');
添加样式表
$("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');
样式
@CHARSET "UTF-";
.mag-sbox{position: absolute;border: px solid #fff;background-color: rgba(,,,.);cursor: crosshair;z-index: ;display: none;}
.mag-box{position: absolute;left: %;top:;margin-left: px;border:px solid #ccc;width: %;height:%;
background-size: cover;background-color: #fff;z-index: ;display: none;
}
js
/*
* 放大镜效果
* 不改变前面的代码
* 添加放大镜效果
* 给 goods-imginfo-bimg-box；
* */
$("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">');
picBox=$('.goods-imginfo-bimg-box');
picBox.css('position','relative');
picBox.append('<div class="mag-sbox"></div>');
picBox.append('<div class="mag-box"></div>');
msBox=$('.mag-sbox');
mBox=$('.mag-box');
bs=; //倍数
msBox.css({width:picBox.width()/+'px',height:picBox.height()/+'px'});
mBox.css({'backgroundSize':bs*+'%'});
picBox.mousemove(function(e){
mBox.css('backgroundImage',$(this).css('backgroundImage')); //给大图背景
if(msBox.css('display')!='block'){ //鼠标放上去，出现范围框和效果框
msBox.show();
}
if(mBox.css('display')!='block'){
mBox.show();
}
/* 鼠标移动 */
xleft=e.pageX-picBox.offset().left-msBox.width()/;
if(xleft<){
xleft=;
}else if(xleft>picBox.width()-msBox.width()){
xleft=picBox.width()-msBox.width();
}
xtop=e.pageY-picBox.offset().top-msBox.height()/;
if(xtop<){
xtop=;
}else if(xtop>picBox.height()-msBox.height()){
xtop=picBox.height()-msBox.height();
}
msBox.css({'left': xleft+'px','top': xtop+'px'});
mBox.css({'backgroundPosition':-bs*xleft+'px '+-bs*xtop+'px'});
});
picBox.mouseout(function(){
msBox.hide();
mBox.hide();
});
以上代码就是基于jquery实现放大镜效果，希望大家喜欢。
相关文章
jQuery操作input type=radio的实现代码，需要的朋友可以参考下2012-06-06
这篇文章主要介绍了jQuery禁用键盘后退、屏蔽F5刷新、禁用右键单击功能等快捷方法，感兴趣的小伙伴们可以参考一下2016-01-01
这篇文章主要介绍了ajax的分页查询示例（不刷新页面），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要为大家详细介绍了Jquery实现异步上传文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
jquery获取table中的某行全部td的内容方法，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了jQuery设置和移除文本框默认值的方法,实例分析了jQuery操作文本框的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了基于jquery实现左右上下移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
这篇文章主要介绍了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果,涉及jquery.autoComplete.js插件的使用,可实现输入框内容自动补全的功能,附带了完整的demo源码供读者下载参考,需要的朋友可以参考下2016-09-09
jquery (show,fadeOut,Animate)简单效果
jquery (show,fadeOut,Animate)简单效果,需要的朋友可以参考下。2009-11-11
jQuery里filter()函数与find()函数用法分析
这篇文章主要介绍了jQuery里filter()函数与find()函数用法,实例对比分析了filter()函数与find()函数的功能与相关使用技巧,需要的朋友可以参考下2015-06-06
最新评论