首页 > 代码库 > js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
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=http://www.mamicode.com/"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=http://www.mamicode.com/"images/1.jpg" id="bimg" /> <img src=http://www.mamicode.com/"images/2.jpg" /> <img src=http://www.mamicode.com/"images/3.jpg" /> <img src=http://www.mamicode.com/"images/4.jpg" /> <img src=http://www.mamicode.com/"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>
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=http://www.mamicode.com/"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=http://www.mamicode.com/"提交"/> </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>
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=http://www.mamicode.com/"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>
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=http://www.mamicode.com/"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=http://www.mamicode.com/"弹窗" /> </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>
完！！
js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。