您现在的位置是:首页 > 各类文章 > SEO优化网站首页SEO优化

倒计时源码及弹窗层效果展示

  • TEBSS
  • 2019-12-30 22:27:06
  • 658 次阅读
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" cont...

倒计时源码及弹窗层效果展示

<!doctype html>    
<html class="no-js" lang="">    
<head>    
<meta charset="utf-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<title>2020年倒计时 By 深圳市华顺光电科技有限公司 tebss</title>    
<meta name="description" content="">    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<!-- Place favicon.ico in the root directory -->    
<link rel="stylesheet" href="css/bootstrap.min.css">    
<link rel="stylesheet" href="css/bootstrap-theme.min.css">    
<link rel="stylesheet" href="css/font-awesome.min.css">    
<link rel="stylesheet" href="css/normalize.css">    
<link rel="stylesheet" href="css/main.css">    
<link rel="stylesheet" href="css/fonts.css">	    
<script src="js/modernizr-2.8.3.min.js"></script>    
		<style>    
<!--视频JS -->    
.banner {    
width: 100%;    
height: 100%;    
white-space: nowrap;    
}    
.one {    
position: relative;    
width: 25%;    
height: 88%;    
margin-right: 1%;    
display: inline-block;    
}    
.one img {    
width: 100%;    
height: 60%;    
}    
.text {    
position: absolute;    
font-size: 18px;    
color: #FFF;    
top: 83%;    
left: 5%;    
/* width: 55%;    
white-space: pre-wrap; */    
}    
.zol {    
width: 100%;    
height: 27%;    
position: absolute;    
top: 37%;    
left: 0;    
}    
.videos {    
display: none;    
position: fixed;    
left: 50%;    
top: 30%;    
width: 92%;    
z-index: 100;    
transform: translate(-50%, -50%);    
}    
.vclose {    
position: absolute;    
right: 26%;    
top: 5%;    
border-radius: 100%;    
width: 50px !important;    
height: 50px !important;    
}    
</style>    
	<!--视频JS -->    
</head>    
<body data-post="#/kareeb-a-free-html-coming-soon-website-template-jquery-counter">    
<!--[if lt IE 8]>    
            <p class="browserupgrade">您正在使用 <strong>已经过时的</strong> 浏览器访问本页面。为了您有一个良好的体验效果 <a href="https://browser.360.cn">请升级您的浏览器</a> 点击这里进行访问下载。</p>    
        <![endif]-->              
<div class="container">    
<div class="row">    
<div class="header">    
<h1>华顺光电</h1>    
<img class="img-responsive" src="img/header_border.jpg" alt="header one border"/>    
<p>致力于研发、设计、生产精密先进光学元器件的企业,产品广泛应用于工业激光、光通讯、生命科学、医疗、摄影、光学成像等邻域。 </p>    
								<h1>距2020年元旦还有</h1>    
</div><!-- header end -->    
		</div>    
</div>    
		<section>    
		<div class="container">    
		<div class="row">    
		<div class="count_down">    
		<ul id="kareeb_countdown">    
<li><span class="days">00</span><p class="days_text">Days</p></li>    
<li><span class="hours">00</span><p class="hours_text">Hours</p></li>    
<li><span class="minutes">00</span><p class="minutes_text">Minutes</p></li>    
<li><span class="seconds">00</span><p class="seconds_text">Seconds</p></li>    
</ul>    
		</div>    
		</div>    
		</div>    
		</section>    
				<!-- counnt dwon end -->    
				<div class="container">    
               	<div class="row">    
<footer class="col-md-12 border">    
<h1>Happy New Year!</h1>    
<img class="img-responsive" src="img/footer_border.jpg" alt="footer border"/>    
<div class="footer-menu">    
<ul class="menu">    
<li><a class="about_content_open" href="#">关于我们</a></li>    
<li><div class="one" ipath="https://tqmusic.oss-cn-hangzhou.aliyuncs.com/video/yc/hs.mp4"><a href="#">企业视频</a></div>     
<div class="videos"></div></li>     
<button class="helper-button-info" id="dialog-1">联系地址</button>    
</ul>    
</div>    
<p>版权所有 <a href="http://www.wahshun.cn/" target="_blank" title="华顺光电">深圳市华顺光电科技有限公司</a> - 技术支持 <a href="http://www.tebss.com/" title="TEBSS" target="_blank">TEBSS</a></p>    
</footer><!-- Footer end -->    
               	</div>    
</div>    
<!--About us Markup-->    
<div class="container" id="about-us">    
<div class="row">    
<div class="about_content" id="about_content">    
<div class="cross_btn"><a href=""><span class="my_popup_close fa fa-close"></span></a></div>    
<div class="left_content col-sm-12 col-md-6">    
<h1>关于我们</h1>    
<h4>>About us</h4>    
<p> 深圳市华顺光电科技有限公司是一家致力于研发、设计、生产精密先进光学元器件的企业,产品广泛应用于工业激光、光通讯、生命科学、医疗、摄影、光学成像等领域。</p>      
									<p>Shenzhen Huashun Optoelectronic Technology Co., Ltd. is an enterprise dedicated to R & D, design and production of precision and advanced optical components. Its products are widely used in industrial laser, optical communication, life science, medical treatment, photography, optical imaging and other fields. </p>    
<ul class="address-details">    
<li><i class="fa fa-map-marker"></i>深圳市龙华新区环观中路104号长京机器人产业园B栋6楼</li>    
<li><i class="fa fa-home"></i>18123972682 李经理</a></li>    
<li><i class="fa fa-envelope"></i>wahshun#wahshun.cn(将#替换为@)</a></li>    
</ul>    
</div>    
<div class="right_content col-sm-12 col-md-6">    
<h1>企业简介</h1>    
<h4>>Company profile</h4>    
<p> 公司生产设施完善,拥有完整的光学冷加工生产线,先进的光学镀膜设备和光学测量仪器,为客户精密光学元器件冷加工、镀膜,定制提供一条龙服务。    
</p>    
<p>    
The company has complete production facilities, complete optical cold processing production line, advanced optical coating equipment and optical measuring instruments, providing customers with one-stop service for cold processing, coating and customization of precision optical components.    
</p>    
</div>    
</div>    
</div>    
</div>    
<!--Newsletter Markup-->    
<div class="container">    
               	<div class="row">    
                  	<div >    
                   	<div class="contuct_us newsletter .center-pane"  id="newsletter_content">    
</div>    
</div>    
</div>    
</div>    
<!--Contact Markup-->    
<div class="container">    
               	<div class="row">    
                   	<div class="contuct_us" id="contact">    
<h1>Contact Us    
<a href=""><span class="my_popup_close fa fa-close"></span></a>    
</h1>    
<form method="post" action="#" id="contactform">    
<div class="col-lg-12 col-md-12 col-sx-12">    
                               	<label>Full Name </label>    
<input type="text" id="name" name="name">    
</div>    
<div class="col-lg-12 col-md-12 col-sx-12">    
                               	<label>Email Address</label>    
<input type="email" id="email" name="email">    
</div>    
<div class="col-lg-12 col-md-12 col-sx-12">    
                               	<label> Message</label>    
<textarea name="message" id="message"  rows="6"></textarea>    
</div>    
<div class="col-lg-12 col-md-12 col-sx-12">    
								<input type="submit" id="button-send" class="btn btn-success btn-block" value="Send">    
								<div id="success">Your message has been successfully!</div>    
								<div id="error">Unable to send your message, please try later.</div>    
</div>    
</form>    
</div>    
</div>    
</div>    
	<script src="js2/jquery-2.1.4.min.js "></script>    
<!--视频JS-->    
<script>    
$('.one').each(function () { //遍历视频列表    
$(this).click(function () { //这个视频被点击后执行    
var img = $(this).attr('vpath');//获取视频预览图    
var video = $(this).attr('ipath');//获取视频路径    
$('.videos').html("<video id=\"video\" poster='" + img + "' style='width: 50%;' src='" + video + "' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"img\c.png\"/>");    
$('.videos').show();    
});    
});    
function close1() {    
var v = document.getElementById('video');//获取视频节点    
$('.videos').css("display", "none");//点击关闭按钮关闭暂停视频    
v.pause();    
$('.videos').html();    
}    
</script>    
<!--联系方式JS-->		     
<script>    
	$( "#dialog-1" ).on("click", function () {    
		Helper.ui.dialog({    
			title: "联系地址",    
			content: "地  址:深圳市龙华新区环观中路104号长京机器人产业园B栋6楼</Br>电  话:18123972682</br>邮  箱:wahshun#wahshun.cn(请将#替换成@)</br>网  址:www.wahshun.cn"    
			,    
			darkMode: true    
		});    
	})    
</script>    
<!--联系方式JS -->    
		<link rel="stylesheet" href="css/easyhelper.min.css">    
		<script src="js2/es6-shim.min.js"></script>    
		<script src="js2/jquery-3.3.1.min.js"></script>    
		<script src="js2/jquery.transit.min.js"></script>    
		<script src="js2/easyhelper.min.js"></script>    
<!--联系方式JS -->		    
<script src="js/jquery.min.js"></script>    
		<script src="js/jquery.nicescroll.js"></script>    
<script src="js/jquery.countdown.min.js"></script>    
<script src="js/jquery.popupoverlay.js"></script>    
<script src="js/plugins.js"></script>    
<script src="js/main.js"></script>    
</body>    
</html>

这里是网页代码


链接地址:https://www.tebss.com/pc/a20191230/index.html


TAG: 无标签

文章评论 (0)

    • 这篇文章还没有收到评论,赶紧来抢沙发吧~


Top