Kit*_*pup 15 html javascript css zoom mouseover
几个星期以来我到处寻找这个,我根本无法找到一些东西来告诉我我做错了什么或者如何进行.目标是创建一个类似于亚马逊放大鼠标悬停的功能,用于具有小图像的产品.
我目前不知道如何继续,但我知道我将需要两个图像 - 一个在"放大"尺寸,一个在"缩小"尺寸.我没有使用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>
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;
}
Javascript代码:
function zoomIn()
{
var element = document.getElementById("overlay");
element.style.visibility = "visible";
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
element.style.top = y - 80;
element.style.left = x - 80;
}
function zoomOut()
{
var element = document.getElementById("overlay");
element.style.visibility = "hidden";
}
CY5*_*CY5 35
你可以通过在鼠标移动背景位置鼠标移动DEMO上播放背景位置来实现
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}#overlay {
border: 1px solid black;
width: 200px;
height: 200px;
display: inline-block;
background-image: url('http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg');
background-repeat: no-repeat;
}<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg">
<div id="overlay" onmousemove="zoomIn(event)"></div>#imgZoom {
height: 300;
}
img#imgZoom:hover {
position: relative;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
z-index: 1000;
}
您也可以添加此效果以获得很酷的过渡效果：
* {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
*此外，您不仅可以将相同的逻辑应用于图像，而且还可以将其应用于div。