天就来做一款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>
*请认真填写需求信息,我们会在24小时内与您取得联系。