在整个项目中,总共写了1000+的代码,可以更加简单优化的。整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等。轮播导航没有完全做完,暂时做了往右无限推动。个人觉得主要难点是在于对于JS的函数和应用,CSS熟悉了后,主要是重复性工作,JS涉及到一些计算反而比较困难。在整个代码中都有详细的注释,有兴趣的朋友可以看看。

项目下载地址:http://pan.baidu.com/s/1miaVde4

这里是实现点击过后menu形状 “三” 变成“Ⅹ”

共设置了4个div(作为线条)  中间2个div重合 ,点击时隐藏上下线条,同时中间的进行旋转

CSS代码:
/*第一条线和最后一条线设置定位*/ #menu div:nth-child(1) {
top: 0px
} #menu div:nth-child(4) {
top: 16px
} /*点击menu后的隐藏菜单初始化定义*/ #Menu-Hidden {
width: 1368px;
background-color: #55F7D7;
height: 667px;
position: fixed;
top: 0px;
right: 1350px;
z-index: 14;
-webkit-transition: right 0.4s linear;
}

JS代码:

var Menu = document.getElementById("menu");
Menu.onclick = function () {
var Mhidden = document.getElementById("Menu-Hidden");
var Mdiv = this.getElementsByTagName("div");
//点击时推动出来
//根据判断,menu是否点击了,没有点击则是隐藏上线的div白色线条,中间进行旋转
if (Mdiv[0].style.opacity != "0") {
Mdiv[0].style.opacity = 0;
Mdiv[3].style.opacity = 0;
Mdiv[2].style.webkitTransform = "rotate(45deg)";
Mdiv[1].style.webkitTransform = "rotate(-45deg)";
Mhidden.style.right = "0px";
//禁用滚动条
document.documentElement.style.overflowY = 'hidden';
}
//再点击的时候,恢复初始化
else {
Mdiv[0].style.opacity = 1;
Mdiv[3].style.opacity = 1;
Mdiv[2].style.webkitTransform = "rotate(0deg)";
Mdiv[1].style.webkitTransform = "rotate(0deg)";
Mhidden.style.right = "1350px";
//恢复滚动条
document.documentElement.style.overflowY = 'auto';
}
} 瀑布流初次加载的时候,进行一个上升滑动效果 在布局的时候,就可以把你所有的图片往下移动一点,我这里是200px 然后主要是通过scrolltop控制的,通过这个属性值来进行判断,增加一个上升效果,核心JS分析就好。具体可以看源代码的。
JS代码:
var One = setInterval(Scrollevenlistener, 2);//2毫秒调用一次,反复判断
function Scrollevenlistener() {
var oDis = document.body.scrollTop;
var line1 = [document.getElementById("LPc-1"), document.getElementById("Mpc-1"), document.getElementById("Rpc-1")];//获取我第一排图片的ID
if (oDis >= 574) {
for (var i = 0; i < line1.length; i++) {
//parseInt无论是字符串还是数字,遇到第一个非数字时,取出前面所有的数字
var NH = parseInt(document.defaultView.getComputedStyle(line1[i], null).top);
line1[i].style.top = NH - 200 + "px";
        //所有图片上升,清楚这个函数
if (i ==line1.length-1) {
                clearInterval(One);
}
}
}
}
												

JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。的更多相关文章

  1. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  2. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  3. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  4. Jquery制作--焦点图左右轮播

    公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...

  5. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  7. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

  8. 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

随机推荐

  1. A BRIEF HISTORY OF COMPUTERS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Vacuum Tubes   Transi ...

  2. 搭建C语言开发环境

    大学的时候有数据结构这门课,但...终究还是得学.电脑是win8的,根据网上的教程倒是能安装成功vc6.0并且能够打开新建工程,但是一编译运行就提示兼容性问题. 首先安装C语言编译器.下载MinGw ...

  3. svn 入门

    SVN版本:1.5 及更新版本 名词说明: WC:Working Copy 你的工作区 Versioned:受控的:受版本控制的 SVN是什么? SVN是开源的版本控制系统. 比CVS更多的特性.一个 ...

  4. linux下时间的修改

    1.关于时间的修改,在linux还是很重要的,在这里只是介绍一个简单的常用的命令,并且时间不会写入到系统. 2.命令 3.如果想把时间写进系统 修改完成之后,输入clock -w 时间将会被写进CMO ...

  5. C++ Primer Pluse_6_课后题

    #include <iostream> #include <cctype> #include <array> #include <string> #in ...

  6. ArcGIS API for Silverlight动态标绘的实现

    原文:ArcGIS API for Silverlight动态标绘的实现 1.下载2个dll文件,分别是: ArcGISPlotSilverlightAPI.dll 和 Matrix.dll 其下载地 ...

  7. Sparse Graph---hdu5876(set+bfs+补图求最短路)

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5876 题意:有一个含有n个点的无向图,已知图的补图含有m条边u, v:求在原图中,起点s到 ...

  8. C#类的继承

    public class Animal { public string word=""; //virtual表示虚方法,用以被重写 public virtual void say( ...

  9. 1.后台如何获取 jquery get方式的ajax的参数

    1. update.jsp 1.2 默认是dataType是json getJSON: function( url, data, callback ) { return jQuery.get(url, ...

  10. Mybatis在xml文件中处理大于号小于号的方法

    第一种方法:用了转义字符把">"和"<"替换掉,然后就没有问题了. AND start_date <= CURRENT_DATE AND en ...