导航:首页 > 万维百科 > 网页设计下滑效果

网页设计下滑效果

发布时间:2020-09-04 09:31:46

1、网页设计里关于滑动门特效问题

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="mmm.css" type="text/css" rel="stylesheet" />
<script>
function yb()
{
var x1=document.getElementById("diyi");
var x2=document.getElementById("dier");
var x3=document.getElementById("disan");
x1.className="diyi";
x2.className="yincang"
x3.className="yincang"
}
function eb()
{
var x1=document.getElementById("dier");
var x2=document.getElementById("diyi");
var x3=document.getElementById("disan");
x1.className="dier";
x2.className="yincang"
x3.className="yincang"
}
function sb()
{
var x1=document.getElementById("disan");
var x2=document.getElementById("diyi");
var x3=document.getElementById("dier");
x1.className="disan";
x2.className="yincang"
x3.className="yincang"
}
</script>
</head>

<body>
<div id="all">
<div id="left" onmouseover="yb()"></div>
<div id="middle" onmouseover="eb()"></div>
<div id="right" onmouseover="sb()"></div>
<div id="diyi" class="diyi"></div>
<div id="dier" class="dier yincang"></div>
<div id="disan" class="disan yincang"></div>

</div>

</body>
</html>

这是页面代码,
<style>
#all{ width:330px; height:300px;}
#left{ width:100px; height:100px; background-color:#9F3; float:left; margin-right:10px;}
#middle{ width:100px; height:100px; background-color:#0F0; float:left; margin-right:10px}
#right{ width:100px; height:100px; background-color:#CF3; float:left;}
.diyi{ width:330px; height:200px; background-color:#0FF; margin-bottom:0px; float:left;}
.dier{ width:330px; height:200px; background-color:#CCC; float:left;}
.disan{ width:330px; height:200px; background-color:#FF6; float:left;}

.yincang{ display:none;}
</style>
这是CSS代码

你直接使用X2这个的时候有没有想过

var x2=document.getElementById("diyi");
var x2=document.getElementById("dier");
后面document.getElementById("dier")重新赋值给了X2?简单点就是后面的起作用,前面的被覆盖

2、Dreamweaver做网页的下滑翻页模式怎么做?

这东西专业名词叫 Carousel 走马灯,刚不刚接触这行业的不重要,你如果是给公司做开发,那你们公司框架里应该有自己UI库,这些东西直接从引用库里的组件就行了
如果你是私人做这东西的话 只要你有 html js css基础 ,直接在你图二网页上 F12 照着人家的结构把html复制下来,css复制一份搞到自己css库里,然后写一点简单的js就出来效果了

3、css问题,怎么更改样式让网页可以下滑

在绝对定位的最外层增加一个div,然后吧绝对定位的高度用js赋值给这个div,然后给这个div加上overflow:hidden;的样式,就可以出现滚动了,当然高度要超过屏幕才会

4、我们要做一个网页设计,我做了几个页面,我现在需要把链接到一起,但是我想做那种类似滑动的效果

是不是想要实现鼠标到那一个按钮那边 就显示你做的那个页面???

这个是个js调用 你在网上直接搜js滑动框 就能找到了 具体方式查一下吧 我一写代码 就把我屏蔽了!!!!唉!
希望能帮到你

5、网页制作,慢慢下拉的菜单怎么做?

这个效果你可以通过2中途径实现,使用框架或者是使用JavaScript代码。

1.使用框架:查找框架中的二级菜单组建,如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子


<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

详细内容参见http://v3.bootcss.com/components/#navbar

2.使用JavaScript代码。使用jQuery的动画实现,如slideToggle()可使元素上下滑动,并且可以使用参数控制快慢。

<script>
//ID menu是点击的以及菜单,触发的是点击事件,当然可以换成hover事件,ID submenu是二级菜单层。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()请参考http://www.w3school.com.cn/jquery/jquery_slide.asp

6、网页设计中怎么在页面中设置一个滚动条

css属性 overflow-y:auto; DIV里面的内容超过DIV的高度,右边就会自动出现滚动条

1、用一个div,定制成图中的宽度和高度
2、然后再把div的样式设成overflow-y:scroll,当div里的文字超出那个高度的时候,滚动条就出来了。
例如:<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

7、网页中滚动条可以触发animate动画效果么,就是边滚动条下滑,边出现其效果?

你可以去来创业素材下载响应式模板,这些模板就有你想要的这个边滚动边显示特效

8、html 网页打开一部分内容下滑400px左右这个效果怎么做出来?

js或者css3都可以直接实现

9、网页设计:下拉菜单的十几种表现形式

网页设计或者应用UI网页设计中经常会出现下拉菜单,主要是会将不常用的同类选项或者提醒放置其中,如何设计下拉菜单,网页设计出图片以及裁剪后的大小,然后后台再把这些做起来,这些作品或许能给你启发。下面先看下这些作品的设计风格,我相信会对你们有大的启发的,设计感实在是需要慢慢的积累创新的,时代进步不得不把我们带的进步。具体内容可以参看百家号

与网页设计下滑效果相关的知识