cssjs特效代码（css文字特效代码）

本篇文章给大家谈谈cssjs特效代码，以及css文字特效代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、导航条js+css特效代码怎么用
• 2、使用css+js怎么才能做到这样的效果（见详情）
• 3、如何将CSS特效代码和JS文件 添加到自己的网页上面去
• 4、div+css js制作特效，帮我看看这代码是什么意思

导航条js+css特效代码怎么用

导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。

1、打开Dreamweaver创建新页面，输入以下代码。如图：

!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"

html xmlns="

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

script src="

titlecss菜单演示/title

style type="text/css"

!--

*{margin:0;padding:0;border:0;}

body {

 font-family: arial, 宋体, serif;

        font-size:12px;

}

#nav {

  line-height: 24px; list-style-type: none; background:#666;

}

#nav a {

 display: block; width: 80px; text-align:center;

}

#nav a:link {

 color:#666; text-decoration:none;

}

#nav a:visited {

 color:#666;text-decoration:none;

}

#nav a:hover {

 color:#FFF;text-decoration:none;font-weight:bold;

}

#nav li {

 float: left; width: 80px; background:#CCC;

}

#nav li a:hover{

}

#nav li a.on{ background:#999;}

#nav li ul {

 line-height: 27px; list-style-type: none;text-align:left;

 left: -999em; width: 180px; position: absolute; 

}

#nav li ul li{

 float: left; width: 180px;

 background: #F6F6F6; 

}

#nav li ul a{

 display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;

}

#nav li ul a:link {

 color:#666; text-decoration:none;

}

#nav li ul a:visited {

 color:#666;text-decoration:none;

}

#nav li ul a:hover {

 color:#F3F3F3;text-decoration:none;font-weight:normal;

 background:#C00;

}

#nav li:hover ul {

 left: auto;

}

#nav li.sfhover ul {

 left: auto;

}

#content {

 clear: left; 

}

--

/style

script type=text/javascript!--//--![CDATA[//!--

$(function(){

  $("#nav li").hover(function(){

  $(this).children("a").toggleClass("on"); 

  })

})

function menuFix() {

 var sfEls = document.getElementById("nav").getElementsByTagName("li");

 for (var i=0; isfEls.length; i++) {

  sfEls[i].onmouseover=function() {

  this.className+=(this.className.length0? " ": "") + "sfhover";

  }

  sfEls[i].onMouseDown=function() {

  this.className+=(this.className.length0? " ": "") + "sfhover";

  }

  sfEls[i].onMouseUp=function() {

  this.className+=(this.className.length0? " ": "") + "sfhover";

  }

  sfEls[i].onmouseout=function() {

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");

  }

 }

}

window.onload=menuFix;

//--!]]/script

/head

body

ul id="nav"

lia href="#"百度知道/a

 ul

 lia href="#"百度芝麻/a/li

 lia href="#"产品一/a/li

 lia href="#"产品一/a/li

 lia href="#"产品一/a/li

 lia href="#"产品一/a/li

 lia href="#"产品一/a/li

 /ul

/li

lia href="#"百度行家/a

 ul

 lia href="#"服务二/a/li

 lia href="#"服务二/a/li

 lia href="#"服务二/a/li

 lia href="#"服务二/a/li

 lia href="#"服务二/a/li

 lia href="#"服务二/a/li

 /ul

/li

lia href="#"百度芝麻酱/a

 ul

 lia href="#"案例三/a/li

 lia href="#"案例三/a/li

 /ul

/li

lia href="#"关于百度/a

 ul

 lia href="#"关于百度/a/li

 lia href="#"关于百度/a/li

 lia href="#"关于百度/a/li

 lia href="#"关于百度1/a/li

 /ul

/li

lia href="#"在线百度/a

 ul

 lia href="#"演示/a/li

 lia href="#"演示/a/li

 lia href="#"演示/a/li

 lia href="#"演示演示演示/a/li

 lia href="#"演示演示演示/a/li

 lia href="#"演示演示/a/li

 lia href="#"演示演示演示/a/li

 lia href="#"演示演示演示演示演示/a/li

 /ul

/li

lia href="#"联系百度/a

 ul

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 lia href="#"联系百度/a/li

 /ul

/li

 /ul

/li

/ul

/body

/html

2、点击F12预览导航效果。如图：

注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。

使用css+js怎么才能做到这样的效果（见详情）

这个问题正好前段时间也有研究，JS代码附上：

(function(){

$(window).on('scroll',function(){

var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'),

top;

if($.browser.webkit)

$body = $('body');

//上面是获取浏览器窗口的属性之类的东西啦

var headHeight = $('#head').height();

//假设你导航上面是head这个div,要获取一下这个的高度

top = $body.scrollTop() headHeight;

//假设鼠标骨下来的高度大于你上面获取的那个div的高度，然后进行下面的判断,只要是滑下面的高度大于head的高度，下面的if都成立

if(top){

$('#nav').addClass('fdstyle');

//其实就是你那个head滑不见的时候，则#nav加一个样式。样式需要注意一下，写成始终居于顶部的样式

}else{

$('#nav').removeClass('fdstyle');

$('#nav').removeAttr('style');

//当鼠标滑上去。那个头部head可以看见了，即条件不成立的时候，则去掉那个样式，用正常的样式。

}

});

})();

对了，新写的样式，一定要记得权重提高一些，要比正常的class权重高，不然样式冲突的话，会无法实现。

比如正常的样式用#nav {...} 则这个.fdstyle 则需要再拉一层# ，比如#main .fdstyle 具体可以百度一下CSS选择器权重

如何将CSS特效代码和JS文件 添加到自己的网页上面去

css特效文件一般情况下都有指定位置的，比如是放在head里面或是body里面的，这是网上搜的一些css特效文件的用法，一般情况下都有注明的。js文件添加到页面去更简单了，把js文件放到你的网页同级目录或是其他目录，然后你直接将此js文件直接拖到你的网页head里面，然后前台页面调用即可。

div+css js制作特效，帮我看看这代码是什么意思

moveElement：将elementID按照指定的时间间隔interval反复移动,直到左边距=final_x,上边距=final_y为止.

classNormal： 给所有的iFocusBtnID和iFocusTxID元素里面的li增加一个normal的样式

classCurrent： 给所有的iFocusBtnID和iFocusTxID元素里面的li增加一个current的样式

关于cssjs特效代码和css文字特效代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。