JS,CSS,HTML制作网页首页,视频轮播,隐藏点击等等。
在整个项目中,总共写了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制作网页首页,视频轮播,隐藏点击等等。的更多相关文章
- Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作
10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
- Jquery制作--焦点图左右轮播
公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...
- 使用js制作一般网站首页图片轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
随机推荐
- A BRIEF HISTORY OF COMPUTERS
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Vacuum Tubes Transi ...
- 搭建C语言开发环境
大学的时候有数据结构这门课,但...终究还是得学.电脑是win8的,根据网上的教程倒是能安装成功vc6.0并且能够打开新建工程,但是一编译运行就提示兼容性问题. 首先安装C语言编译器.下载MinGw ...
- svn 入门
SVN版本:1.5 及更新版本 名词说明: WC:Working Copy 你的工作区 Versioned:受控的:受版本控制的 SVN是什么? SVN是开源的版本控制系统. 比CVS更多的特性.一个 ...
- linux下时间的修改
1.关于时间的修改,在linux还是很重要的,在这里只是介绍一个简单的常用的命令,并且时间不会写入到系统. 2.命令 3.如果想把时间写进系统 修改完成之后,输入clock -w 时间将会被写进CMO ...
- C++ Primer Pluse_6_课后题
#include <iostream> #include <cctype> #include <array> #include <string> #in ...
- ArcGIS API for Silverlight动态标绘的实现
原文:ArcGIS API for Silverlight动态标绘的实现 1.下载2个dll文件,分别是: ArcGISPlotSilverlightAPI.dll 和 Matrix.dll 其下载地 ...
- Sparse Graph---hdu5876(set+bfs+补图求最短路)
题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=5876 题意:有一个含有n个点的无向图,已知图的补图含有m条边u, v:求在原图中,起点s到 ...
- C#类的继承
public class Animal { public string word=""; //virtual表示虚方法,用以被重写 public virtual void say( ...
- 1.后台如何获取 jquery get方式的ajax的参数
1. update.jsp 1.2 默认是dataType是json getJSON: function( url, data, callback ) { return jQuery.get(url, ...
- Mybatis在xml文件中处理大于号小于号的方法
第一种方法:用了转义字符把">"和"<"替换掉,然后就没有问题了. AND start_date <= CURRENT_DATE AND en ...