js实现仿京东放大镜效果

Posted 2022-03-08 老张在线敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现仿京东放大镜效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title>放大镜</title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    *
        margin: 0px;
        padding: 0px;
    
    body
		width: 1400px;
        margin:40px auto;
    
    #small
        width: 900px;
        height: 500px;
        border:1px solid #eee;
        border-radius: 4px;
        position: relative;
    
    
    #small img
        width: 100%;
        height: 100%;
    
    
    div    
        float: left;
        margin-right: 10px;
    
    
    #big
        width: 400px;
        height: 250px;
        overflow: hidden;
        position: relative;
		top:20px;
        border:1px solid #eee;
        border-radius: 4px;
        display: none;
    
    #big img
		width: 600%;
		height: 600%;
	
    #datu
        position: absolute;
        left: 0px;
        top:0px;
    
    h1
		display: block;
	
    #move
        width: 100px;
        height: 100px;
        background:#000;
        opacity: .4;
        position: absolute;
        display: none;
        left: 0px;
        top: 0px;
      
</style>

<body>
    <div id="small">
        <img src="./img/1.jpg">
        <p id="move"></p>
    </div>
	<h1>放大窗口</h1>
    <div id="big">
        <img src="./img/1.jpg" id="datu">
    </div>
</body>
<script type="text/javascript">
    var move = document.getElementById('move');    
    var small = document.getElementById('small');
    var big = document.getElementById('big');
    var datu = document.getElementById('datu');
    small.onmousemove = function(event)
        event = event || window.event;
        this.style.cursor = 'move';
        // 计算移动小方块的left值
        var move_left = event.clientX - this.offsetLeft - move.offsetWidth/2;
        // 计算移动小方块的top值
        var move_top = event.clientY - this.offsetTop - move.offsetHeight/2;
        // 设置小方块不允许超出左边边界
        move_left = move_left < 0 ? 0 : move_left;
		//设置小方块不允许超出右边边界			计算方式是：盒子宽度-移动块的宽度=右边边界
        move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;
		// 跟左右设置一样
        move_top = move_top < 0 ? 0 : move_top;
        move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;
        // 修改移动小方块的left跟top值
        move.style.left = move_left + 'px';
        move.style.top = move_top + 'px';
        var x = move_left/(small.offsetWidth-move.offsetWidth) * (datu.offsetWidth-big.offsetWidth);
        var y = move_top/(small.offsetHeight-move.offsetHeight) * (datu.offsetHeight-big.offsetHeight);
        // 修改图片定位
        datu.style.left = -x + 'px';
        datu.style.top = -y + 'px';
    
	// 原图移入事件
    small.onmouseover = function()
        move.style.display = 'block';
        big.style.display = 'block';
    
	// 原图移出事件
    small.onmouseout = function()
        move.style.display = 'none';
        big.style.display = 'none';
</script>
</html>

以上是关于js实现仿京东放大镜效果的主要内容，如果未能解决你的问题，请参考以下文章