基于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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
学习ExtJS accordion布局
Oct 08 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php获取参数的几种方法总结
2014/02/18 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
Javascript 实用小技巧
2010/04/07 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
在centos7中分布式部署pyspider
2017/05/03 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
用Python制作音乐海报
2021/01/26 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
成人大专生实习期的自我评价
2013/10/02 职场文书
预备党员党课思想汇报
2014/01/13 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
党的生日演讲稿
2014/09/10 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
cf战队宣传语
2015/07/13 职场文书
工作简历的自我评价
2019/05/16 职场文书
vue+iview实现手机号分段输入框
2022/03/25 Vue.js