实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
</head>
<style type="text/css">
/* === CSS Reset ========== */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }
input, button, select, textarea, a:fouse {outline:none}
li {list-style:none;}
img {border:none;}
textarea {resize:none;}
body {margin:0;font: 12px "微软雅黑"; background: #feecd4;}
/* === End CSS Reset ========== */
body{
min-width: 1000px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<950?"950px":"");
}
a{
text-decoration: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
.container{
width: 1000px;
margin: 0 auto;
position: relative;
/*height: 198px;*/
}
/* 头部 */
/*.main{
background: url("Images/main.jpg") no-repeat center;
background: #feecd4;
height: 351px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}*/
.main2{
background: url("Images/main2.png") no-repeat center;
height: 689px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
/*最小宽度*/
}
.main3{
/*background: url("Images/main3.jpg") no-repeat center;
height: 381px;*/
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}
.main3-text{
color:#744b00;
font-size: 23px;
font-weight: bold;
position: absolute;
left: 74px;
top: 210px;
}
.main3-text2{
color:#744b00;
font-size: 14px;
position: absolute;
left: 74px;
top: 254px;
line-height: 22px;
width: 867px;
}
.main-text{
position: absolute;
left: 360px;
top: 325px;
color:#b03b01;
font-size: 16px;
}
.main2-text1{
position: absolute;
left: 79px;
top: 45px;
color:#ffffff;
font-size: 16px;
}
.main2-text2{
position: absolute;
left: 69px;
top: 67px;
color:#ffffff;
font-size: 23px;
font-weight: bold;
}
.main2-text2 span{
color:#ffff00;
}
.main2-text3{
position: absolute;
left: 69px;
top: 97px;
color:#ffffff;
font-size: 18px;
}
.main2-text4{
position: absolute;
left: 382px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text4 span{
color:#ffe700;
font-weight: bold;
}
.main2-text5{
position: absolute;
left: 665px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text5 span{
color:#ffe700;
font-weight: bold;
}
.num{
position: absolute;
left: 248px;
top: 171px;
width: 124px;
height: 198px;
overflow: hidden;
}
.num-con{
position: relative;
top:-430px;
}
.num-img{
background: url("Images/num.png") no-repeat;
width: 124px;
height: 1298px;
margin-bottom: 4px;
}
.num2{
left: 399px;
}
.num3{
left: 551px;
}
.main3-btn{
width: 307px;
height: 95px;
position: absolute;
left: 313px;
top: -290px;
cursor: pointer;
}
</style>
<body>
<!-- <div class="main" title="赢5000元，为五一长假准备起来，10-50万出行保额任你转">
<div class="container">
<div class="main-text"><strong>活动时间：</strong>2015年4月1日-5月20日</div>
</div>
</div> -->
<div class="main2">
<div class="container">
<!-- <div class="main2-text1">五一拼假有讲究，还没有人告诉你？</div>
<div class="main2-text2">
<span>请4天得9天假</span>，攻略奉上
</div>
<div class="main2-text3">赶紧为你的假期准备起来吧！</div>
<div class="main2-text4">
时间有了，<br>
<span>旅游资金呢？出行保障呢？</span>
</div>
<div class="main2-text5">
Come on，<span>一站式为您搞定</span><br>
请叫我红领巾！
</div> -->
<div class="num num1">
<div class="num-con num-con1">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num2">
<div class="num-con num-con2">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num3">
<div class="num-con num-con3">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
</div>
</div>
<div class="main3">
<div class="container">
<div class="main3-btn"></div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript">
// $(function(){
// init();
// var iframe = document.getElementById("submitiframe");
// if (iframe.attachEvent) {
// iframe.attachEvent("onload", function() {
// var res = iframe.contentWindow.document.documentElement.outerHTML;
// if (res.indexOf("200") >= 0) {
// clearform();
// $(".pop-form").hide();
// $(".success-con").show();
// }
// });
// } else {
// iframe.onload = function() {
// var res = iframe.contentWindow.document.documentElement.outerHTML;
// if (res.indexOf("200") >= 0) {
// clearform();
// $(".pop-form").hide();
// $(".success-con").show();
// }
// };
// }
// });
// function init(){
// var host = location.host;
// var turl = "http://" host "/hd/aio/thanks/get.php";
// var qdh = getUrlParam("qdh");
// var cc = getUrlParam("cc");
// var campaign = getUrlParam("campaign");
// var ccode = cc ? cc : campaign;
// var iq_id = getUrlParam("iq_id");
// var iq_id = (iq_id.replace(/(^\s*)|(\s*$)/g, "").length != 0) ? iq_id : 'C20150319';
// $("#url").val(turl);
// $("#iqId").val(iq_id);
// if (ccode){
// $("#campaignCode").val(ccode);
// } else {
// $("#campaignCode").val('1LDG175CA6');
// }
// if (host.indexOf(".cigna") > 0) {
// document.myform.action = "http://LG.cignacmb.com/cmc-lg/formCmc2Action_saveForm.action";
// } else {
// document.myform.action = "http://10.140.5.69/cmc-lg/formCmc2Action_saveForm.action";
// }
// }
// function getUrlParam(name) {
// var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)", "i");
// var r = window.location.search.substr(1).match(reg);
// if (r != null)
// return unescape(r[2]);
// return '';
// }
// //提交用户选择内容
// $(".pop-form-btn").click(function () {
// var name = $("#name").val();
// name = name.replace(/(^\s*)|(\s*$)/, "");
// if (name.length >= 25 || name.length < 1)
// {
// layer.tips('请输入合法的姓名', $("#name") , {guide: 0,time: 3, style: ['background-color:#3fa7e9; color:#fff', '#3fa7e9']});
// return;
// }
// var sex=$(".sex-con :radio:checked").length
// if(!sex)
// {
// layer.tips('请选择性别', $(".sex-con") , {guide: 0, time: 3,style: ['background-color:#3fa7e9; color:#fff', '#3fa7e9']});
// return;
// }
// var area=$(".area-text").text();
// if(area=="请选择")
// {
// layer.tips('请选择所在地', $(".area-text") , {guide: 0, time: 3,style: ['background-color:#3fa7e9; color:#fff', '#3fa7e9']});
// return;
// }
// var m1 = /^(1[3578][0-9]|14[57])\d{8}$/;
// var mobile = $("#mobile").val();
// mobile = mobile.replace(/(^\s*)|(\s*$)/, "");
// if(!mobile.length)
// {
// layer.tips('请填写您的手机号码', $("#mobile") , {guide: 0, time: 3,style: ['background-color:#3fa7e9; color:#fff', '#3fa7e9']});
// return;
// }
// if (!(m1.test(mobile)))
// {
// layer.tips('请输入正确的电话号码', $("#mobile") , {guide: 0, time: 3,style: ['background-color:#3fa7e9; color:#fff', '#3fa7e9']});
// $("#mobile").focus();
// return;
// }
// var remark = $(".pop-text span").text() "万";
// $("#remark").val(remark);
// $('#myform')[0].submit();
// $(".pop-form").hide();
// $(".success-con").show();
// })
// $(".success-ok,.success-close").click(function () {
// $(".success-con,.fix").hide();
// })
// $(".area").on("click",function(e){
// $(this).find(".area-list").toggle();
// });
// $(".area-item").on("click",function(e){
// $(".area-text").text($(this).text());
// $('#province').val($(this).text());
// $(".area-list").hide();
// return false;
// })
// $(document).on("click",function(e){
// if(!$(e.target).closest(".area").length)
// {
// $(".area-list").hide();
// }
// });
// $(".pop-form-close").click(function () {
// $(".fix,.pop-form").hide();
// })
// $(".pop-close-icon").click(function () {
// $(".fix,.pop").hide();
// })
// //满足了
// $(".pop-close").click(function () {
// $(".pop").hide();
// $(".fix,.pop-form").show();
// })
// //再来一发
// $(".pop-ok").click(function () {
// $(".fix,.pop").hide();
// $(".main3-btn").click();
// })
$(".main3-btn").click(function () {
if(!flag){
flag=true;
reset();
letGo();
setTimeout(function () {
flag=false;
if(index==2){
$(".fix,.pop-form").show();
}else{
$(".fix,.pop").show();
$(".pop-text span").text("" String(4-TextNum1) (8-TextNum2))
}
},4000);
index ;
}
});
var flag=false;
var index=0;
var TextNum1
var TextNum2
var TextNum3
function letGo(){
TextNum1=parseInt(Math.random()*4)//随机数
TextNum2=parseInt(Math.random()*7)
TextNum3=parseInt(Math.random()*7)
var num1=[-549,-668,-786,-904][TextNum1];//在这里随机
var num2=[-1377,-1495,-1614,-430,-549,-668,-786,-904][TextNum2];
var num3=[-1377,-1495,-1614,-430,-549,-668,-786,-904][TextNum3];
$(".num-con1").animate({"top":-1140},1000,"linear", function () {
$(this).css("top",0).animate({"top":num1},1000,"linear");
});
$(".num-con2").animate({"top":-1140},1000,"linear", function () {
$(this).css("top",0).animate({"top":num2},1800,"linear");
});
$(".num-con3").animate({"top":-1140},1000,"linear", function () {
$(this).css("top",0).animate({"top":num3},1300,"linear");
});
}
function reset(){
$(".num-con1,.num-con2,.num-con3").css({"top":-430});
}
// function clearform(){
// $('#name').val("");
// $('#province').val("");
// $('#mobile').val("");
// $('#remark').val("");
// $('.area-text').html('请选择');
// $(".sex-con label input").attr("checked",false);
// }
</script>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论