1日に1つのjqueryプラグイン-カスタムタイトル
カスタムタイトル
多くのフロントエンドスタイルの美化フレームワークはほとんどこの機能を持っているので、私はいくつかの効果についても考え、ロープロファイルバージョンの効果を理解しました。
効果は以下の通りです
コード部分
<!DOCTYPE html>
<html title="html">
<head>
<meta charset="utf-8">
<title>自定义标题</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
user-select: none;
}
#div{
border: 1px solid lightgray;
width: 95%;
margin: 20px auto;
height: 100px;
}
ul{
width: 95%;
margin: 0 auto;
}
ul li:hover{
background-color: lightgray;
}
.alert{
border: 1px solid white;
background-color: black;
color: white;
border-radius: 5px;
height: 30px;
padding: 5px;
display: inline-block;
position: fixed;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body title="body">
<div id="div" title="这是一个容器"></div>
<ul title="ul">
<li title="标签1">1</li>
<li title="标签2">2</li>
<li title="标签3">3</li>
<li title="标签4">4</li>
<li title="标签5">5</li>
</ul>
</body>
</html>
<script>
$(function(){
var $alert = $("<div class='alert'></div>");
$alert.appendTo("body");
$("*").mouseenter(function(e){
var str = $(this).attr("title");
if(str){
$(this).removeAttr("title");
$(this).attr("data-title",str);
}
var title = $(this).attr("data-title");
if(title){
$alert.text(title);
$alert.show();
$alert.stop().animate({
"top":e.clientY+$("body").scrollTop(),
"left":e.clientX-$("body").scrollLeft()
},200)
}
})
$("*").mouseleave(function(e){
var title = $(this).attr("data-title");
if(title){
$(this).attr("title",title);
$(this).removeAttr("data-title")
}
$alert.hide();
})
})
</script>
アイデアの説明
- とにかく、最初はタイトルの本来のプロンプト機能をブロックして、自分でプロンプトボックスを作ると思っていたのですが、長時間検索しても効果が見られませんでした。入力ラジオ。書きにくいです。ラベルをforに置き換えるようなものです。
- そのため、ブロックする方法が見つかりませんでした。とにかく、フローティングイベントがある場合は、タイトルをデータタイトルに直接移動し、マウスが移動して元に戻すのを待ちます。とにかく、壊れることなく問題ありません。構造、そして私はそれが必要です。タイトルがあるかどうかを判断することで、独自のプロンプトボックスを表示できます。
- 固定ポジショニングコンテナを作成して、マウスの移動距離に沿って実行するだけです。つまり、元のタイトルで応答速度を調整できることもわかっていますが、直接ブロックできないのはなぜですか。まだできないと思います。方法を見つける...
- 滑り落ちた