js菜单,js导航代码 - A5源码
关键字：    
当前位置： >
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
JS特效分类
菜单导航排行
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.你的位置： >
> jquery之animate类似flash动画滑动收缩展示列表
1.特效实现：之类似flash动画滑动收缩展示列表，本例是介绍360浏览器发展历程的时间轴展示，是一款很实用js树形导航菜单特效
2.本js树形导航菜单特效兼容浏览器IE6、IE7、IE8、IE9、IE10、firefox、chrome、opera、safari及以上版本
该素材由整理发布，内容均来自网络，仅供参考学习！
【精品代码网 原创文章 投稿邮箱：】
================关于精品代码网================
“精品代码网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
CSS3代码演示：
色彩手册：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 精品代码网 微信号：【jphtmlcom】
您也可以通过扫描下方二维码快速添加：
转载请注明： &
与本文相关的文章CSS+jquery：制作个幽灵按钮|Soul|Seeker-前端渣渣一枚
欢迎来自的盆友！
GitHub地址:/Relsoul 开始学习GitHub
学习方法来自/video/5932
上图就是幽灵按钮
如何实现这个效果呢？先来分析下
我们需要利用到
transition
box-sizing
border-radius
以上代码都可以在CSS手册上找到解析,具体的使用到时候看代码即可
jquery中的
outerWidth()
position()
值得一提的是 outerWidth()
比如$('.tip').outerWidth() 获取的是tip中的宽 这里的宽包括 padding border 等等
position()是相对于父级定位元素的定位 比如$('.tip').position().left
.tip基于父级box盒子定位 那么这里获取的就是 tip至box中的左
stop()是停止动画函数
用到的重要技术也就差不多了
下面开始分析
首先需要一个box盒子来包裹按钮+图片也就是&div class="box"&
因为我们的图标样式都是一样的 所以都定义一个css类.icon
图标和按钮样式有相同之处 所以定义一个css类.link
a标签中的data="My mission is clear"用来存放需要显示的文字
定义4个span标签来负责我们鼠标滑入 滑出的边框动画
定义一个&div class="tip"&
&em&&/em& //em用来显示data内容
&span&&/span&//span用来显示三角形
给box加上相对定位relative
同时给.icon加上过渡属性
.icon:hover图标移入动画
.button中加上box-sizing的意思是不用计算宽度,直接把边框，padding也算进了宽度里面
.line 因为span是内联元素所以要给line加上display:block和position
再定义.button .line-top初始状态为
left:-110%;
因为上线条从始到终高度都没变,就宽度在变 所以一开始设置宽度等于0,同时把定位定位在.button的left:-110%;top:-2
//top:-2px的意思是 0是定位在按钮内部的顶部 -2px就定位到了盒子上边框的顶部
再定义.button:hover .line-top移动状态为
width: 100%;
因为只有宽度变 所以设置宽度从0-100%
再设置left定位在盒子的左边框
.button:hover{
border: 2px solid rgba(255,255,255,1);
background-position: 140
设置button 经过的时候 边框变亮 同时背景图片向左移。
padding: 0 14
line-height: 35
background: #2dcb70;
font-size: 18
border-radius: 3
-webkit-border-radius: 3
opacity: 0;
top: 100/*按钮与盒子顶部的距离*/
给tip定位到距离box top:100px
隐藏tip: opacity: 0;
.tip span{
height: 0;
overflow: 0;
border-top-color:#2dcb70;
left: 50%;
margin-left: -3
这段代码是设置小三角形的 就不具体分析了 实现的方法很多
jquery代码已经给出了比较完善的解释了 我这里就简单提一下思路
首先给button加上滑入,滑出两个方法
滑入的时候先把a标签中的data属性取出来放到.tip中的em标签中
再把tip定位到按钮的左边
定位以后因为要居中 所以用tip的宽度减去button的宽度再除以2
..如果嫌这步麻烦 也可以自己写死了去定位 比如tip的left是30px 等等
只是弹性没有计算的好
鼠标移入的时候先停止动画
鼠标滑出的时候也先停止动画
这两步很重要做一个判断
暂时分析的差不多了..新手分析的有点乱,但是大概步骤应该写出来了...吧？
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&link rel="stylesheet" type="text/css" href="button.css"&
&script type="text/javascript" src="js/jquery-1.8.3.min.js"&&/script&
&script type="text/javascript" src="anim.js"&
&div class="box"&
&div class="link link-miss"&
&span class="icon"&&/span&
&a href="#" class="button" data="My mission is clear"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="link link-play"&
&span class="icon"&&/span&
&a href="#" class="button" data="this is my play"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="link link-touch"&
&span class="icon"&&/span&
&a href="#" class="button" data="this is my touch"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="tip"&
&em&&/em&&span&&/span&
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
&!doctype html&&html lang="en"&&head& &meta charset="UTF-8"& &title&Document&/title& &link rel="stylesheet" type="text/css" href="button.css"& &script type="text/javascript" src="js/jquery-1.8.3.min.js"&&/script& &script type="text/javascript" src="anim.js"& &/script&&/head&&body& &div class="box"&
&div class="link link-miss"&
&span class="icon"&&/span&
&a href="#" class="button" data="My mission is clear"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="link link-play"&
&span class="icon"&&/span&
&a href="#" class="button" data="this is my play"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="link link-touch"&
&span class="icon"&&/span&
&a href="#" class="button" data="this is my touch"&
&span class="line line-top"&&/span&
&span class="line line-right"&&/span&
&span class="line line-bottom"&&/span&
&span class="line line-left"&&/span&
&div class="tip"&
&em&&/em&&span&&/span&
&/div&& &/div&&/body&&/html&
*{margin: 0;padding: 0;}
background: #333;
width: 800
height: 280
margin: 50
.box .link{
width: 205
height: 280
margin: 0 20
.link .icon{
transition:all 0.2s ease-out 0;
-webkit-transition:all 0.2s ease-out 0;
display: inline-
width: 100%;
height: 190
background: url(images/)
/*实现旋转动画*/
.link .icon:hover{
transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);
.link-miss .icon{
background: url(images/mission.png) no-
.link-play .icon{
background: url(images/play.png) no-
.link-touch .icon{
background: url(images/touch.png) no-
/*按钮动画*/
width: 180
height: 50
line-height:50
text-decoration:
color: #2dcb70;
font-family: A
font-weight:
border: 2px solid rgba(255,255,255,0.8);
padding-left: 20
box-sizing:border-
-webkit-box-sizing:border-
/*box-sizing不用计算宽度,直接把边框，padding也算进了宽度里面*/
transition:all 0.4s ease 0;
-webkit-transition:all 0.4s ease 0;
background: url(images/allow.png) no-repeat 130
.button:hover{
border: 2px solid rgba(255,255,255,1);
background-position: 140
.button .line{
background:
transition: 0.4
-webkit-transition: 0.4
.button:hover .line{
background: #
.button .line-top{
left:-110%;
.button:hover .line-top{
width: 100%;
.button .line-right{
height: 0;
top:-110%;
.button:hover .line-right{
height: 100%;
.button .line-bottom{
right:-110%;
.button:hover .line-bottom{
width: 100%;
.button .line-left{
height: 0;
bottom:-110%;
.button:hover .line-left{
height: 100%;
padding: 0 14
line-height: 35
background: #2dcb70;
font-size: 18
border-radius: 3
-webkit-border-radius: 3
opacity: 0;
top: 100/*按钮与盒子顶部的距离*/
font-style:
.tip span{
height: 0;
overflow: 0;
border-top-color:#2dcb70;
left: 50%;
margin-left: -3
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
*{margin: 0;padding: 0;} body{
background: #333; } .box{
position: relative;
width: 800px;
height: 280px;
margin: 50px auto; } .box .link{
width: 205px;
height: 280px;
float: left;
margin: 0 20px; } .link .icon{
transition:all 0.2s ease-out 0;
-webkit-transition:all 0.2s ease-out 0;
display: inline-block;
width: 100%;
height: 190px;
background: url(images/) } /*实现旋转动画*/ .link .icon:hover{
transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
-webkit-transform:rotate(360deg) scale(1.2);&
}&.link-miss .icon{
background: url(images/mission.png) no-repeat center center;}.link-play .icon{
background: url(images/play.png) no-repeat center center;}&.link-touch .icon{
background: url(images/touch.png) no-repeat center center;}&/*按钮动画*/.button{ position: relative; display: block; width: 180px; height: 50px; line-height:50px; text-decoration: none; color: #2dcb70; font-family: Arial; font-weight: bold; border: 2px solid rgba(255,255,255,0.8); padding-left: 20px; margin: 0 auto; box-sizing:border-box; -webkit-box-sizing:border-box; /*box-sizing不用计算宽度,直接把边框，padding也算进了宽度里面*/ transition:all 0.4s ease 0; -webkit-transition:all 0.4s ease 0; background: url(images/allow.png) no-repeat 130px center;}&.button:hover{ border: 2px solid rgba(255,255,255,1); background-position: 140px center;}&.button .line{ display: block; position: absolute; background: none; transition: 0.4s ease ; -webkit-transition: 0.4s ease ;}.button:hover .line{ background: #}.button .line-top{ height: 2px; width: 0px; left:-110%; top:-2px; &}&.button:hover .line-top{ width: 100%; left: -2px;}&.button .line-right{ height: 0; width: 2px; top:-110%; right: -2px;}&.button:hover .line-right{ height: 100%; width: 2px; top:-2px;}&&&.button .line-bottom{ height: 2px; width: 0px; right:-110%; bottom:-2px; &}&.button:hover .line-bottom{ width: 100%; right: -2px;}&&&&.button .line-left{ height: 0; width: 2px; bottom:-110%; left: -2px;}&.button:hover .line-left{ height: 100%; width: 2px; bottom:-2px;}&.tip{ position: absolute; padding: 0 14px; line-height: 35px; height:35px; background: #2dcb70; color: # font-size: 18px; margin: 0 auto; border-radius: 3px; -webkit-border-radius: 3px; opacity: 0; top: 100px;/*按钮与盒子顶部的距离*/}.tip em{ font-style: normal;}.tip span{ display: block; width: 0; height: 0; overflow: 0; border: 7px solid transparent; border-top-color:#2dcb70; position: absolute; top: 35px; left: 50%; margin-left: -3px; }
$(function(){
$('.link .button').hover(function(){ //给.link .button添加移动方法hover(移入,移除)
var title=$(this).attr('data');//获取到this也就是鼠标移入的标签中的data值
$('.tip em').text(title);//给.tip em添加上title
var pos=$(this).position().left+10;//获取鼠标移入的标签相对于已经设置定位的父元素的left
var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;//这句话的意思是 用tip的宽度减去this的宽度这里的宽度指的是所有宽度加起来除以2
var l=pos-
console.log(l)
$('.tip').css({'left':l+"px"}).stop().animate({'top':140,'opacity':1},400)//设置tip的css的left为l
//同时设置一个动画,top从100移动到140 opacity从0变成1 用时400秒
},function(){
//鼠标移出事件
$(".tip").stop().animate({'top':100,'opacity':0},400)
12345678910111213141516171819
$(function(){& $('.link .button').hover(function(){ //给.link .button添加移动方法hover(移入,移除)
var title=$(this).attr('data');//获取到this也就是鼠标移入的标签中的data值
$('.tip em').text(title);//给.tip em添加上title
var pos=$(this).position().left+10;//获取鼠标移入的标签相对于已经设置定位的父元素的left
var dis=($('.tip').outerWidth()-$(this).outerWidth())/2;//这句话的意思是 用tip的宽度减去this的宽度这里的宽度指的是所有宽度加起来除以2
var l=pos-dis;
console.log(l)
$('.tip').css({'left':l+"px"}).stop().animate({'top':140,'opacity':1},400)//设置tip的css的left为l
//同时设置一个动画,top从100移动到140 opacity从0变成1 用时400秒 },function(){
//鼠标移出事件
$(".tip").stop().animate({'top':100,'opacity':0},400)
文章数量：243 篇
评论数量：26 篇
标签数量：188 个
友链数量：4 个
建站日期：
运行天数：168 天
月度之星：
最后更新：
Powered by6174人阅读
jquery1.9.1.js
jquery mobile 1.4.2版
18x18px 底透明的png图标
使用图标，这个过程开始怎么弄都不行，只有个灰色的圆出现，不见图标；或者出现图标，但位置不对，经过看jquery demo，终于知道了如何使用
1 .当然是定义你的css图标类了
.ui-icon-myicon:after {
background-image: url(&img/title.png&);
/**你的图片，路径是相对于当前使用文件可以访问到的*/
background-size: 18px 18
border-radius: 0; /*图标形态，0=方形，不设置就是默认的圆形*/
关键的地方是 after ，之前不成功就是少了这个
2. 使用这个图标类
&&a href=&#&
class=&ui-btn ui-shadow
ui-btn-icon-top ui-icon-myicon&
data-transition=&slide&&标题&/a&
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：99797次
积分：1560
积分：1560
排名：第13962名
原创：39篇
评论：218条
(1)(2)(3)(2)(4)(1)(2)(1)(1)(1)(1)(1)(3)(2)(4)(2)(2)(1)(3)(1)(1)(4)360导航页图标拖动排序效果代码 - 源码下载 - A5源码
关键字：    
当前位置： >
360导航页图标拖动排序效果代码
详细介绍 - [ 360导航页图标拖动排序效果代码 ]
技术qq： 360导航页图标拖动排序效果代码是一款基于jquery实现的仿360浏览器导航页网站图标拖动排序特效。
下载地址 - [ 360导航页图标拖动排序效果代码 ]
推荐使用、下载，请使用解压文件；
下载本站资源，如服务器暂不能下载请过一段时间再试；
本站资源通过 、 等软件检测；
本站部分资源供学习交流使用，如商业用途，请购正版。
网友对“360导航页图标拖动排序效果代码”的评论
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
上一篇： & 下一篇：
您喜欢这个源码么？
本类热门源码
增值电信业务经营许可证:苏B2-CopyRight ©
All Rights reserved.}