博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery放大镜效果
阅读量:5965 次
发布时间:2019-06-19

本文共 2364 字,大约阅读时间需要 7 分钟。

修改网站前端,需要放大镜效果,试着写了个

效果如下:

图片大框初始样式:

 1 <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> 

添加放大区域框和放大效果框

1 picBox=$('.goods-imginfo-bimg-box');2 picBox.css('position','relative');3 picBox.append('
');4 picBox.append('
');

添加样式表

 1 $("head").append('<link rel="stylesheet" type="text/css" href="themes/od/css/mag.css">'); 

样式

1 @CHARSET "UTF-8";2 .mag-sbox{
position: absolute;border: 1px solid #fff;background-color: rgba(255,255,255,0.5);cursor: crosshair;z-index: 9;display: none;}3 .mag-box{
position: absolute;left: 100%;top:0;margin-left: 20px;border:1px solid #c8c8c8;width: 100%;height:100%;4 background-size: cover;background-color: #fff;z-index: 9;display: none;5 }

js

1 /* 2      *  放大镜效果  3      *  不改变前面的代码 4      *  添加放大镜效果 5      *  给 goods-imginfo-bimg-box; 6      * */ 7     $("head").append('
'); 8 picBox=$('.goods-imginfo-bimg-box'); 9 picBox.css('position','relative');10 picBox.append('
');11 picBox.append('
');12 msBox=$('.mag-sbox');13 mBox=$('.mag-box');14 bs=2; //倍数15 msBox.css({width:picBox.width()/2+'px',height:picBox.height()/2+'px'});16 mBox.css({'backgroundSize':bs*100+'%'});17 picBox.mousemove(function(e){18 mBox.css('backgroundImage',$(this).css('backgroundImage')); //给大图背景19 if(msBox.css('display')!='block'){ //鼠标放上去,出现范围框和效果框20 msBox.show();21 }22 if(mBox.css('display')!='block'){23 mBox.show();24 }25 /* 鼠标移动 */26 xleft=e.pageX-picBox.offset().left-msBox.width()/2;27 if(xleft<0){28 xleft=0;29 }else if(xleft>picBox.width()-msBox.width()){30 xleft=picBox.width()-msBox.width();31 }32 xtop=e.pageY-picBox.offset().top-msBox.height()/2;33 if(xtop<0){34 xtop=0;35 }else if(xtop>picBox.height()-msBox.height()){36 xtop=picBox.height()-msBox.height();37 }38 msBox.css({'left': xleft+'px','top': xtop+'px'});39 mBox.css({'backgroundPosition':-bs*xleft+'px '+-bs*xtop+'px'});40 });41 picBox.mouseout(function(){42 msBox.hide();43 mBox.hide();44 });

 

转载于:https://www.cnblogs.com/lixingbaophp/p/4736538.html

你可能感兴趣的文章
Python:pygame游戏编程之旅七(pygame基础知识讲解1)
查看>>
java B转换KB MB GB TB PB EB ZB
查看>>
通过SharpZipLib实现文件夹压缩以及解压
查看>>
20145209预备作业02
查看>>
精通CSS滤镜(filter)
查看>>
弄清楚高层到底是什么情况!
查看>>
HDU 4374 One hundred layer(单调队列DP)
查看>>
OPP Services Log
查看>>
JQuery增删改查
查看>>
android webview 全屏播放H5 (Playing HTML5 video on fullscreen in android webview)
查看>>
python的一些常用函数
查看>>
微信公众号教程(19)微信音乐播放器开发 中
查看>>
浏览器跨域问题
查看>>
部署WEB项目到服务器(二)安装tomcat到linux服务器(Ubuntu)详解
查看>>
SpringBoot之SpringBoot+Mybatis+Mysql+Maven整合
查看>>
SQLServer BI 学习笔记
查看>>
20160504-hibernate入门
查看>>
工作四周年
查看>>
sql定时自动备份(定时作业)
查看>>
Excel 2013 表格自用技巧
查看>>