整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页截图是我们最常使用的一个功能，但是一般网页都会超过一屏的页面。所以按照常规的方法进行截屏操作的话，就不能将所有的内容进行截取操作，往往需要进行几次截屏并进行拼接才可以。其实借助一些软件工具，无需如此繁琐，只需一键即可截下长网页。
专业软件完成滚动截图
我们常见的截图功能之所以不能完成相应的操作，主要是因为它们缺乏一个名为“滚动截图”的独门绝技。所以我们要想解决这个问题的话，只需要安装拥有这类功能的截图软件就可以了。比如知名的免费截图软件PicPick，就包含这样一项独特的功能。
运行PicPick这款软件以后，我们在软件主界面的“截取屏幕”区域，就可以看到一个名为“滚动窗口”的选项，利用它就可以进行网页内容的滚动截图操作了。以后当我们需要进行网页滚动截图操作的时候，首先将浏览器滚动条移动到最上方，接下来点击PicPick软件窗口中的“滚动窗口”按钮（图1）。
然后截图软件就会自动隐藏窗口，我们现在将鼠标移动到浏览器上，它就会自动框选浏览器的边框。接下来我们只需要点击鼠标左键，网页里面的内容就会自动开始滚动，当滚动到网页最下方后就可以完成截图操作。截取完成的图片会自动载入到软件的编辑窗口里面，用户点击“文件”按钮以后，在弹出的菜单里面选择“保存”命令，这样就可以将截图进行保存操作了。
小提示：如果用户的电脑屏幕较小而不方便在软件屏幕操作的话，那么可以在系统托盘通过鼠标右键点击PicPick软件的图标，在弹出的菜单里面选择“截取屏幕”按钮中的命令就可以了（图2）。
滚动截图也能停止操作
虽然PicPick这款软件拥有我们需要的功能，但是我们在使用它的时候也会发现有两个问题。比如在截取某些浏览器网页窗口的时候，它并不会自动进行滚动操作，而是稍微滚动就会马上停住。出现这样的问题主要是这款软件对这个浏览器的内核不兼容造成的，用户只要切换到IE浏览器或者浏览器的兼容模式里面就可以解决了。而最主要的问题在于，它在进行滚动截图的时候无法进行停止操作，这样就会截取到大量没有意义的内容。所以要想解决这个问题，只能换一款其他的软件来解决。
现在我们运行FastStone Capture这款软件，这样在电脑屏幕上就会出现一个软件的工具条（图3）。
当我们要想进行网页滚动截图操作的时候，只需要点击工具条中的“捕获滚动窗口”按钮。接下来同样将鼠标移动到浏览器窗口的上方，接着当截图软件在浏览器的边框上显示出提示框以后，点击鼠标左键就可以开始滚动截图的操作了。当滚动截图的操作完成以后，截取的图片就会自动载入到软件的编辑窗口里面，然后点击工具栏中的“另存为”按钮就可以进行保存（图4）。如果在滚动截图的过程中想停止操作，那么只需要双击鼠标左键就可以了。
自带功能就能滚动截图
如果用户觉得第3方软件操作比较麻烦的话，那么利用某些浏览器自带的功能也可以完成截图操作，比如Opera浏览器 就自带有相应的功能。首先在浏览器里面打开要截图的网页，接着在左侧侧边栏中找到“快照”按钮。点击它以后就会在网页上出现一个选择框，通过鼠标拖拽调整选择框到合适的宽度（图5）。
接下来将鼠标移动到选择框的下方，当鼠标指针变成双箭头以后向下不停的拖动，从而实现了网页滚动的效果。当需要截图的内容全部框选以后，点击选择框中的“捕获”按钮，就可以将我们需要的所有信息进行截图操作。然后在弹出的“编辑快照”对话框中，点击“保存图片”按钮就可以完成图片的截图保存了（图6）。
利用功能扩展完成截图
由于浏览器的种类多种多样，所以并不是所有的用户都选择使用欧朋浏览器，所以这些用户要想进行截图操作的话就会很麻烦。比如我们知道谷歌浏览器开放了源代码，所以包括360浏览器、百度浏览器等在内都是在它的基础上拓展而来的。因此使用这些浏览器的用户只需要安装一款名为Fireshot的功能扩展，就可以解决相关的问题了。
当我们要想进行滚动截图的时候，只需要点击工具栏中的扩展图标，在弹出的菜单中选择“捕捉整个页面”命令。扩展就会自动对整个页面进行滚动操作，当滚动到最下方的时候就会完成截图操作。接下来会弹出一个新的网页窗口，在窗口中就可以预览到我们刚刚截取的图片内容。如果没有问题的话，点击窗口右侧的“另存为图片”按钮，就可以对这个图片进行保存操作了（图7）。当然我们利用其中的其他命令，还可以完成诸如“保存为PDF”、“复制到剪贴板”等其他的操作。
小提示：
如果用户使用的是火狐浏览器或者火狐内核的浏览器的话，那么安装一款名为Full Web Page Screenshots的功能扩展也可以解决相应的问题。它的操作方法与Fireshot扩展类似，这里我们就不再进行介绍了。
手机系统也能滚动截图
随着移动设备在日常生活中的占比越来越多，除了在电脑里面进行滚动截图操作以外，我们在手机里面也需要使用到这个操作。那么如何在手机系统里面完成滚动截图的操作呢？
我们首先按照常规的方法同时按住“音量减”和“电源”键，就可以完成对当前屏幕的截图操作。接下来我们就可以看到一个预览窗口，在预览窗口的工具栏里面有一个“滚动截屏”的按钮。点击这个按钮后就会开始进行滚动操作，当滚动到页面的最下方以后就会完成滚动并进行截图操作。用户在页面滚动的过程中点击屏幕，就会止 滚动停止并马上完成截图操作。
图1
图2
图3
图4
就爱UI - 分享UI设计的点点滴滴
天用js做的图片无缝滚动的效果，朋友们都说CSS3也可以实现，话说自己原来学的都是CSS2，主要用来网页静态布局，还真没想过用CSS3的动画属性。于是乎，花了一天时间在w3school上把关于CSS3动画的知识看了一遍，简单做了个图片滚动的效果，有些简陋，却也发现CSS3的功能果然强大，也有一些浏览器兼容性的问题（不过大家现在用的浏览器应该都能支持，别告诉我你还在用XP，那你真是超级怀旧派了，话说XP的确挺好）
这个是用来定义动画规则用的，在其中能够定义任意多样式任意多次数的动画规则，可以用百分比来规定变化发生的时间。比如0%，25%，50%，75%，100%，也可以用关键词“from”和“to”，等同于0%和100%。
0%是动画的开始，100%是动画的结束。一般来说，为了得到浏览器更好地支持，我们要始终定义0%和100%。
举个例子，我们在动画开始的时候，定义一个div元素的背景色为红色，动画到一半的时候，定义背景色为蓝色，动画结束的时候，背景色为黄色，怎么写这个动画规则？
@keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
一般来说，为了更好的适配浏览器，我们还要写几个作用于不同浏览器的规则
1、作用于Firefox浏览器
@-moz-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
2、作用于Safari和Chrome浏览器
@-webkit-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
3、作用于Opera浏览器
@-o-keyframes myfirst
{
0% {background: red;}
50% {background: blue;}
100% {background:yellow;}
}
1、animation-name:规定动画的名称
2、animation-duration:规定动画完成一个周期的时长
3、animation-timing-function:规定动画的曲线速度
4、animation-delay:规定动画开始的时间
5、animation-iteration-count:规定动画播放的次数
6、animation-direction:规定动画在下个周期是否反向播放
7、animation-play-state:规定动画是否正在运行或暂停
888、animation:简写属性，将上边1—6的属性在一个表达式中体现，可以减少N多工作量。
最重要的一点，动画规则只有捆绑到某个选择器上，动画才生效。意思一看都明白，关键是要多练习实际敲几次代码运行下效果，这里我就不再累赘了。
1、摆上我们用来演示的图片。
<body>
<p>图片无缝滚动</p>
<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>
</body>
2、加上CSS样式
*{margin:0; padding: 0;}
p{
margin:0 auto;
text-align: center;
font-size:30px;
}
#wrap{
width:610px;
height:130px;
border:1px solid #000;
position: relative;
margin:100px auto;
overflow: hidden;
}
#list{
position: absolute;
left:0;
top:0;
width:200%;
}
#list li{
width:120px;
height:130px;
border:1px solid red;
background: pink;
color:#fff;
text-align: center;
font-size:50px;
float:left;
list-style: none;
}
3、给ul加上动画效果。为了适配不同的浏览器，还要多添加几个animation属性
#list{
position: absolute;
left:0;
top:0;
width:200%;
animation:myfirst 8s linear infinite alternate;
-moz-animation:myfirst 8s linear infinite alternate;
-webkit-animation:myfirst 8s linear infinite alternate;
-o-animation:myfirst 8s linear infinite alternate;
}
好了，大家可以看一看具体效果咯。
用CSS3实现图片滚动确实很轻松，效果也挺不错。还是最开始我说的，前期我们暂不必纠结到底JS方法好还是CSS3方法好，只要能把要求的效果实现了就行，进步缘于一点一滴的实践与锻炼。
谨以此与大家共勉——一个奋斗在web开发路上的小白
*请认真填写需求信息，我们会在24小时内与您取得联系。
