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

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: 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="data:images/1.jpg" id="bimg" />

        <img src="data:images/2.jpg" />

        <img src="data:images/3.jpg" />

        <img src="data:images/4.jpg" />

        <img src="data:images/1.jpg" />

    </div>

</div>

    </form>

</body>

</html>

<script>

    //一共四张图片，但是界面增加第一张图片，成为五张图片。当轮播到第五张图片的时候，页面马上把整张图层跳到原先初始位置，这是瞬间完成的，这就形成了当现实第五张照片时，图片层已经调换到一张图片了，就形成了无缝轮播的假象。是障眼法

    var a = parseInt($("#bimg").width());

    var count = ;

    window.setInterval(function () {

        $("#b").animate({ "left": (- * count) }, , function () {

            if ($("#b").css("left") == "-1600px")

            {

                $("#b").css("left","0px");

            }

        });

        count++;

        if (count > )

        {

            count = ;

        }

    }, );

</script>

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:%;

        height:%;

        position:relative;

        width:%;

        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) }, );

    });

</script>

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:%;

      background-color:#FFEFDB;

      margin:20px auto;

      overflow:hidden;

      }

       #b {

      width:%;

      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", );

    for (var i = ; i < aa.length; i++)

    {

        all[i] = aa.eq(i).text().trim();

        aa.eq(i).html(all[i].substr(, ) + "......");

        document.getElementsByClassName("aa")[i].index = i;

    }

    $(".aa").click(function ()

    {

        if ($(this).parent().height() <= )

        {

            $(this).text(all[this.index]);

            var hei = $(this).height();

            $(this).parent().animate({ "height": hei }, );

        }

        else

        {

            var ss = all[this.index].substr(, ) + "......";

            $(this).parent().animate({ "height":  }, , function ()

            {

                $(this).children(".aa:first").text(ss);

            });

        }

    });

</script>

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:%;

        left:%;

        position:fixed;

        background-color:#FFE4B5;

        top:-500px;

        }

        .popup_head {

        width:%;

        height:50px;

        background-color:#43CD80;

        position:relative;

        font-size:30px;

        font-weight:bold;

        text-align:center;

        line-height:50px;

        }

        .popup_content {

        width:%;

        min-height:200px;

        left:%;

        background-color:#EEE685;

        position:relative;

        word-wrap:break-word;

        font-size:20px;

        }

        .popup_foot {

        width:%;

        height:50px;

        background-color:#6B8E23;

        position:relative;

        }

        .popup_btn {

        width:%;

        height:40px;

        background-color:#FF4500;

        position:relative;

        left:%;

        font-size:30px;

        font-weight:bold;

        text-align:center;

        line-height:40px;

        cursor:pointer;

        }

        .popup_dian {

        width:%;

        height:5px;

        position:relative;

        }

        #btn1 {

        cursor:pointer;

        }

        #shade {

        width:%;

        height:%;

        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"></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":  }, );

    };

    function hide(tanchuang) {//隐藏弹窗

        tanchuang.animate({ "top": - }, , function () {

            $("#shade").css("visibility", "hidden");//遮罩窗体隐藏

        });

    };

</script>

完！！

js动画无缝轮播进度条文字页面展示 div弹窗遮罩效果的更多相关文章

原生js实现无缝轮播
原生js实现无缝轮播因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
js动画之轮播图
一. 使用Css3动画实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
js之无缝轮播图
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
京东首页原生----js制作|css动画|js动画|计时器--轮播图(好久没更新，这两天闲的蛋疼做个京东页面分辨率1366*768，919京东，适应没调！)要文件加关注找我要哦！
tween.js下面的轮播（饿了么点餐的那种效果）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
js、jQuery实现文字上下无缝轮播、滚动效果
因项目需要实现消息通知上下无缝轮播的效果,所以写了一下,在这个分享出来,希望再次遇到此需求的道友,可以直接拷贝来用,节约一点不必要的时间. 原生JS版本 <!DOCTYPE html> & ...
分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便还有非常有逼格的 ...
原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

随机推荐

jquery 实现ajax 上传文件的功能（使用插件 ajaxfileupload）
js文件的下载地址 : http://files.cnblogs.com/wangqc/ajaxfileupload.js 页面代码: <html> <!-- 引入相关的js文 ...
CCF真题之数字排序
201503-2 问题描述给定n个整数,请统计出每个整数出现的次数,按出现次数从多到少的顺序输出. 输入格式输入的第一行包含一个整数n,表示给定数字的个数. 第二行包含n个整数,相邻的整数之间用一 ...
部署ganglia3.7
环境 centOS6.6 gmetad节点关闭iptable gmetad和httpd只需要在一台节点安装,gmond需要在每台节点上安装. 一.安装epel源 sudo wget http://do ...
webpack我遇到的一些坑
我的第一个用于实验webpack的项目是一个拥有多个版本的项目.什么叫多个版本?这个项目对3个语言版本+3个不同城市版本+(移动端 + PC端),也就是3*3*2,18个版本. 我的第一次想法肯定是 ...
yii2购物车实现
1.商品列表中点击加入购物车,则跳转到购物车列表,效果如图所示: 视图代码goods/list.php中.代码如下: <?php echo Html::a('加入购物车',['cart','id ...
jquery ui和jquery easy ui的区别
jquery ui 是jquery开发团队开发,适用于网站式的页面.jquery easyui 是第三方基于jquery开发,适用于应用程序式的页面. 两者的方法调用也略有不同:jquery ui ...
postgres创建用户，表
使用createuser来创建用户 [postgres@web1 ~]$ /data/pgsql/bin/createuser --help createuser creates a new Post ...
zabbix用自带模板监控mysql
本身zabbix-agent没有提供对mysql监控的key,所以需要自定义key来应用这个模板默认的模板有以下三类 mysql.status[var] mysql.ping mysql.versi ...
多拉A梦——日语歌词
こんなこといいなできたらいいな这件事真好啊能够做到的话就好啦あんな梦(ゆめ) こんな梦(ゆめ) いっぱいあるけど那样的梦想这样的梦想我还有好多哪みんなみんなみんなかなえてくれる大家 ...
js作用域链与this
this的绑定与function和对象的定义位置无关,是由函数调用时的执行环境所决定的. scope chain是由函数定义时的位置决定的与函数调用时的执行环境无关.

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

js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果的更多相关文章

随机推荐

热门专题

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

js动画无缝轮播进度条文字页面展示 div弹窗遮罩效果的更多相关文章