本站一下，网上有很多这样的特效的，推荐 懒人之家，里面特效蛮齐全的
不是很简单一两句话能说清楚地，需要HTML, CSS和javascript的配合。我大概说下做法，你需要自己写写试试看首先把你的div设置style为overflow hidden
然后在div里面再添加一个div，假设叫做imgcontainer，在里面存放所有图片，图片以float: left方式显示，每个图片的宽度你是知道的，这样图片的个数*每个图片的宽度（必要的话再加上图片之间的间隔）设置为imgcontainer的总宽度。然后把div的宽度设置为显示3个图片的宽度。这样就可以保证只显示3个图片，多余的图片看不到。
下面是我的一个例子，跟你的需求可能不完全一样，大概做下参考：
HTML片段
CSS部分.photolist_container {
margin: 0;
/*Firefox*/
width: -moz-calc(100% - 30px);
/*chrome safari*/
width: -webkit-calc(100% - 30px);
/*Standard */
width: calc(100% - 30px);
float: left;
height: 140px;
overflow: hidden;
}
ol.photolist {
background-color: black;
margin-left: 1px;
padding: 0;
list-style: none;
height: auto;
height: 125px;
li {
margin-left: -1px;
padding: 4px;
text-align:center;
border: 1px solid #FF6699;
width: 100px;
#photolist figure {
border: 1px solid #000000;
cursor: pointer;
.samplecontainer {
height: 100px;
text-align: center;
border: 0;
vertical-align: middle;
img {
vertical-align:middle;
Javascript部分function MovePhotoList(size) {
var photolist = document.getElementById("photolist");
var marginLeft = 1;
if (photolist.style.marginLeft != "")
marginLeft = parseInt(photolist.style.marginLeft);
marginLeft = marginLeft ◆ size;
if (marginLeft < (document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth))
{
marginLeft = document.getElementById("photolist_container").offsetWidth - photolist.offsetWidth;
document.getElementById("nav_thumbs_next").setAttribute("class", "disabled");
else
document.getElementById("nav_thumbs_next").setAttribute("class", "enable");
1)
marginLeft = 1;
document.getElementById("nav_thumbs_prev").setAttribute("class", "disabled");
document.getElementById("nav_thumbs_prev").setAttribute("class", "enable");
photolist.style.marginLeft = marginLeft ◆ "px";
function NavThumbsPrev() {
var nav_thumbs_prev = document.getElementById("nav_thumbs_prev");
if (nav_thumbs_prev.getAttribute("class") != "disabled") {
MovePhotoList(56);
function NavThumbsNext() {
var nav_thumbs_next = document.getElementById("nav_thumbs_next");
if (nav_thumbs_next.getAttribute("class") != "disabled") {
MovePhotoList(-56);
以上就是土嘎嘎小编大虾米为大家整理的js常用特效_js文字特效用于哪些场景相关主题介绍,如果您觉得小编更新的文章对您有所帮助，不要忘记讲本站分享给您身边的朋友哦！！