css3里怎样使div从左(无)到右(有)滑入页面

css3里怎样使div从左(无)到右(有)滑入页面,第1张

代码如下:

<h1>CSS3滑入/滑出效果</h1>

<div id="volet_clos">

  <div id="volet">

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Minima quisquam tempora quaerat dolores molestias reiciendis </p>

      <p>vero labore voluptates necessitatibus ut Et</p>

      <p>vero labore voluptates necessitatibus ut Et</p>

      <p>vero labore voluptates necessitatibus ut Et</p>

      <p>vero labore voluptates necessitatibus ut Et</p>

      <a href="#volet"  aria-hidden="true" class="ouvrir">滑出</a>

      <a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>

  </div>

</div>

扩展资料

web网页设计的重要注意事项:

1、网页版面设计合理性

网页设计过程中,一定要留意网页版式的合理性,通过合理的网页布局让用户浏览起来比较顺畅舒适,注意网页版式的设计,不要块块之间过于冗繁,显示拥挤,要有主次分明,注意简练大方。

2、运用舒缓的色彩设计

在网页色彩搭配上,采用淡色系进行页面设计,特别要注意颜色的分配,总体颜色不宜超过三种颜色,可以确定一个主颜色再加上辅助颜色进行点缀搭配,这样整体设计展现出来比较调和、舒缓,用户浏览页面也不会导致眼花缭乱,眼睛疲劳。

3、丰富的页面内容

丰富的内容赋予网页生命力,用户都是喜欢有新鲜、丰富内容的网页,一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。

丰富内容的网页对于搜索引擎也是受欢迎的,当搜索引擎每次来到我们网站进行抓取内容的时候,如果我们的网页内容保持新鲜、原创,将会很快进行收录,这对于网站整体优化排名都是有好处的。

<script language="javascript" type="text/javascript">
//滚动展示 Start
var counts = 4;
//大图//
img1 = new Image();
img1src = 'images/1jpg';
img2 = new Image();
img2src = 'images/2jpg';
img3 = new Image();
img3src = 'images/3jpg';
img4 = new Image();
img4src = 'images/4jpg';

var smallImg = new Array();
//小图
smallImg[0] = 'images/index_adb1gif';
smallImg[1] = 'images/index_adb2gif';
smallImg[2] = 'images/index_adb3gif';
smallImg[3] = 'images/index_adb4gif';

//链接地址
url1 = new Image();
url1src = ' >

最近正好写了个代码好像就是你要的效果 这种效果较轮播吧好像是

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1css">
<script src="jquery-214js"></script>
</head>
<body>
<button id="prev">前一张</button>
<button id="next">后一张</button>
<div class="imgList">
    <div class="imgList-style">
        <div class="imgList1">
            <img class="img" src="1jpg">
            <img class="img" src="1jpg">
            <img class="img" src="1jpg">
            <img class="img" src="1jpg">
            <img class="img" src="1jpg">
        </div>
        <div class="imgList2">
            <img class="img" src="2jpg">
            <img class="img" src="2jpg">
            <img class="img" src="2jpg">
            <img class="img" src="2jpg">
            <img class="img" src="2jpg">
        </div>
        <div class="imgList3">
            <img class="img" src="3jpg">
            <img class="img" src="3jpg">
            <img class="img" src="3jpg">
            <img class="img" src="3jpg">
            <img class="img" src="3jpg">
        </div>
        <div class="imgList4">
            <img class="img" src="4jpg">
            <img class="img" src="4jpg">
            <img class="img" src="4jpg">
            <img class="img" src="4jpg">
            <img class="img" src="4jpg">
        </div>
    </div>
</div>
</body>
<script src="1js"></script>
</html>$(document)ready(function(){
    var marginpx = 0,
        imgList = $('imgList')width(),
        num = $('imgList-style div')length-1;
    $("#prev")click(function(){
        if(marginpx !=0){
            marginpx += imgList;
            $("imgList-style")css("margin-left",marginpx+"px");
        }else{
            marginpx = numimgList-1;
            $("imgList-style")css("margin-left",marginpx+"px");
        }
    });
    $("#next")click(function(){
        if(marginpx != (numimgList-1)){
            marginpx -= imgList;
            $("imgList-style")css("margin-left",marginpx+"px");
        }else{
            marginpx = 0;
            $("imgList-style")css("margin-left",marginpx+"px");
        }
    });
});img{
width:150px;
height:100px;
}
imgList{
width:782px;
height:auto;
overflow-x:hidden;
}
imgList-style{
transition: margin-left 1s;
-moz-transition: margin-left 1s; / Firefox 4 /
-webkit-transition: margin-left 1s; / Safari 和 Chrome /
-o-transition: margin-left 1s; / Opera /
width:3128px;
height:103px;   
}
imgList1,imgList2,imgList3,imgList4{
float:left;
}

第一个是HTML 第二个是JS第三个是CSS


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13406313.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-30
下一篇 2023-07-30

发表评论

登录后才能评论

评论列表(0条)

保存