基于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 相关文章推荐
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
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 删除cookie方法详解
2014/12/01 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
学习PHP session的传递方式
2016/06/15 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
实现vuex原理的示例
2020/10/21 Javascript
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
pandas string转dataframe的方法
2018/04/11 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
读书之星事迹材料
2014/05/12 职场文书
运动会宣传口号
2014/06/09 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS