你想要的前端技术来了
《你想要的前端技术来了》
本次任务完成时间: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提示出来,但会实现代码冲突,影响个人能力。做到从实际出发,做项目时有好好的了解这个项目的作用,从而达到最好的效果。
- 目前主要是做的iOS前端开发,想要学习了解后台的开发。请问需要从何入手 需要学习哪方面技术?
- 2016 年前端技术
- 前端框架技术--jQuery基础应用
- 1.1 前端技术简介
- EasyNVR无插件流媒体服务器前端技术防止重复提交的方法
- 前端不哭!最新优化性能经验分享来啦 | 技术头条
- 2019最新技术胖Web155集前端视频教程合集
- 前端技术博客 推荐网站
- Angularjs路由.让人激动的技术.真给前端长脸了.
- 两年内,我要成为国内优秀的前端技术人员!
- 前端最新技术学习地址总结
- 想要学习Linux技术,先好好的读一本Linux书籍吧
- web前端技术框架选型参考
- 前端技术周刊 2018-09-10:Redux & Mobx
- 技术大牛推荐的5本前端经典必读书
- 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)
- [Web前端技术教学]CSS列表样式范例练习-有序列表-1
- [Web前端技术教学]CSS列表样式范例练习-无序列表-1
- HTML5网页的前端技术测试技巧
- 前端技术-布局解决方案