众里,,网页尝试

最新推荐文章于 2024-04-15 10:06:08 发布

jiyinyiyong

最新推荐文章于 2024-04-15 10:06:08 发布

阅读量507

点赞数 1

文章标签： class header function youtube flash html

本文链接：https://blog.csdn.net/jiyinyiyong/article/details/6300811

版权

我也只做得了局部,,

还好重要的几个概念有三个能弄出个大概了...

先图片...

第一是鼠标悬停效果,,

我的做的是,,移入立即变色,,移出渐渐褪色,,

用了一个小把戏,,,

-moz-transform-duration在hover前后各设置一次,,

效果是迅雷7那儿看到然后改进的,,,

第二是媒体放到文字后面,,

图片是简单的,,只不过我第一次认真想看效果,,

视频用flash就有很多问题,,我穿的基础不够应付了,,

与是用了html视频,,youtube上的,,效果还行,,

第三是快捷键翻页的效果,,,

用js,,难度比较高,,我以后得多练,,特别是处理事件,,

捕获四个方向键的动作,,

注意到setinterval不能小于50ms,影响性能,,

我真的不知道怎么可以做出平滑的效果,,

在实际测试的时候10和1,感觉上差不多,,推测setInterval有方面的问题..

另外显著的问题是两次同向连续左右键导致失控,,

我想是setInterval被重写的问题...

很多bug不会处理,,只能

剩下的,,下边的栏目我没成功,,

其他的也不会做,,,

下面备份代码..

<!doctype html> <html> <head> <title> 尾迹 </title> <meta charset="utf-8"/> <link rel="stylesheet"href="show.css"/> <mce:script src="show.js" mce_src="show.js"></mce:script> </head> <body οnlοad="begin();"> <nav class="out"> <nav class="page1"> <header> 你看到的这是第一行, </header> <header> 然后我写了一个第二行,需要比第一行长一些才可以. </header> <header> 接着是第三行,我还没有想好后面的东西. </header> <header> 不知道晚上是不是还有力气去做那个统计字数的js程序, </header> <header> 让我想想,,也许真的应该先去看看 </header> <header> 好吧,,我还是先把后面的东西补上去,,这样子也许方便一点. </header> <header> 今天提不起多少的力气,,如果闪讯不断的话,, </header> <header> 现在我应该是学了很多的opengl基础了,, </header> <header> 世事难料啊.. </header> <header class="hasImg"> 这里是图片,鼠标查看: <img src="background.jpg" mce_src="background.jpg"/> </header> <header> 显然,,瞬间出现肯定不如渐变效果好看的. </header> <header> 但是现在也只能先这样了,,火狐不支持css动画..跟webkit不同 </header> <header> 至少还算有足够的功能,,那么也就好了 </header> <header> 虽然我对于html心存不快, </header> <header> 但是html总归是现下最容易使用的语言 </header> <header> 我忘记了,其实事情不算完,,还有大范围的翻页我没有做起来. </header> <header> 首先文本必定会超出页面所限, </header> <header> 之后就需要一个按钮来控制是否翻页.. </header> <header> 按钮之后是js的翻页动画,, </header> <header> 也需要判断是否到达底部,则消除按钮. </header> </nav> <nav class="page2"> <header> 实际的文章长度并不确定,不过远离也是简单的. </header> <header> 只是我最讨厌的是怎么做成代码.. </header> <header> 好吧,,一开始我就知道在这里需要一个换行..一边下面的消息窗口, </header> <header> 我只能说这段日子丧失意志了.. </header> </nav> </nav> <nav class="out"> <nav class="page1"> <header> 这边是第二个区块,,不知道数量是否足够.. </header> <header> 层次过多的话处理起来会比较复杂,, </header> <header> 还是一个挑战对我而言,同一个方案处理多个翻页的话. </header> <header> 主要还是怎么将对象进行传递和操作,,原先的单个非常简单其实. </header> <header> 想起来我打算嵌入一个视频的..先去找个视频.. </header> <header class="hasEmb"> 这一行是视频,,鼠标悬停查看: <iframe title="YouTube video player" width="320" height="260" src="http://www.youtube.com/embed/5q-HtdW03Zs" frameborder="0" allowfullscreen> </iframe> </header> <header> 果然是有点问题的,特别是flash视频在处理时的麻烦. </header> <header> 我算是体会到了那些大网站对于flash的束手无策,, </header> <header> 很巧..我于是采用了html5视频以支持旋转和缩放,, </header> <header> 原先也真不会想到html的问题会出在这种地方, </header> <header> 不知道flash那一方进行优化时可否像html5这样方便的结果. </header> <header> 特效对于我而言是很炫的, </header> <header> 到现在我才能渐渐发现这个结构的好处和坏处,, </header> <header> 毕竟我在上面耗费了多少的时间了.. </header> <header> 这种形式牢牢将鼠标的操作锁死在注意力上面, </header> <header> 对于喜欢拿着鼠标横扫的我来说显然是不方便的,, </header> <header>. 从另一方面说,动画效果的延时是硬性不可改的,, </header> <header> 一定程度上限定了时间.. </header> <header> 到这里的时候我调整了一下消失延迟时间, </header> <header> 然后颜色换深一点的,, </header> </nav> <nav class="page2"> <header> 决定去掉阴影中间的空隙,,那样稍微容易阅读一点. </header> <header> 后来区块左右的间隙大一点,,不过最开始也挺大的,, </header> <header> 组成了不错的花纹,也就花纹.. </header> </nav> </nav> <nav class="out"> <header> 3 </header> </nav> <nav class="out"> <header> 4 </header> </nav> <nav class="out"> <header> 5 </header> <header> 出于未知的原因,,我不知道怎么做可以禁止下面的滚动条, </header> <header> 同时不影响到正常的运作.. </header> <header> 没办法,,那就留着好了.. </header> </nav> <nav class="out"> <header> 6 </header> </nav> <nav class="out"> <header> 7 </header> <header> 还是有好些问题解决不来,, </header> <header> 明显的问题是两次连续左右方向按下不会停止, </header> <header> 我想应该是setInterval被重复定义,, </header> <header> 然后出现了不能预料的结果,, </header> <header> 这种麻烦对于我真是闻所未闻,,不管了,, </header> <header> 我已经设置了监听四个方向键的东西给出对应的动画,, </header> <header> 效果看还是满意的.. </header> </nav> <nav id="end"class="out"> <header> 8 </header> </nav> </body> </html>

body{ background-image:url(background.jpg); background-position:0% 0%; background-attachment:fixed; background-size:1400px; padding:20px; display:-moz-box; -moz-box-orient:horizontal;} nav{ overflow-y:hidden; overflow-x:visiable; width:400px; height:500px;} nav[attr^="page"]{ height:500px;} nav#end{ width:1310px;} header{ width:386px; height:24px; background:rgba(20,10,0,0); color:rgba(255,255,255,0.6); margin:0px; -moz-border-radius:6px; padding:0px 6px; font-size:14px; text-overflow:ellipsis; text-s hadow:0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000; -moz-transition-duration:1s; -moz-transition-timing-function:ease-in;} header:hover{ color:rgba(255,2550,240,1); background:rgba(20,10,0,0.9); -moz-transition-duration:0s;} img{ width:260px; border-width:6px; border-color:rgba(255,255,255,0.8); border-style:solid; z-index:-10; opacity:0.7; -moz-transform:rotate(20deg)translateX(13px)translateY(-160px); -moz-transition-duration:1s;} .hasEmb>*{ z-index:-5; opacity:0.9; -moz-transform:rotate(-10deg)translateX(20px); -moz-transition-duration:1s;} iframe{ border-width:5px; border-color:rgba(30,20,10,0.7); border-style:solid; -moz-border-radius:4px;} .hasEmb:hover iframe{ opacity:1; z-index:1; border-color:rgba(30,20,0,1); -moz-transform:scale(1.15)rotate(0deg)translateX(28px)translateY(-50px); -moz-transition-duration:1s; -moz-transition-timing-function:ease-in;} .hasImg{ color:rgba(250,250,255,0.7);} .hasImg:hover img{ z-index:1; opacity:1; border-color:rgba(255,255,255,1); -moz-transition-duration:1s; -moz-transform:rotate(0deg)translateX(72px)translateY(-190px)scale(1.2); -moz-box-shadow:0px 0px 40px rgba(40,2,2,1); -moz-transition-timing-function:ease-in;}

var nav; var scrollDown,scrollUp,scrollLeft,scrollRight; var count,mark; var num=0; function begin(){ nav=document.getElementsByClassName('out'); document.body.setAttribute('onkeydown','flip(event)');} function flip(event){ switch(event.keyCode){ case 40: count=nav[num].scrollTop; mark=0; scrollDown=setInterval(Down,50); break; case 38: count=nav[num].scrollTop; mark=0; scrollUp=setInterval(Up,50); break; case 37: if(num>0){ count=document.documentElement.scrollLeft; mark=0; num--; scrollLeft=setInterval(Left,50);} break; case 39: if(nav[num+1]!=undefined){ count=document.documentElement.scrollLeft; mark=0; num++; scrollRight=setInterval(Right,50);} break; default: break;}} function Down(){ mark+=26; nav[num].scrollTop=count+mark; if(mark>=500||count>1000){ clearInterval(scrollDown);}} function Up(){ console.log('up'); mark+=26; nav[num].scrollTop=count-mark; if(mark>=500||count<0){ clearInterval(scrollUp);}} function Left(){ console.log('left'); mark+=20; document.documentElement.scrollLeft=count-mark; if(mark>=400||count<0){ clearInterval(scrollLeft);}} function Right(){ mark+=20; document.documentElement.scrollLeft=count+mark; if(mark>=400||count>=2877){ clearInterval(scrollRight);}}

jiyinyiyong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
众里,,网页尝试

我也只做得了局部,,还好重要的几个概念有三个能弄出个大概了...先图片...第一是鼠标悬停效果,,我的做的是,,移入立即变色,,移出渐渐褪色,,用了一个小把戏,,,-moz-transform-duration在hover前后各设置一次,,效果是迅雷7那儿看到然后改进的,,,第二是媒体放到文字后面,,图片是简单的,,只不过我第一次认真想看效果,,视频用flash就有很多问题,,我穿的基础不够应付了,,与是用了html视频,,youtube上的,,效果还行,,第三是快捷键翻页的效果,,,用js,,难度比较高,
复制链接

扫一扫