相关疑难解决方法(0)

Javascript:在没有Jquery或插件的情况下放大鼠标悬停

几个星期以来我到处寻找这个,我根本无法找到一些东西来告诉我我做错了什么或者如何进行.目标是创建一个类似于亚马逊放大鼠标悬停的功能,用于具有小图像的产品.

我目前不知道如何继续,但我知道我将需要两个图像 - 一个在"放大"尺寸,一个在"缩小"尺寸.我没有使用Jquery - 我无法通过我的雇主的要求将它或任何插件安装到网站上.我基本上要求更难回答,我提前为此道歉.我必须从适度的划痕中做到这一点.警告:我是一名编程学生.想拿就拿吧.

我有HTML和CSS脚本,因为我们实际上没有IDE在这里我在codecademy的项目部分这样做,否则我必须完全实时编程.你可以在这里找到我的代码,但我也会在下面发布代码,因为该链接必然会有更改代码,因为它使用了程序保存.

注意:我原来是这样的,所以灰色的盒子跟着我的鼠标在相对中心.它移动时闪烁,但它正在工作.目前虽然决定不去,至少在我的工作电脑上.我没有在我的个人电脑上测试它.

编辑:代码正在我的Surface Pro 3上工作,虽然它确实跟随图像的鼠标(这是暂时的,我抓住了一些随机的东西).我不确定为什么代码不能在我的工作计算机上工作,尽管它可能是因为它是Macintosh OSX版本10.6.8 ...

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='style.css'/>
    <script src='script.js'></script>
</head>
<body>

<img id="imgZoom" onmousemove="zoomIn()" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn()"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS代码:

#imgZoom {
    height: 300;
}

#overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:20%;
    height:20%;
    padding: 25px;
    border: 5px solid gray;
    background-color: white;
    opacity:0.4;
    text-align:center;
    z-index: 1000;
}

Run Code Online (Sandbox Code Playgroud)

Javascript代码: