- 浏览: 341059 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
左侧列表导航条制作鼠标滑过导航条标签,flash动画导航条展示
2、实现原理
首先导航栏是在被一个块级容器给挡住了在页面加载完成以后会从块级容器里动过一个动画效果向右移动出来,每一个时间间隔是0.05*0.2秒移动在要0.3秒内完成动画效果然后是一个伪类的事件效果当鼠标移动到一个a标签上又会触发一个动画效果a容器会加长20px文字向右移动到-110px并且改变文字的颜色这个动画在0.3秒内完成,当鼠标移开后0.3内a标签回复原来样子
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
左侧列表导航条制作鼠标滑过导航条标签,flash动画导航条展示
2、实现原理
首先导航栏是在被一个块级容器给挡住了在页面加载完成以后会从块级容器里动过一个动画效果向右移动出来,每一个时间间隔是0.05*0.2秒移动在要0.3秒内完成动画效果然后是一个伪类的事件效果当鼠标移动到一个a标签上又会触发一个动画效果a容器会加长20px文字向右移动到-110px并且改变文字的颜色这个动画在0.3秒内完成,当鼠标移开后0.3内a标签回复原来样子
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{background:#1d1d1d;font:12px/180% "Lucida Grande", Verdana, sans-serif;} .navbox{margin:30px auto;position:relative;width:340px;} .navbox .mask{position:absolute;top:30px;left:-190px;} .navbox h2{color:#ffff66;margin:0 0 0 13px;height:40px;font-size:14px;} /* sliderNav */ #sliderNav{font-size:14px;margin:30px 0 0 0;} #sliderNav li.sliderTag h3,#sliderNav li.sliderTag a{display:block;width:180px;padding:5px 18px;margin:0 0 5px 0;} #sliderNav li.sliderTag h3{color:#000;background:#eee;font-weight:normal;font-size:14px;} #sliderNav li.sliderTag a{color:#999;background:#4B4B4B;border:1px solid #1a1a1a;text-decoration:none;} #sliderNav li.sliderTag a:hover{color:#ffff66;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //在文档加载后激活函数 slide("#sliderNav", 25, 15, 180, .8); //控制块级元素ul上下左后的位置 }); function slide(navigation_id, pad_out, pad_in, time, multiplier){ //定义方法 var list_elements = navigation_id + " li.sliderTag"; // 创建页面加载完以后第一个动画在哪里实现 var link_elements = list_elements + " a"; //在鼠标触及到那里触发动画效果 var timer = 0; // 启动定时器用于滑动动画 $(list_elements).each(function(i){ // 创建幻灯片动画的所有列表元素 $(this).css("margin-left","-210px"); //将所有的li在页面加载完毕以后的位置在动画触发前的位置,有一个块级元素给把它们覆盖住的位置 timer = (timer*multiplier + time); //在页面家在完成后li元素从块级元素里面出来的动画效果 $(this).animate({ marginLeft: "0" }, timer); //控制li出来动画的幅度有多大 0 就是控制的幅度 数字越大 出来的每一个出来向右移动的位置就越多 $(this).animate({ marginLeft: "15px" }, timer); //控制li出来以后每一个标签的距左的幅度有多大 $(this).animate({ marginLeft: "0" }, timer); //控制当li的动画效果出来以后距左到15px的时候在回到0px上面一个效果 }); $(link_elements).each(function(i){ // 创建的所有链接元素的悬停滑动效果 $(this).hover(function(){ // 定义一个伪类 $(this).animate({ paddingLeft: pad_out }, 180); //控制当鼠标触碰到a标签上在0.18秒的时间里完成动画效果 },function(){ //在jquery里面在定义个方法 $(this).animate({ paddingLeft: pad_in }, 180); //当鼠标离开以后a标签花0.18秒回到原位 }); }); } </script> <div class="navbox"> <img width="190" height="317" src="images/background.jpg" class="mask" /> <h2>jquery导航条悬停效果</h2> <ul id="sliderNav"> <li class="sliderTag"><h3>jquery flash动画导航条</h3></li> <li class="sliderTag"><a href="http://www.17sucai.com/">网站首页</a></li> <li class="sliderTag"><a href="http://www.17sucai.com/">jquery 特效</a></li> <li class="sliderTag"><a href="http://www.17sucai.com/">javascript特效</a></li> <li class="sliderTag"><a href="http://www.17sucai.com/">flash特效</a></li> <li class="sliderTag"><a href="http://www.17sucai.com/">div+css教程</a></li> <li class="sliderTag"><a href="http://www.17sucai.com/">html5教程</a></li> </ul> </div><!--navbox end--> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1234Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 769//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 580Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 531Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 879首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2737Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14753流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6263首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1380通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 695一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 913<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7681. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 749一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 868最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 639最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 435做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 699在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
通过以上步骤,我们就成功实现了jQuery左侧导航条上鼠标滑过导航菜单时显示详细内容提示框的功能。这只是一个基础示例,实际应用中可能需要考虑更多的细节,比如响应式设计、动画效果优化等,但这个教程应该能为你...
jquery hover鼠标滑过动画导航条是一款蓝色jQuery滑动导航栏特效代码。
jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换显示 jquery英文导航条鼠标滑过中英文字导航条滑动切换...
"jquery插件库-jquery hover鼠标滑过动画导航条.zip"是一个压缩包,其中包含了一个利用jQuery实现的、在鼠标滑过时产生动画效果的导航条插件。这个插件可以为网页增添动态效果,提升用户体验,同时也能让网页设计...
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
"jQuery仿flash导航条鼠标悬停上下文字滑动"是一种利用jQuery库实现的动态效果,旨在提升用户体验,使得导航条更加生动有趣。在这个项目中,我们将深入探讨这个效果的实现原理和相关技术。 首先,jQuery是一个广泛...
"jQuery css3图标动画鼠标滑过图标旋转动画特效"是一种常见的交互式设计技术,它结合了jQuery库的便捷性和CSS3的强大动画功能,为网页元素特别是图标按钮提供动态视觉效果。下面将详细介绍这个主题中的相关知识点。 ...
本文将深入探讨“jquery-图片展示-鼠标滑过图片文字遮罩”这一技术主题,以及如何通过jQuery插件实现这种效果。 首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务,...
jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片... jquery hover图片特效,鼠标滑过animate动画图片...
本教程将详细介绍如何使用 jQuery 的 hover 方法来实现鼠标滑过时的动画导航条效果。 首先,我们需要在 HTML 页面中设置基础的导航条结构。一个简单的导航条可能包含多个链接元素(`<a>`),这些元素通常被组织在...
在本资源中,我们关注的是一个使用jQuery库实现的特殊导航条效果,它在鼠标滑过时能够平滑地切换显示中英文双语导航条。这个功能对于一个多语言网站来说非常实用,因为它提供了用户友好的界面,使得用户可以轻松识别...
总的来说,"jquery flash动画导航条.zip"提供的资源将帮助开发者创建一个融合了传统Flash动画效果和现代Web技术的导航条。通过合理利用jQuery的便利性、CSS的可视化能力和HTML5的语义特性,可以构建出适应不同设备且...
本项目“jQuery鼠标悬停上下滑动导航条”提供了一种创新且美观的解决方案,利用jQuery库来实现鼠标悬停时导航条的动态上下滑动效果,提升用户体验。以下是关于这个特效的一些关键知识点: 1. **jQuery库**:jQuery ...
在本案例中,"鼠标滑过"是一个典型的事件处理,而"背景悬停Flash动画效果"则是动态效果的一种体现。 关于Flash动画,虽然现代Web开发更倾向于使用HTML5的Canvas或SVG进行动画制作,但这里提到的“Flash动画效果”...
《jQuery实现的鼠标滑过图片动画滑动展开特效详解》 在网页设计中,动态效果的运用能够极大地提升用户体验,使页面更具吸引力。"jQuery鼠标滑过图片动画滑动展开特效"是这样一种技术,它巧妙地利用了jQuery库的强大...
在这个“jquery左侧边浮动菜单鼠标滑过图标菜单滑动显示”的主题中,我们将探讨如何利用jQuery实现一个功能丰富的侧边栏菜单,当用户鼠标悬停在图标上时,菜单会平滑地滑动展开。 首先,我们需要理解基本的HTML结构...