个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我使用 W3.css 和 javascript 制作了一个简单的图片库。每个图像都是一张 w3-card，其下方有文本，占据屏幕的三分之一(使用 w3-third)。我得到了 javascript 来缩放图像并在单击时将其移动到前面(因此它是可见的)并使其在第二次单击时返回。问题是，一旦图像返回，单击它就没有任何作用。这是 gallery.html 的代码(没有标题，因为它与 gallery 无关)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Strona Główna</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="http://www.w3schools.com/lib/w3-theme-light-green.css">
<script type="text/javascript" src="js/closeAll.js"></script>
<!-- <link rel="Shortcut icon" href="../img/facin.ico" /> -->
</head>
<body>
<div class="w3-container w3-theme-l3">
<div class="w3-row">
<div class="w3-container w3-third">
<div class=" w3-container w3-card w3-sand">
<img
src="https://docs.gimp.org/en/images/filters/examples/color-taj-sample-colorize.jpg"
alt="img1" style="width: 100%;" onclick="onClick(this)">
<div class="w3-container">
<p>image 1</p>
</div>
</div>
</div>
<div class="w3-container w3-third w3-sand">
<div class="w3-container w3-card">
<img
src="http://www.techalliance.ca/wp-content/uploads/2011/11/sample-image-300X300.jpg"
alt="img2" style="width: 100%" onclick="onClick(this)">
<div class="w3-container">
<p>image 2</p>
</div>
</div>
</div>
<div class="w3-container w3-third">
<div class="w3-container w3-card w3-sand">
<img
src="http://www.freevectors.net/files/large/FloralFrameWithSampleText.jpg"
alt="img3" style="width: 100%" onclick="onClick(this);">
<div class="w3-container">
<p>img3</p>
</div>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-theme w3-text-black-opacity w3-small">
<br>
<div align="center">Copyright© killermenpl 2015. All rights
reserved</div>
<div class="w3-container w3-tiny">
Uses
<a href="http://www.w3schools.com/w3css/">W3.css</a>
</div>
</footer>
</div>
</body>
</html>
这是 galeria.js 的代码
function onClick(element) {
//alert("onclick");
// if (element.tagName != "img") {
// alert("not an image");
// return;
// }
if (!element.dataset.zoom) {
element.dataset.zoom = "0";
}
if (element.dataset.zoom == "0") {
element.dataset.zoom = "1";
element.dataset.zindex = element.style.zIndex;
element.style.position = "relative";
element.style.zIndex = 100;
element.style.width = "300%";
element.style.height = "300%";
//alert("zoom!");
} else {
//alert("zoom!");
element.style.zIndex = element.dataset.zindex;
element.dataset.zoom == "0";
element.style.width = "100%";
element.style.height = "100%";
}
}
这可能是每个人都应该知道的愚蠢的事情，但我对 javascript 和 css 都是新手。另外，我知道放大时图像不会与屏幕中间对齐。我稍后会添加它。
最佳答案
更改 else 语句中的这一行:
element.dataset.zoom == "0";
对此:
element.dataset.zoom = "0";
对于赋值，您应该使用“=”而不是“==”。
如果您希望图像在其中心原点缩放，您应该使用 CSS3 trasform:scale(x,y); 属性并缩放元素。例如:
element.style.transform = "scale(1.5,1.5)";
对于 webkit 浏览器:
element.style.webkitTransform = "scale(1.5,1.5)";
关于Javascript 画廊只能运行一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33854490/
25
4
0
有一条(相对)众所周知的 Perl 公理:“只有 Perl 可以解析 Perl”。我想知道 Perl 6 是否仍然如此？ 扩大讨论...考虑到 PyPy 最近的更新，我想到了这个问题。 Perl 独特
这是设置。在上一个问题中，我发现我可以通过子组件中的状态传递对象属性，然后使用 componentDidUpdate 获取该对象属性。在这种情况下，状态和属性都称为到达。 这是基本代码... expo
我运行的是 10.5.2 社区版。我已经标记了 源/主要/资源 作为源目录。我可以右键单击并“编译”某些文件，据我所知，这意味着 IDE 将文件复制到与发送类文件的“com.mydomain.pack
我是一名优秀的程序员,十分优秀！