基于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中window.open全屏命令解析及使用示例
Dec 11 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
原生JS实现京东查看商品点击放大
Dec 21 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
php实现可逆加密的方法
2015/08/11 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue生命周期的探索
2019/04/03 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python3.x中自定义比较函数
2015/04/24 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python猜数字算法题详解
2020/03/01 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
生产厂厂长岗位职责
2013/12/25 职场文书
教师岗位职责范本
2013/12/29 职场文书
销售主管的自我评价分享
2014/01/03 职场文书
反邪教警示教育方案
2014/05/13 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
新课程改革心得体会
2016/01/22 职场文书