js动画无缝轮播进度条文字页面展示 div弹窗遮罩效果

最新推荐文章于 2022-03-27 20:24:55 发布

weixin_38169722

最新推荐文章于 2022-03-27 20:24:55 发布

阅读量141

点赞数

文章标签： c# xhtml

原文链接：http://www.cnblogs.com/wwz-wwz/p/6053574.html

版权

1.无缝轮播

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        #a {
        width:400px;
        height:400px;
        margin:0 auto;
        background-color:yellow;
        overflow:hidden;
        }
        #b {
        width:2000px;
        height:400px;
        background-color:black;
        position:relative;
        }
            #b img {
            
            width:400px;
            height:400px;
            float:left;
            }



    </style>
</head>
<body>
    <form id="form1" runat="server">
<div id="a">
    <div id="b">
        <img src="images/1.jpg" id="bimg" />
        <img src="images/2.jpg" />
        <img src="images/3.jpg" />
        <img src="images/4.jpg" />
        <img src="images/1.jpg" />
    </div>
</div>
    </form>
</body>
</html>
<script>
    //一共四张图片，但是界面增加第一张图片，成为五张图片。当轮播到第五张图片的时候，页面马上把整张图层跳到原先初始位置，这是瞬间完成的，这就形成了当现实第五张照片时，图片层已经调换到一张图片了，就形成了无缝轮播的假象。是障眼法
    var a = parseInt($("#bimg").width());
    var count = 0;
    window.setInterval(function () {

        $("#b").animate({ "left": (-400 * count) }, 500, function () {
            if ($("#b").css("left") == "-1600px")
            {
                $("#b").css("left","0px");
            }
            
        });
       
        count++;
        if (count > 4)
        {
            count = 1;
        }
    }, 2000);
   



</script>

View Code

2.进度条

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        #a {
        width:500px;
        height:50px;
        background-color:#FFF8DC;
        }
        #b {
            top:15%;
        height:70%;
        position:relative;
        width:0%;
        background-color:#EEEE00;
        }


    </style>
</head>
<body>
    <form id="form1" runat="server">
   <div id="a">
       <div id="b"></div>
   </div>
        <input type="text" id="text" />
        <input type="button" id="btn"  value="提交"/>


    </form>
</body>
</html>
<script>
    $("#btn").click(function () {
        var num = parseInt($("#text").val()) * 0.01;
        var w = $("#a").width();
        $("#b").animate({ "width": (num * w) }, 500);
        






    });



</script>

View Code

3.文字页面展示

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
  <style>
      .a {
      width:50%;
      background-color:#FFEFDB;
      margin:20px auto;
      overflow:hidden;
      }

       #b {
      width:50%;
      height:18px;
      background-color:#EE5C42;
      margin:20px auto;
      overflow:hidden;
      }
      .aa {
      cursor:pointer;
      }


  </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="a">
            <div class="aa">漆黑一片，景物不可见。但山中并不宁静，猛兽咆哮，震动山河，万木摇颤，乱叶簌簌坠落。

    群山万壑间，洪荒猛兽横行，太古遗种出没，各种可怕的声音在黑暗中此起彼伏，直欲裂开这天地。

    山脉中，远远望去有一团柔和的光隐现，在这黑暗无尽的夜幕下与万山间犹如一点烛火在摇曳，随时会熄灭。

    渐渐接近，可以看清那里有半截巨大的枯木，树干直径足有十几米，通体焦黑。除却半截主干外，它只剩下了一条柔弱的枝条，但却在散发着生机，枝叶晶莹如绿玉刻成，点点柔和的光扩散，将一个村子笼罩。

    确切的说，这是一株雷击木，在很多年前曾经遭遇过通天的闪电，老柳树巨大的树冠与旺盛的生机被摧毁了。如今地表上只剩下八九米高的一段树桩，粗的惊人，而那仅有的一条柳枝如绿霞神链般，光晕弥漫，笼罩与守护住了整个村子，令这片栖居地朦朦胧胧，犹若一片仙乡，在这大荒中显得很神秘。

    村中各户都是石屋，夜深人静，这里祥和而安谧，像是与外界的黑暗还有兽吼隔绝了。</div></div>
        <div class="a">
            <div class="aa"> 一阵狂风吹过，一片巨大的乌云横空，遮住了整片夜空，挡住了那仅有的一点星华，山脉中更加黑暗了。

    一声凶戾的禽鸣自高天传来，穿金裂石，竟源自那片乌云，细看它居然是一只庞大到不可思议的巨鸟，遮天蔽月，长也不知多少里。

    路过石村，它俯视下方，两只眼睛宛若两轮血月般，凶气滔天，盯着老柳木看了片刻，最终飞向了山脉最深处。</div></div>
    </form>
