點擊背景字體顯示漂浮效果
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>點擊背景字體漂浮效果</title>
</head>
<style type="text/css" media="screen">
.on {border: 2px solid #ffd350;}
.on span{
content: " ";
display: inline-block;
width: 0;
height: 0;
border: 10px solid transparent;
border-right: 10px solid #ffd350;
position: absolute;
top: 40%;
left: -22px;
}
</style>
<body class="bo">
<ul>
<li class="on"><span></span><a href="">阿薩實打實阿斯達所</a></li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
<li>12312313</li>
</ul>
</body>
</html>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8" ></script>
<script>
var a_idx = 0;
$('.bo').on('click', function(e) {
var a = new Array("帥氣", "好人","帥哥","風騷","美女");
var n = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
n.css({
"z-index":"999999999",
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append(n);
n.animate({
"top": y - 180,
"opacity": 0
}, 1500, function() {
n.remove()
});
});
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur