改造鼠标悬浮时超出隐藏的文字显示
之前看到一个demo，是关于span标签的超出隐藏在鼠标悬浮时文字慢慢显示，大致思路是控制span的 text-indent ，在鼠标悬浮时改变text-indent的值，通过过度效果实现将文字显示，但是发现了其中的一些不足，就是如果span标签文字显示的总时间都是相同的，也就是如果里边的文字过多的话，显示的速度回非常快，从而影响视觉效果。
下边是我改动后的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 224px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ebebeb;
border-radius: 4px;
position: absolute;
top: 50px;
left: 50px;
}
.pic{
width: 180px;
height: 180px;
background: #10a3e8;
}
.title{
margin-top: 10px;
font-size: 14px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h3 style="margin-left: 50px;margin-top: 20px">鼠标悬停文字上，可显示隐藏文字</h3>
<div class="box">
<div class="pic"></div>
<p class="title">
<span class="text">早安早安安你不是大海我不嫌听不到声音</span>
</p>
</div>
<div class="box" style="left: 300px">
<div class="pic"></div>
<p class="title">
<span class="text">早安早安安你是不是大海我不嫌听不到声音早安早安安你不是大海我不嫌听不到回声</span>
</p>
</div>
<script src="../jquery.min.js"></script>
<script>
$(function(){
$(".title").hover(function(){
var width_a = $(this).width();
var width_b = $(this).find(".text").width();
var indent_px = width_a - width_b;
if( width_a <= width_b ){
var index_length = indent_px * -1;
var fontsize = parseInt($(this).css("font-size"));
var num = parseInt(index_length/fontsize) * 0.4;
$(this).css({"transition-property":"all","transitionDuration":num + "s","animation-timing-function":"ease","text-indent":indent_px});
}
},function(){
$(this).css("text-indent","0");
});
});
</script>
</body>
