整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

css实现nav菜单动画加载折叠伸缩效果

css实现nav菜单动画加载折叠伸缩效果

天就来做一款nav炫酷的下拉菜单效果,适合在PC端和移动端使用,运用到CSS3的动画和过渡属性,感兴趣的朋友可以看看!

实现效果如下:

鼠标移上“菜单”两个字时,二级的下拉菜单像百叶窗一样打开,鼠标移走后也会收缩隐藏起来!

实现代码

html结构:

css样式:

了点时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。(因为代码文字呈现没有格式,难以阅读,以后小编提供的代码都以截图方式呈现,底部有源码链接)。

到底多简单,先来看代码


基于jQuery

基于jQuery

拖拽实例图:

拖拽实例图

将代码剥离,只要写5行就可以实现拖拽了,是不是很简单:

调用方式


放大、缩小

我们给拖拽增加点功能,支持放大、缩小,先看实例图:

放大、缩小

将代码剥离,原先的代码保留不变,增加一个绑定事件:

放大、缩小

这样来实现放大、缩小、拖拽是不是很简单,还能实现很多其他效果,大家慢慢领悟。

原理分析:

放大、缩小、拖拽都离不开在网页上拖动鼠标,对于前端来说就是 document 的 mousemove,当鼠标在网页上移动的时候,无时无刻不在触发 mousemove 事件,当鼠标触发事件时,什么时候需要执行我们特定的操作,这就是我们要做的了。我在 mousemove 中增加了几个对象来判定是否进行操作:

  • move:是否执行触发操作

  • move_target:操作的元素对象

  • move_target.posix:操作对象的坐标

  • call_down:mousemove的时候的回调函数,传回来的this指向document

  • call_up:当鼠标弹起的时候执行的回调函数,传回来的this指向document

小提示:

  • 简单的操作,只需要设定 move_target 对象,设置 move_target 的时候不要忘记了 move_target.posix 哦;

  • 复杂的操作可以通过call_down、call_up进行回调操作,这个时候是可以不用设置 move_target 对象的

深入研究

拖拽和放大、缩小实现了,但是有个问题,当我们鼠标点击并滑动的时候,是会选中文本的,为了避免这个问题,大家可以自行百度

css 阻止文本选中

css 阻止文本选中

网页的放大、缩小、拖拽事件就研究到这里了,小编不再对如何拓展进行深入讲解,一切靠大家自行研究,权当课后作业了。~~

源码链接地址:

http://orzcss.com/posts/d554a392/


本文内容均属个人原创作品,转载此文章须附上出处及原文链接。

加关注,定时推送,互动精彩多,若你有更好的见解,欢迎留言探讨!

PC端进行网页制作时,经常使用固定像素并且内容居中的网页布局,为了适应小屏幕的设备,在移动设备和跨平台(响应式)网页开发过程中,多数使用流式布局,下面我们就对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式,在CSS代码中使用百分比来设置宽度,也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度 下面通过一个案例来演示固定布局如何转换为百分比布局,如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局转换为百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打开Chrome浏览器访问demo4-1.html,页面效果如下图所示。

可以尝试改变浏览器窗口的大小,页面元素的大小不会随浏览器窗口改变,如下图所示。

下面修改demo4-1样式代码,将所有宽度修改为百分比的形式,具体如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新页面,缩小浏览器,页面按百分比随浏览器逐渐缩小,显示完整,页面效果如下图所示: