javascript - 类似于亚马逊的文本摘要的淡入淡出效果?

标签 javascript jquery html css

如果你看一本书,例如,在 Amazon 中,你会看到一个相当不错的(比省略号更直观)缩写文本摘要的效果: enter image description here

是否有完善的文档记录方法或有助于此类文本摘要的库?

最佳答案

使用以下规则隐藏额外内容:height: 200px;overflow: hidden;;您可以看到它们应用于 #outer_postBodyPS。但是淡入淡出效果是在#psGradient中处理的:

background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
background: -webkit-gradient(linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
background: -webkit-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -o-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -ms-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% ); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 ); 
background: linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );

不同的前缀规则(和过滤器)仅适用于特定于浏览器的实例。

您可以在 http://z-ecx.images-amazon.com/images/G/01/browser-scripts/dpMergedOverallCSS/dpMergedOverallCSS-12049068973.V1.css 中使用这些规则检查整个样式表。 .

关于javascript - 类似于亚马逊的文本摘要的淡入淡出效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14967758/

相关文章:

javascript - 浏览器和服务器 JavaScript 中的十六进制字符串输出不同

javascript - Raphael 设置元素的 attr

javascript - 删除 div 并使用按钮 onclick 替换

javascript - 如何使用切换按钮更改 colSpan 的值

javascript - 最小化或折叠 bootstrap 2.3.2 模态对话框?

javascript - 如何解决 HTML5 全屏模式下 Canvas 上鼠标指针的偏移问题?

javascript - 将属性后的 css 转换为 jquery

javascript - Jstree:使用独特插件时发出警报消息

javascript - Immutable.js 集包含重复值

jquery - 如何使用 JQuery 从 HTML 页面获取 img 标签中的所有图像和背景图像?