//图片滚动展示 Start
var counts = 4
//大图//
img1 = new Image()
img1.src = 'images/1.jpg'
img2 = new Image()
img2.src = 'images/2.jpg'
img3 = new Image()
img3.src = 'images/3.jpg'
img4 = new Image()
img4.src = 'images/4.jpg'
var smallImg = new Array()
//小图
smallImg[0] = 'images/index_adb1.gif'
smallImg[1] = 'images/index_adb2.gif'
smallImg[2] = 'images/index_adb3.gif'
smallImg[3] = 'images/index_adb4.gif'
//链接地址
url1 = new Image()
url1.src = ' http://www.baidu.com'
url2 = new Image()
url2.src = ' http://www.qzxtg.com'
url3 = new Image()
url3.src = ' http://www.soso.com'
url4=new Image()
url4.src=' http://www.sina.com.cn'
//alt值
alt1 = new Image()
alt1.alt = ''
alt2 = new Image()
alt2.alt = ''
alt3 = new Image()
alt3.alt = ' '
alt4 = new Image()
alt4.alt=''
////欢迎来到标准之路.
var nn = 1
var key = 0
function change_img() {
if (key == 0) {
key = 1
} else if (document.all) {
document.getElementById("pic").filters[0].Apply()
document.getElementById("pic").filters[0].Play(duration = 2)
}
eval('document.getElementById("pic").src=img' + nn + '.src')
eval('document.getElementById("url").href=url' + nn + '.src')
eval('document.getElementById("pic").alt=alt' + nn + '.alt')
if (nn == 1) {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
} else {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
}
for ( var i = 1i <= countsi++) {
document.getElementById("xxjdjj" + i).className = 'axx'
}
document.getElementById("xxjdjj" + nn).className = 'bxx'
nn++
if (nn >counts) {
nn = 1
}
tt = setTimeout('change_img()', 7000)
}
function changeimg(n) {
nn = n
window.clearInterval(tt)
change_img()
}
function imageshow() {
document.write('<div class="picshow_main">')
document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>')
document.write('<div class="picshow_change">')
for ( var i = 0i <countsi++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ')" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>')
}
document.write('</div></div>')
change_img()
}
//图片滚动展示 End
</script>
<script language="javascript" type="text/javascript">
imageshow()
</script>
js如何做动画效果直接用jquery,网上有很多开源代码,容易上手。
ps如何做动画效果通过:窗口-动画,调处动画面板,剩下的就和flash一样了 不过ps的功能要少很多
窗口——时间轴——然后选择你的图片——在设置时间——动画效果
fireworks如何做动画效果?
导出 格式为GIF动画格式。但是前提是你里面已经做好了帧数 就一帧那是怎么也不会动的啦 呵呵``````
sketchup如何做出动画效果?分页做你想要看的地方,然后连续播放就是动画了,就是一帧一帧的图片
用PS如何做图片动画效果?PS有个动画的窗口,你点出来
以两个图层为例,动画效果为:天啊
第一图层有个:天
第二图层有个:啊
动画的第一帧把图层2关闭(不显示)
选中第一帧,复制一帧
点第二帧,把图层2打开(显示)
在每帧下面选择时间
确定第一帧是“天”,第二帧是“啊”。不是的话,再调整。
然后播放
一个小动画就产生了
保存是:ctrl+alt+shift+s
存为GIF格式就OK了
QQ场景如何做动画效果QQ场景制作方法
QQ场景融图片、音乐于一体,是一种传达情感、增加情趣、陶冶情操的良好载体。不少朋友喜欢我制作的场景,并且要我介绍制作方法。为满足大家的要求,我编拟了较为详细的制作方案,请大家据此去实践。
一、准备
第1步:下载QQ场景编辑器。下载地址:im.qq./p/scene_editor,下载完毕后安装。
第2步:将图片素材(*.jpg或*.gif格式)、音乐素材(*.mp3或*.wav)放于自己电脑指定的文件夹内。
二、制作
第3步:双击QQ场景编辑器程序,打开“QQ场景编辑器”界面。
第4步:随后出现一大一小的两个程序界面,小界面的名字是“QQ场景编辑器”,点这个界面上的“确定”。
第5步:在大界面“新场景——QQ场景编辑器”的右边,有“场景属性”,将名称“新场景”,改为你想取的场景名,比如“祝你平安”等等。至于下面的作者信息,可填可不填。
第6步:点“QQ场景编辑器”上方的“导入图片”按钮,出现“打开”对话框,选出你打算做场景背景的图片。这张图片将出现在“QQ场景编辑器”的左下边。
第7步:用鼠标将“QQ场景编辑器”左下边的图片,拖到“QQ场景编辑器”中间的空白框中。
第8步:点“QQ场景编辑器”左上方的“添加”,出现“打开”对话框,找出你想做场景的背景音乐。
第9步:用鼠标将“QQ场景编辑器”左下边的音乐图标,拖到“QQ场景编辑器”中间的方框中。
第10步:在“QQ场景编辑器”的右边,有“背景属性”,它的下面第四行是“循环播放声音”,点这六个字前面的方框,将出现一个“√”。
第11步:现在,一个最简单的场景就做成了。
第12步:点“QQ场景编辑器”上面的“生成”,并在随后出现的对话框中,点“确定”,或者点“是”。
第13步:到QQ聊天界面的“未分类场景”中,你可以找到刚才做的场景,并向朋友发送。
掌握以上方法,你就可以制作出简单的场景。但要制作出很好的场景,必须拥有合适的图片和音乐,必须图片、音乐、情感相互交融,这就要求我们会利用搜索引擎到网上去寻找,有时还需要我们会利用图像处理软件去修饰和制作图片。除此之外,还需要我们具有一定的审美观。
excel图片如何做成动画效果不仅图片啊文字都可以,操作,首先插入自己需要的图片后,选中文字或者图片,如果是03版的就找设计菜单里面的自定义动画,想要啥效果就有啥效果。07版的就更明了了,也是找动画菜单。
如何做x轴平推动画效果今天说说平移动画。用iPhone手机的人常常看到这个效果:点击一个面板,面板左右滑动推出,原来面板滑走,新面板滑出,这种动画在Silverlight很容易做。
关键代码
以下是代码片段:
1: <Storyboard x:Key="MoveAnimation"
3: Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
6: </DoubleAnimationUsingKeyFrames
10: </DoubleAnimationUsingKeyFrames
12: Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"
15: </DoubleAnimationUsingKeyFrames
19: </DoubleAnimationUsingKeyFrames
20: </Storyboard
TranslateTransform功不可没
UIElement的RenderTransform必不可少,TranslateTransform就是用来平移对象的,注意移动值(x,y)坐标是相对原位置的变化量,不是绝对x,y坐标。此外,除了平移,还有旋转 (RotateTransform)、缩放 (ScaleTransform)、扭曲 (SkewTransform) 。使用 MatrixTransform 类可以创建 RotateTransform、ScaleTransform、SkewTransform 和 TranslateTransform 类未提供的自定义变换。
以下是代码片段:
静态图片,如何做动画效果?最简单的gif:用ps导入不同动作的图片[只是动作不同,人物背景都相同],用添加关键帧的方式让图片“动”起来,详情可百度相关教程。
管理页面我们通常能看到一连串的卡片,以很明显的方式对用户进行提示,也可以是图表嵌在卡片的形式直观展示。那就会存在一个需求,用户可以自定义自己想要的卡片布局,其实也就是自定义宽高这样。可以看到这里监听了页面的 resize ,然后进行 onWindowResize 方法,我们在其他页面进行 resize 之后,也会触发这个方法,这也是我前面要强调一下路由切换不会 unmount 的原因,这里的 resize 没法得到正确的 node.offsetWidth ,所以样式错乱了,那怎么办呢?
首先我想着,在这个页面写一个时钟,不停的 js 去触发 resize 事件,让它在切换页面的时候重新计算,这样肯定是ok的,但是这样肯定会有性能问题,因为不停的延时调用,这样我就得想个办法,不那么频繁的刷新了,怎么做呢?
路由切换,页面也切换了,那组件肯定会触发 receiveProps 钩子,那我在这里判断一下当前页面的路由,如果是当前路由,那就刷新一下(dispatchEvent('resize')),这样就做到只是进入这个页面就刷新,比时钟要好一些。但是这样还是很low,因为进入其他页面没有 resize 操作,只要返回这个页面就会刷新,接下来我就要优化一下,只有当其他页面 resize 了之后,回到当前页才 dispatchEvent('resize') 。
页面挂载的时候就进行 resize 监听,当发生 resize 事件之后进行一下路由判断,如果是其他页面,就改变 state 里的一个值,返回到当前页之后进行一下 state 的值判断,为 true 才刷新。
为了页面切换的时候更合理一些(不展示错乱的页面),加个 loading 延时一秒过度一下,还要记得 unmount 时去除掉 resize 监听。
这里的图表用的是 bizcharts ,它会监听页面 resize 的变化,但是当我们改变宽高的时候,发现没有自适应,一开始我的解决方法是把这个渲染的 canvas 设置为 width:100% ,这样能使它拉伸开,但是很丑,因为是相当于是放大,这样效果太不好了,所以也要解决这个问题。
React-Grid-Layout 组件有一个 props , onResize 事件返回当前改变宽高这样的事件回调,我们在这个回调里手动触发一下页面 resize 事件,以实现 bizcharts 的自适应。
文章链接: https://www.npmjs.com/package/react-grid-layout