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布局,所以没有使 ...
随机推荐
- SQL封装、多态与重载
面向对象1.类:众多对象抽象出来的2.对象:类实例化出来的 3.类的定义关键字 class 4.类里面包含成员变量成员属性 成员方法 5.面向对象三大特性(1)封装目的:保护类,让类更加安全.做法:让 ...
- Java: xml转换
java对于xml的转换有很多种,比较有名的有:DOM, DOM4J, JDOM, SAX.这里要介绍的是javax.xml包的对xml文件的转换.相比于前面几种是最简单的. 直接上代码: Stude ...
- :nth-child()和:nth-of-type(n)区别
ele:nth-child(n) 父元素下第n个元素且这个元素为ele ele:nth-of-type(n) 指父元素下第n个ele元素
- 有关git的换行符的处理问题
签入签出时对换行符的操作: #签出时将LF转换为CRLF,签入时将CRLF转换为LF git config --global core.autocrlf true #签出时不转换,签入时转换为LF g ...
- RobotFrameWork接口报文测试-----（二）demo的升级版
在上一篇,简单的demo实现了讲xml的数据发送服务器端并取得recvi_buf,然后进行了简单的解析的操作.现在就要解决之前提过的2个问题: 1. 步骤这么多,难道每写一个脚本都要重复一次么? 2. ...
- DB2 Unload 的时候遇到B37-04
B37-04的问题是每个Mainframer首先会遇到的问题,在Unload的时候最大的可能性是Extend次数到16次了,这时候只要加大primary或secondary就可以了,我最常用的是pri ...
- 编写更少bug的程序的六条准则
如何编写更少bug的程序? 尽可能避免常见的程序错误. 沟通设计先行 + 编写可复用代码 + 做得更多 + 做的更少 + 创造“编程心流”+ 严格的程序测试 ...
- Google 开发新的开源系统 Fuchsia
google 最新os 下载 https://github.com/fuchsia-mirror/magenta 本文转自:http://www.oschina.net/news/76094/goog ...
- move语义和右值引用
C++11支持move语义,用以避免非必要拷贝和临时对象. 具体内容见收藏中的“C++右值引用” .
- php的内存分配还是很智能的
<?php echo memory_get_usage().PHP_EOL;$a = 1;$b = $a;echo memory_get_usage().PHP_EOL; <?php ec ...