效果:
html:
- <div class="zh-content zh-scrollbar">
- <img class="zh-plane-profile" src=""alt="">
- </div>
CSS:
- .zh-content{
- position: relative;
- }
- .zh-plane-profile{
- position: absolute;z-index: 2;height: 420%;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-90deg);
- }
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
JS:
- // 放大镜
- function magnifyGlass(bigImg) {
- // 放大镜元素
- var mgEleId = 'zh_magnify_glass',
- mgEleWth = 200,
- mgEleHgt = 200;
- var mgEle = $('<div id="'+mgEleId+'"></div>');
- mgEle.CSS({
- position: 'fixed',
- zIndex: 99999,
- width: mgEleWth,
- height: mgEleHgt,
- border: '1px solid #3C7FCD',
- borderRadius: '50%',
- transform: 'rotate(-90deg)',
- overflow: 'hidden'
- });
- // 大图
- var bigImgEle = $('<img src="'+bigImg+'"/>');
- bigImgEle.CSS({
- position: 'absolute',
- zIndex: 2,
- left: 0,
- top: 0
- });
- // 大图加载完成
- bigImgEle[0].onload = function() {
- var bigImgWth = this.width,
- bigImgHgt = this.height;
- mgEle.append(bigImgEle);
- // 事件
- $('.zh-plane-profile').mouseenter(function(e) {
- var imgWth = $(this).height(),
- imgHgt = $(this).width(),
- imgOffetLeft = $(this).offset().left,
- imgOffetTop = $(this).offset().top;
- mgEle.CSS({
- left: e.clientX-mgEleWth/2,
- top: e.clientY-mgEleHgt/2
- });
- if($('#'+mgEleId).size() == 0) {
- $('body').append(mgEle);
- }
- // 事件
- $(document).on('mousemove', function(e) {
- var endX = e.clientX,
- endY = e.clientY;
- if(endX<imgOffetLeft || endX>imgWth+imgOffetLeft || endY<imgOffetTop || endY>imgHgt+imgOffetTop) {
- $('#'+mgEleId).remove();
- $(document).off('mousemove');
- } else {
- var translateX = -(endX-imgOffetLeft)/imgWth*bigImgHgt+mgEleWth/2,
- translateY = -(bigImgWth-(endY-imgOffetTop)/imgHgt*bigImgWth-mgEleHgt/2);
- $('#'+mgEleId).CSS({
- left: endX-mgEleWth/2,
- top: endY-mgEleHgt/2
- });
- $('#'+mgEleId+'img').CSS({
- transform: 'translate('+translateY+'px,'+translateX+'px)'
- });
- }
- });
- });
- }
- }
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
调用:
magnifyGlass('大图 url');
原图:
由于原图是竖着的, 所以代码里有了针对竖图的处理
来源: http://www.jianshu.com/p/147da753af7c