Maison > Article > interface Web > code h5 pour obtenir un effet loupe
code h5 pour obtenir un effet loupe
- 不言original
- 2018-07-24 10:21:273437parcourir
Le contenu partagé avec vous dans cet article concerne le code h5 pour obtenir l'effet loupe. Le contenu a une grande valeur de référence. J'espère qu'il pourra aider les amis dans le besoin.
L'effet de grossissement de l'œuvre d'art récemment réalisé par la société est quelque peu différent du précédent effet de loupe Taobao. Il doit être agrandi sur cette image
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
*{margin:0;padding:0}
.demo{width: 680px;height: 480px;position:relative;background:#333;margin:20px auto;overflow:hidden;}
.small_box{position:absolute;/*left:100px;*/top: 0;/*height: 480px;*/}
.big_box{width: 100px;height: 100px;border:1px solid #999;background:url(./images/cc.jpg) no-repeat;position:absolute;top: 0;left: 0;border-radius:50%;cursor:none;display:none;box-shadow: 0px 0px 8px #000;}
</style>
</head>
<body>
<p id="demo" class="demo">
<img id="small_box" class="small_box" src="images/cc.jpg"/>
<p id="big_box" class="big_box">
</p>
</p>
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
(function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
// 画原本的宽高
var origin_img = new Image();
origin_img.src = $('.small_box').attr('src');
var origin_w = origin_img.width;
var origin_h = origin_img.height;
// 计算画缩放的宽高
var now_h = 480;
var now_w = (origin_w/origin_h)*now_h;
$('.small_box').css({'left':(680 -now_w)/2+'px','height':now_h+'px'})
console.log($('.small_box').offset().left);
$('#demo')[0].onmousemove = function(ev){
var _event=ev||window.event;
var x = _event.pageX||_event.clientX,
y = _event.pageY||_event.clientY;
var left=x- $('#big_box').width()/2 - $('.demo').offset().left ;
var top=y - $('#big_box').width()/2 - $('.demo').offset().top ;
$('#big_box')[0].style.left = left+ 'px';
$('#big_box')[0].style.top = top + 'px';
var percentX = ($('.small_box').offset().left -x)/now_w;
var percentY = ($('.small_box').offset().top -y)/now_h;
$('.big_box').css({
'background-position-x':percentX*origin_w + $('#big_box').width()/2+'px',
'background-position-y':percentY*origin_h + $('#big_box').height()/2+'px'
})
}
// 滚轮滚动
$('.big_box').on('mousewheel',function(_event,delta){
var x = _event.pageX||_event.clientX,
y = _event.pageY||_event.clientY;
var left=x- $('#big_box').width()/2 - $('.demo').offset().left ;
var top=y - $('#big_box').width()/2 - $('.demo').offset().top ;
var targe_w = $(this).width();
var targe_h = $(this).height();
if (delta>0) {
targe_w += 3;
targe_h += 3;
$('#big_box')[0].style.left = left -3+ 'px';
$('#big_box')[0].style.top = top -3 + 'px';
}else{
targe_w -= 3;
targe_h -= 3;
$('#big_box')[0].style.left = left +3+ 'px';
$('#big_box')[0].style.top = top +3 + 'px';
}
$(this).width(targe_w);
$(this).height(targe_h);
})
//显示放大镜
$('.demo').on('mouseover',function(){
$('#big_box').show();
});
$('.demo').on('mouseout',function(){
$('#big_box').hide();
});
})
</script>
<br/> <br/> <br/> <br/> <br/>
</body>
</html>
Recommandations associées :
<.>La toile HTML5 réalise les effets spéciaux des feux d'artifice qui fleurissent
la toile réalise les effets de l'amour et de la pluie arc-en-ciel
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn