基于jquery实现放大镜效果


Posted in Javascript onAugust 17, 2015

各大商城详细页面产品图片特效展示,鼠标滑过小图显示中图,鼠标滑过中图显示大图展示,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实现放大镜效果,希望大家喜欢。

Javascript 相关文章推荐
一起来写段JS drag拖动代码
Dec 09 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
Jun 13 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
Jan 11 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
vue实现菜单切换功能
May 08 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 #Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 #Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 #Javascript
js实现表单Radio切换效果的方法
Aug 17 #Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 #Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 #Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
ktv好的活动方案
2014/08/15 职场文书
交通事故和解协议书
2014/09/25 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
通知格式
2015/04/27 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL