您的位置:首页 > Web前端

你想要的前端技术来了

2019-01-17 17:38 99 查看

《你想要的前端技术来了》
本次任务完成时间:2018年01月17日
开发工具与关键技术:前端&&谷歌浏览器
展示效果:html+css3 && JavaScript的应用
一、 导航中隐藏
1、伪类

图1页面的导航部分
如图1:当鼠标移入指定(花粉俱乐部)时,字体变为红色;这是CSS3的伪类,说明选中了它;
实现代码如2:

图2
2、页面跳转
如同图1,点击(花粉俱乐部)时,将进行页面跳转;跳转到图3。

图3
其实实现页面跳转只需要应用CSS中的a标签即可(a标签自带页面跳转属性)。
CSS页面跳转的代码:

3、遮罩层
当点击(Select Region)a标签时弹出界面如图3


图4
其实(Select Region)页面一直是存在的,只是它的等级让它在主页面之上;通过使用JavaScript实现点击Select Region弹出;点击右上角的[退出]隐藏。
实现(Select Region)页面弹出与隐藏的JavaScript的关键代码如图5

图5
二、 轮播
轮播在页面中是2秒钟自动切换图片,(默认向右切换);当鼠标移入图片中轮播停止自动切换图片,鼠标移出图片时轮播又从新自动切换图片。点击向左的按钮时图片向左切换,点击向右的按钮时图片向右切换。如果您想指定切换到那张图片时,可以通过点击下面以图片绑定的小按钮,就可以实现这一效果如(图6)。

图6

通过JvavScript的代码达到这一神奇的动态效果,(JvavScript是一种网络的脚本语言,它可以实现网页的动态效果)。
点击向左的按钮时图片向左切换的代码(图7):

图7
三、 计时器
通过上面的轮播了解,我们注意到轮播可以实现每2秒自动切换图片,它是如何做呢?
它如同我们每2秒在按图片向右的按钮一样;这个时候声明一个计时器每2秒去触发这一个图片向右的按钮即可。
应用计时器的金典代码2秒钟自动切换图片(图8):

图8
计时器可以记录或者获取时间,从中可以调用我们需要方法:比如去设定一个闹钟(
7:00叫你起床、如果你设定小睡10分钟,它通过计时器,它7:10闹钟又响了)

四、 总结
在前端的学习中,要有严紧的思维不要过于去修改自己原有的确定。页面的布局要到楚
不能只是模糊的想一下,不然会出现一些布局不清楚情况;要留下来一条修bug的代码,方便维护。在建项目时要把有关文件统一归纳为一个项目,这样可以方便路径的引进不被干预从而在项目开发中做的不乱码。
英语是计算机代码的一部分,要提高个人英语应用能力;虽然打单词的首字母时,Console提示出来,但会实现代码冲突,影响个人能力。做到从实际出发,做项目时有好好的了解这个项目的作用,从而达到最好的效果。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: