gpt4 book ai didi

javascript - 如何在 HTML 和 jQuery 中跟踪这样的东西?

转载 作者:太空宇宙 更新时间:2023-11-04 16:00:21 27 4
gpt4 key购买 nike

据推测,游戏正在描绘一条线(垂直、水平、对 Angular 线)。

 $("li.card").mouseover( function() {	
$('#'+this.id).addClass('permahover');
});
body{
margin: 0 50px;
background-color: #ddd;
}

li.card{
height: 50px;
width: 50px;
background-color:white;
border:1px solid #ddd;
text-align: center;
font-size:25px;
}

li.permahover{
background-color: red;
}
<html>
<head>
<title>Shetch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
<ul style="list-style:none">
<li class="card" id="p1">I</li>
<li class="card" id="p2">I</li>
<li class="card" id="p3">I</li>
<li class="card" id="p4">I</li>

</ul>

</div>
</body>

</html>

这就像素描或描写字母“I”。它与悬停一起工作,尝试从上到下悬停它,这样你就可以解决我的问题。

我需要的是,通过鼠标点击或鼠标拖拽。就像我单击底部的第一个框一样。

最佳答案

我似乎明白了这个程序的目的,是帮助 children 学习轨迹字母还是使用鼠标的任何东西?

看看这是否是您要找的,不过与 ochi 的方法有点相同。

$(function() {
var gridsize = 10;
var count;
var draw = false;

for (x = 1; x <= gridsize; x++) {
count = 0;
for (y = 1; y <= gridsize; y++) {
count++;
$("#grid-container").append('<div id="' + x + '-' + y + '" class="gridtile"></div>');
}
$("#grid-container").append('<br />');
}

$("#grid-container").on('mousedown', function() {
draw = true;
});

$("#grid-container").on('mouseup', function() {
draw = false;
});

$("div.gridtile").mouseover(function() {
if(draw){
$("#" + this.id).addClass("selected");
}
});


});
.gridtile {
background-color: #ccc;
height: 20px;
width: 20px;
border: 1px solid grey;
margin-left: 3px;
display: inline-block;
font-size: 11px;
opacity: 0.5;
}

.selected {
background-color: red;
opacity: 1;
}

#letter {
width: 250px;
font-size: 17em;
position: absolute;
text-align: center;
font-family: "Lucida Console";
z-index: -1;
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid-container">
<div id="letter">I</div>
</div>

关于javascript - 如何在 HTML 和 jQuery 中跟踪这样的东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42150444/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com