亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

鼠標(biāo)移上放大效果

原創(chuàng) 2019-04-17 12:02:40 236
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link href="static/css/style3.css" rel="stylesheet" type="text/css">

<link href="shortcut icon" href="static/images/logo1.png" type="image/x-icon" />

<link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<link href="https://lib.baomitu.com/animate.css/3.7.0/animate.css" rel="stylesheet">

<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

$(function(){

$('#big').hide();

$('#nomal').mouseover(function(){

$('#show').show();

$('#big').show();

$(this).mousemove(function(yd){

$('#show').css({

'left':yd.pageX-$('#show').width()/2,

'top':yd.pageY-$('#show').height()/2

})

})

$('#nomal').mousemove(function(e){

var x=e.clientX;

var y=e.clientY;


var dx=$('#nomal').offset().left;

var dy=$('#nomal').offset().top;

var sx=x-dx;

var sy=y-dy;


var mw=$('#show').width()/2;

var mh=$('#show').height()/2;


$('#show').css({left:sx-mw+'px',top:sy-mh+'px'});


var lw=$('#show').position().left;

var lh=$('#show').position().top;


var maxW=('#nomal').width()-$('#show').width();

var maxH=('#nomal').height()-$('#show').height();


if(lw<=0){

$('#show').css('left','0px');

}

if(lw>=maxW){

$('#show').css('left',maxW+'px');

}

if(lh<=0){

$('#show').css('top','0px');

}

if(lh>=maxH){

$('#show').css('left',maxH+'px');

}

var lw=$('#show').position().left;

var lh=$('#show').position().top;


var newX=lw*3;

var newY=lh*3;

$('#big').find('img').css({

'left':-newX+'px',

'top':newY+'px'

})

})

})

$('#nomal').mouseleave(function(){

$('#show').hide();

$('#big').hide();

})

})

</script>

<title>放大效果</title>

</head>

<body>

<div id="nomal">

<img src="/static/images/1.jpg">

<div id="show"></div>

</div>

<div id="big">

<img src="/static/images/1.jpg">

</div>

</body>


</html>


批改老師:查無此人批改時(shí)間:2019-04-17 13:59:03
老師總結(jié):完成的不錯(cuò),還是你的作業(yè)吧。css我沒看到。下次可以貼出來看下。繼續(xù)加油。

發(fā)布手記

熱門詞條