</body>
</html>
<script>
    var all = new Array();
    var aa = $(".aa");
    $(".a").css("height", 18);
    for (var i = 0; i < aa.length; i++)
    {
        
        all[i] = aa.eq(i).text().trim();
        aa.eq(i).html(all[i].substr(0, 20) + "......");
        document.getElementsByClassName("aa")[i].index = i;
       
    }
    $(".aa").click(function ()
    {
        if ($(this).parent().height() <= 18)
        {
            $(this).text(all[this.index]);
            var hei = $(this).height();
            $(this).parent().animate({ "height": hei }, 500);

        }
        else
        {
            var ss = all[this.index].substr(0, 20) + "......";
            
            $(this).parent().animate({ "height": 18 }, 500, function ()
            {
                $(this).children(".aa:first").text(ss);
            });
        }

       








    });




</script>

View Code

4.div弹窗遮罩效果

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="Default5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.7.1.min.js"></script>
    <style>
        .popup {
        width:50%;
        left:25%;
        position:fixed;
        background-color:#FFE4B5;
        top:-500px;
        }
        .popup_head {
        width:100%;
        height:50px;
        background-color:#43CD80;
        position:relative;
        font-size:30px;
        font-weight:bold;
        text-align:center;
        line-height:50px;
        }
        .popup_content {
        width:80%;
        min-height:200px;
        left:10%;
        background-color:#EEE685;
        position:relative;
        word-wrap:break-word;
        font-size:20px;
        }
        .popup_foot {
        width:100%;
        height:50px;
        background-color:#6B8E23;
        position:relative;
        
        }
        .popup_btn {
        width:30%;
        height:40px;
        background-color:#FF4500;
        position:relative;
        left:35%;
        font-size:30px;
        font-weight:bold;
        text-align:center;
        line-height:40px;
        cursor:pointer;
        }
        .popup_dian {
        width:100%;
        height:5px;
        position:relative;
        
        }
        #btn1 {
        cursor:pointer;
        }
        #shade {
        width:100%;
        height:100%;
        background-color:black;
        position:fixed;
        opacity:0.5;
        visibility:hidden;
        }
    </style>



</head>
<body>
    <form id="form1" runat="server">
        <div id="shade"></div><%--注意顺序，必须在前面，在后面没有效果--%>
    <div class="popup" id="tan">
        <div  class="popup_head"></div>
        <div  class="popup_content">232321</div>
        <div  class="popup_foot">
            <div class="popup_dian" ></div>
            <div class="popup_btn" id="popup_btn" >确  定</div>
        </div>
    </div>
        
    </form>
    <br />
    <br />
    <input  type="text" id="text1" /><br /><br />
    <input  type="text" id="text2" /><br /><br />
    <input type="button" id="btn1" value="弹窗" />



</body>
</html>
<script>
    $("#btn1").click(function(){//启动弹窗
    
        var headline=$("#text1").val();
        var content = $("#text2").val();
        $("#shade").css("visibility", "visible");
        show(headline, content, $("#tan"));
        


      
    });
    $("#popup_btn").click(function () {


        hide($("#tan"));

    });
    function show(biaoti, neirong, yuansu) {//出现弹窗
        yuansu.children(".popup_head:eq(0)").html(biaoti);
        yuansu.children(".popup_content:eq(0)").html(neirong);
        yuansu.animate({ "top": 100 }, 500);
    };
    function hide(tanchuang) {//隐藏弹窗
        tanchuang.animate({ "top": -500 }, 500, function () {
            $("#shade").css("visibility", "hidden");//遮罩窗体隐藏
        });


    };

</script>

View Code

完！！

转载于:https://www.cnblogs.com/wwz-wwz/p/6053574.html

weixin_38169722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js动画无缝轮播进度条文字页面展示 div弹窗遮罩效果

1.无缝轮播<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">&l...
复制链接

扫一扫