本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>【推荐】Jquery+CSS3仿花瓣网固定顶部位置悬浮的导航菜单</title> <style type="text/css"> body,h1...
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条（文字下面有横线）等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。 接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题) 先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的...） 这种效果可以由元素内嵌套canves实现，也可以由css3实现。 Canves实现 网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下 html代码：<a class="btn color-1 material-design" data-color="#2f5398">Press ...
今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑出的方向滑出。这是一个十分有趣的效果。 我们使用无序列表来组织缩略图和描述遮罩层： <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning"> <img src="images/7.jpg" /> <div>...
很久之前练习过的一个实践，复习完渐变、圆角、3D变形、拖拽等等来看源码，估计还不会太凌乱(◎﹏◎)哈哈哈 效果图： HTML: <!doctype html> <html onselectstart="return false;" lang="en"><!-- !important --> <head><meta charset="UTF-8"><title>3D拖拽相册</title><link rel="stylesheet" href="css/style.css"> </head> <body><!-- html上阻止默认行为onselectstart --><div class="pic"><img src="images/1.jpg" /><img sr...
下面来介绍下我按照网上的视频讲解实现的照片墙效果图。最终实现的效果包括如下： ?当点击某张图片时，该图片移到中间区域并放大显示。当图片被点击时正反面切换显示。 ?某张图片被点击时，所有的图片的位置被随机重排 ?某个控制按钮被点击时，对应的图片显示到正中间，控制按钮进行相应的样式切换。当连续点击某个控制按钮时，图片伴随着按钮的点击进行正反面切换 对整个效果进行VCD分解，如下图： 按照计算机能理解的方式来分解...
前言 项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>瀑布流-javascript</title><style>*{margin:0;padding:0;}#content{position: relative;margin:0 auto;}.box{padding:10px;float: left;}/*首行浮动，第二行开始绝对定...
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果，文字在上面移动时，就像是文字投影到墙壁上，在转角出会改变运动方向。效果图如下：完整HTML代码如下： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery+CSS3文字跑马灯特效 - 何问起<...
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性从而通过改变transform：rotate属性值来达到3d立方体旋转的效果HTML代码块：<body> <input type="button" class="open" value="点击散开"/> <input type="text" class="xNum" va...
弹出层用来向用户展示详细的信息，交互性非常强。弹出层有对话框、模态窗口等形式，这里我都把他们叫做弹出层，我的同事们也是这么叫的。一般我们喜欢使用比较成熟的弹出层插件如fancybox等，但在本文，我将先抛弃插件，给大家介绍如何使用jQuery+CSS3+Html5实现弹出层。效果展示 源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果，因此我们可以在示例中任意修改弹出层外观样式、甚至js方法调用。我们最终...
效果图：是不是比默认的好看多了，个人的审美观应该还是可以的。 接下来我们一起来看看实现这款美化版Checkbox的源代码，主要思路是利用隐藏原来的checkbox和radiobox，用一个div来模拟checkbox/radiobox，并使用jQuery来完成选择切换时的动画效果。 先来看看HTML代码： <div class="wrapper"><ul><li><p>Gender:</p></li><li><input type="radio" name="radio-btn" />Male</li><li><input type="radio" name="radio-btn" />Female...
CSS3和jquery都可以实现缓动追逐效果，但是考虑到浏览器的兼容性，建议使用jquery animate方法来实现。 先给大家展示下实现效果如下：效果演示 源码下载 引用文件： jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> </div>jquery var $first=$(#first); var $second=$(#second); (function(){ move1(); move2(); })() function move1(){ $first.animate({ "left":220, "to...
一、前期准备 1.1 案例分析 适用场景：单例布局 1.2 方法论 V视图 HTML+CSS+调试 C js实现控制流程 D数据 优化扩展 二、代码 结构 <div class="slider"><!-- 特效区 --><div class="main"><!-- 主视图区 --><div class="main_i"><div class="caption"><h2>h2 caption</h2><h2>h3 caption</h2></div><img src="images/{{index}}.jpg" alt=""></div></div><!-- 主视图区结束 --><div class="ctrl"><!-- 控制区 --><a href="javascrip...
一个菜单按钮特效案例，简单的实现了动态效果。 废话不多说了，直接给大家贴代码了，代码写好不好，还请给位大侠多多指教。 <div class="bar" id="menubar"> <div class="menu" id="menu0"> </div> <div class="menu" id="menu1"> </div> <div class="menu" id="menu2"> </div> </div> .bar{ width:px; height:px; border:px solid #ccc; border-radius:%; position:fixed; top:px; right:px; z-index:; cursor:pointer; } .menu{ ...