cssjs特效代码（css动画效果代码）

今天给各位分享cssjs特效代码的知识，其中也会对css动画效果代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

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

使用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的样式

导航条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预览导航效果。如图：

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

JS代码解释[CSS+JS选项卡效果]

转载自：

script language=javascript

//一个JS自定义函数

function secBoard(n)

{

//secTable是表格的ID.也就是说那个表格元素的集合.cells是表格行或整个表格中所有单元格的集合.cells.length是这个集合的长度.

//下面这两语句的作用就是表格内所有的单元格的CSS样式名改为"SEC1"

for(i=0;isecTable.cells.length;i++)

secTable.cells[i].className="sec1";

//下面这语句的作用就是表格内被单击的单元格的样式名改为"SEC2"

secTable.cells[n].className="sec2";

//下面三句与上面换样式名的相似..作用是显示或隐藏所对应单元格的内容

for(i=0;imainTable.tBodies.length;i++)

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

/script

求一段div+css+js网页代码

html

head

script

function

draw()

{

myDiv.style.visibility="visible";

}

var

isClose=false;

function

bClose()

{

if(isClose==true)

{

myDiv.style.visibility="hidden";

}

}

function

isCloseCtrl(is)

{

isClose=is;

}

/script

/head

body

onmousedown="bClose()"

a

href="#"

onmousedown="draw()"

onmouseout="isCloseCtrl(true)"

onmouseover="isCloseCtrl(false)"显示DIV/a

div

id="myDiv"

onmousedown="draw()"

onmouseout="isCloseCtrl(true)"

onmouseover="isCloseCtrl(false)"

style="width:200px;height:110px;background:'#e5e5e5';padding-top:45px;padding-left:60px;visibility:

hidden;"

隐藏的DIV~~~

/div

/body

/html

直接粘贴到记事本里改名就能看效果了

不过我也是用记事本写的。。。家里没有编译器，所以有点不太工整，如果需要注释，说声我帮你补上

cssjs特效代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css动画效果代码、cssjs特效代码的信息别忘了在本站进行查找喔。