工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 综合应用 > 正文

鼠标悬停判断超出容器的文字向左滚动的两种实现方法

发布时间:2019-10-17 23:28:02作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

先来说清楚我的情况,如下图,为了使页面更加美观也更好写响应式,我没有采用瀑布流形式,而是每个li都是固定大小,这么一来,标题高度固定,如果有超出标题容器的文字就得隐藏,但我又想让用户看到所有标题文字,这就想到悬停文字向左滚动了。

悬停文字向左滚动

html代码如下:

<ul>
  <li>
    <div class="total">
      <div class="thumb"><a href="#" target="_blank"><img src="images/slt.jpg"></a></div>
      <div class="trw">
        <h2><a href="#" target="_blank">北京花卉</a></h2>
        <p><span>5</span><span>2019-09-03</span><span>魏义齐</span></p>
      </div>
    </div>
  </li>
</ul>

解释一下:class="total"的div用于写响应式li为百分比时在li里居中的;class="thumb"为缩略图的盒子,一般图片会加个放大特效或者闪光特效,这个盒子就用来隐藏溢出的图片或添加伪类的;class="trw"为上图中的边框,li的宽度为232px,class="trw"的div宽度就是230px;h2是标题。

重要部分css样式如下(我没有写兼容):

ul li .total .trw {
	width: 230px;
	border: solid 1px #c6c4c4;
}
ul li .total .trw h2 {
	width: 220px;
	margin: auto;
	height: 30px;
	line-height: 30px;
	white-space: nowrap;/*禁止分行才有超出的文字*/
	overflow: hidden;/*隐藏超出文字*/
	position: relative;/*a元素定位参考*/
}
ul li .total .trw h2 a {
	color: #333;
	font-weight: normal;
}
ul li .total:hover .trw h2 a {
	color: #3B77B3;
	animation: title 2s;/*运动对象和运动时间*/
	animation-fill-mode: forwards;/*停留在最后一帧*/
	animation-timing-function: linear;/*匀速运动*/
}
@keyframes title {/*运动轨迹*/
 0% {
 right: -100%;
}
 100% {
 right: 0;
}
}

a要相对于h2定位h2就要写样式position: relative,那么a怎么写position:absolute呢?肯定不能全部都写,因为不是所有a元素的长度都会超出h2容器,这里需要用jquery做一个判断,如果a的宽度大于220px就给它加上position:absolut,如果a的宽度小于等于220px则不加position:absolut,如此动画就不会作用于没有position:absolut的a元素。

jQuery判断代码如下:

$(document).ready(function () {
	$(".total").hover(function () {
		var title = $(this).find(".trw h2 a").width();
		if (title > 220) {
			$(".trw h2 a").css("position", "absolute");
		} else {
			$(".trw h2 a").css("position", "static");
		}
	})
})

上面样式@keyframes中0%时right距离应该为负的a元素的长度减去h2容器的宽度,但是标题的长度是不固定的,所以a元素的长度也是未知的,所以right距离不能是具体的像素,索性就给个-100%吧,虽然效果并不是从文字截断的地方往左移(本案例中截断的文字是“见”,正常逻辑是从“见”字往左移),但也差不多。

这里预览案例,点这里测试代码。

另外一种就是jquery插件,插件的效果倒是很完美,但是引入了两个js文件,多了两个http请求,这不是我想要的,第一种方法的jquery代码完全可以放在网站通用的js文件里,不占用多余的http请求,并且做到了用css代码和极少的js实现效果。

插件预览:https://blog.weiyiqi.net/lookdoc/jquerytextroll/

插件下载:

jquerytextroll.rar
f2af117cf236fa46de062f91bbeffebf.rar (25.22 KB)

很多问题的解决都在于思路,就比如本文的动画,我一开始想到的就是纯css实现而不是借助jquery插件,这可能跟我经常做网站优化有关,想用css实现就想怎么用css实现,当你的基本功够扎实你脑子里就会有思路,跟着自己的思路走,问题解决了是非常有成就感的,本文案例尽管最终还是借助了jquery,但也只是一小段不得不用的。在本站的html+css栏目和综合应用栏目有几篇文章均基于少用插件、少写js的思路解决问题,特此我整理了一个tag,想提高自己html架构和css思维的朋友建议看看:html架构和css思维

本文标签html架构和css思维 ,您可以阅读与「html架构和css思维 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:网站特效之文字的淡入漂移下一篇:返回列表

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi