目录
一、前言
本实例以“环境”环保为主题设计，应用html+css+js，包括图片轮翻效果、点击事件、留言表单等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！
二、网页文件
三、网页效果
以下为网页正文（节选示例）：
四、代码展示
1.HTML
代码如下（节选示例）：
<html>
<head>
<!-- 启用极速模式(webkit) -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KeyWords" content="首页">
<meta name="description" content="首页">
<title>首页</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name='apple-touch-fullscreen' content='yes' />
<meta name="full-screen" content="yes">
<!-- SEO友好提示 -->
<meta name="applicable-device" content="pc,mobile">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/ubox.js" charset="utf-8"></script>
<script type="text/javascript" src="js/wow.js" charset="utf-8"></script>
<script type="text/javascript" src="js/alert.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<link rel="stylesheet" type="text/css" href="css/box.css" />
<link rel="stylesheet" type="text/css" href="css/alert.css" />
<link rel="stylesheet" type="text/css" href="css/0167559.css" />
<script>
var batchArr = [];
var checkLoad = 0; //判断是否是回调完成的
</script>
<script>
var isOpenMobie = 2;
var isOpenPad = 2;
if (isOpenMobie == 1) {
if (isOpenPad == 1) {
$("body").css("width", "auto");
} else {
//是否手机端判断
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
if (isMobile) {
$("body").css("width", "1280px");
} else {
$("body").css("width", "auto");
}
}
} else {
$("body").css("width", "auto");
//是否手机端判断
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
if (isMobile) {
$("head").append("<meta content='width=320,user-scalable=no' name='viewport'>");
} else {
$("head").append("<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport' />");
}
}
</script>
<script>
$(window).load(function() {
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
setTimeout(function() {
new WOW().init()
}, 150)
};
});
var DIY_WEBSITE_ID = "178";
var DIY_JS_SERVER = "s143js.nicebox.cn";
</script>
</head>
<body>
<script type="text/javascript">
var Default_isFT = 0;
</script>
<script type="text/javascript" src="js/transform.js"></script>
<div id="comm_layout_header" class="layout none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div class="view_contents">
<div id="text_style_02_1490063023274" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="text_style_02_1490063046138" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="dh_style_01_1490063713095" class="view " data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="" class="view_contents">
</div>
</div>
<div id="image_style_01_1492669021720" class="view style_01 image none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="imgStyle CompatibleImg">
<a href='javascript:;' target="">
<img class="picSet link-type-" src="picture/timg.jpg" title="" alt="描述" id="imageModeShow" />
</a>
</div>
<!-- 新加的js -->
</div>
</div>
<div id="div_blank_1492665389276" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<!--
<a href="#" style="display:block;width:100%;height:100%;" id="divnet"></a>
-->
</div>
</div>
<div id="div_includeBlock_1492656898130" class="view includeBlock div none includeView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
<div id="dh_style_01_1492656952980" class="view style_01 dh none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="dh" class="view_contents">
<div id="menu" class="menu menuStyle_1">
<div class="menuLayout">
<ul class="miniMenu columnSet showmobile">
<li class="leftBox">
<div class="nav"></div>
<div class="sidebar icoMenuSet" οnclick="setDhListen('style_01',this)">=</div>
<div class="menuScroll">
<ul class="menuUlCopy">
<li id="hot" class="rflex" pageid="167559" showmobile=""><a class="mainMenuSet" href="index.html">首页</a>
</li>
<li class="rflex" pageid="167565" showmobile=""><a class="mainMenuSet" href="about.html">关于我们</a>
</li>
<li class="rflex" pageid="167561" showmobile=""><a class="mainMenuSet" href="news.html">环保咨询</a>
</li>
<li class="rflex" pageid="167563" showmobile=""><a class="mainMenuSet" href="contact.html">联系我们</a>
</li>
</ul>
</div>
</li>
</ul>
<div class="menuUl_box columnSet showpc">
<ul class="menuUl dflex">
<!-- 1167559 test-->
<li id="hot" class="rflex" pageid="167559" showpc="">
<a class="mainMenuSet" href="index.html">首页</a>
</li>
<!-- 1167565 test-->
<li class="rflex" pageid="167565" showpc="">
<a class="mainMenuSet" href="about.html">关于我们</a>
</li>
<!-- 1167561 test-->
<li class="rflex" pageid="167561" showpc="">
<a class="mainMenuSet" href="news.html">环保咨询</a>
</li>
<!-- 1167563 test-->
<li class="rflex" pageid="167563" showpc="">
<a class="mainMenuSet" href="contact.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 菜单区域 End-->
<!-- -->
</div>
</div>
<div id="user_style_05_1492758156693" class="view style_05 user none lockHeightView" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="user" class="view_contents">
<!---菜单区域--->
<!--弹窗登录 PopupLogin -->
<div id="UserLoginMain" class="PopUpLogin PopUpLoginStyle_1">
<div id="popUpLogin-t" class="Login_before">
<ul class="v9_hide_if_logined">
<li class="showpLogin textSet"><a href="#" οnclick="OnLogin(0);">登录</a></li>
<li class="w textSet">|</li>
<li class="showpRegistered textSet"><a href="#" οnclick="OnRegister(0);">注册</a></li>
<div style="display:inline-block"><span id="userQQLi" class="LoginStatic"><img width="16" src="picture/02.png" href="#" title="QQ登录" id="idQQlogin" align="absmiddle"></span></div>
<div style="display:inline-block"><span id="userWXLi" class="LoginStatic"><img width="22" src="picture/03.png" href="#" title="微信登录" id="idWXlogin" align="absmiddle"></span></div>
</ul>
</div>
<!--登录后显示-->
<div class="Login_after" style="display: none;"></div>
</div>
<script src="js/userloginview.js"></script>
<!-- 05 08 提示登录 -->
<!-- -->
</div>
</div>
<div id="image_logo_1492672062728" class="view logo image none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="image" class="view_contents">
<div class="logoStyle modSet">
<a href='index.html' target="_self"><img class="imgSet" src="picture/03.png" title="" alt="" style="width:100%; height:auto" /></a>
</div>
</div>
</div>
<div id="text_style_02_1492670533631" class="view style_02 text none wow bounceInLeft lockHeightView" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
欢迎来到环保之家
</div>
</div>
<div id="text_style_02_1492670623527" class="view style_02 text none wow bounceInRight lockHeightView" data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
<div names="text" class="view_contents">
Welcome to the green house
</div>
</div>
</div>
</div>
</div>
</div>
<div id="layout_1492658909740" class="layout none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div class="view_contents">
<div id="div_blank_1492659017452" class="view blank div none" data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
<div names="div" class="view_contents">
......
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/*----------------公共部分----------------*/
html{overflow-x:hidden; overflow-y:auto;}
body{ background-repeat:no-repeat; background-position:left top; position:relative; overflow-x: hidden;}
body, li, ul, ol, dl, dt, dd, form, input, textarea, h1, h2, h3, h4, h5, h6, p,select{ margin: 0px; padding: 0px; list-style-type:none; font-size: 12px; font:12px/1.5 tahoma,arial,"Microsoft YaHei";outline: 0 none; color:#333;}
em,i{font-style:normal;}
a{color:#333;}
a{text-decoration:none;}
*{margin:0px; padding:0px;outline: none !important;}
img {-ms-interpolation-mode:bicubic; border:none;}
.view{z-index: 1;position: absolute;}
.horizontal .view{position:relative; float:left;}
.vertical .view{position:relative;}
.view_contents{position:relative; width:100%; margin:0 auto; padding:0; z-index:10; height:100%; overflow: hidden; box-sizing: border-box;/*添加后，模块的内边距和边框不会再溢出*/}
.layout{ position: relative; width: 100%; margin: 0px auto; padding: 0px; z-index: 1;}
.layout > .view_contents{ /*overflow: visible;*/ cursor:default;}
/*流布局*/
.flow .view_contents > .view{float: left;}
.clear { clear: both; }
/*苹果去除样式*/
select,input[type='button'],input[type="reset"],input[type='submit'],input[type='text'],input[type="password"],input[name='query'],input[name='d']{-webkit-appearance: none; border-radius:0px}
input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only;}
/*模块分页*/
.page_btn{clear: both; margin-top: 20px; width: 100%; text-align: center;}
.page_btn a{display: inline-block; color: #333; box-sizing: border-box; margin: 0 5px; width: 24px; height: 24px; line-height: 24px; border: 1px solid #ccc; font-family: 'microsoft YaHei';}
.page_btn a.cur,.page_btn a:hover{border:1px solid #4c4c4c;}
.prev_btn,.next_btn{font-family: '黑体' !important; border: 0 !important;}
.no_page{border: 0 !important;}
@media screen and (max-width:768px){
/*分页*/
.page_btn a:nth-child(n+5){display: none;}
.page_btn a:nth-last-child(1),.page_btn a:nth-last-child(2),.page_btn a:nth-last-child(3){display: inline-block !important;}
}
/*图片放大样式*/
.imgBox{position: fixed; z-index: 9999; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; width: 100%; height: 100%;}
.imgBox img{ position: absolute; width: auto; max-width: 80%; /*max-height: 65%;*/ border: 20px solid #fff;top: 40%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); box-shadow: 0 0 10px rgba(0,0,0,.3);}
.imgBox.scroll{overflow-y:scroll;overflow-x:hidden;}
.imgBox.scroll::-webkit-scrollbar {width: 6px; height: 6px; background: rgba(0,0,0,.05);}
.imgBox.scroll::-webkit-scrollbar{width: 6px; height: 6px; background: rgba(0,0,0,.02);}
.imgBox.scroll::-webkit-scrollbar-button{background: #f7f7f7; height: 0;}
.imgBox.scroll::-webkit-scrollbar-corner{background: rgba(0,0,0,.05);}
.imgBox.scroll::-webkit-scrollbar-thumb{background: rgba(255,255,255,.7); border-radius: 3px;}
.imgBox.scroll img{top:5%; margin-bottom: 5%; transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%); -moz-transform: translate(-50%,0%); -o-transform: translate(-50%,0%);}
.pos_fixed{position: fixed; width: 100%;}
.imageButton{position: fixed; bottom: 15%; left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.imageButton span{display: inline-block; cursor:pointer; box-shadow: 0 0 6px rgba(0,0,0,.2);
-webkit-transition: all ease .2s;
-moz-transition: all ease .2s;
-ms-transition: all ease .2s;
-o-transition: all ease .2s;
transition: all ease .2s;
}
.imageButton span:hover{opacity: .8;}
.imageButton span.closeShowPic{ font-size: 40px; border-radius: 100%;font-family: serif; line-height: 1; background-color: #fff; padding: .2em; text-align: center;}
@media screen and (max-width: 768px){/*mobi*/
.imgBox img{border-width: 10px;}
.imgBox.scroll img{top:5%; margin-bottom: 10vh;}
}
.jurisdiction_mask{
top: 0;
left: 0;
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0,0.5);
z-index: 2147483647;
display:none;
}
.jurisdiction_tips{
width: 400px;
background: #ffffff;
position: absolute;
left: 50%;
top: 45%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
padding: 23px 20px;
box-sizing: border-box;
text-align: center;
}
.jurisdiction_tips img{
display: block;
margin: 0 auto;
}
.jurisdiction_tips h3{
font-size: 18px;
font-weight: 400;
line-height: 40px;color: #575757;
text-align: center;
margin: 5px 0 0;
}
.jurisdiction_tips p{
color: #999;
font-size: 16px;
text-align: center;
font-weight: 300;
margin: 0;
}
.jurisdiction_tips button{
color: #fff;
font-size: 12px;
padding: 10px 0;
margin: 10px 3px 0;
background-color: #aaa;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
border: none;
outline: none !important;
width: 98px;
}
.jurisdiction_tips .jurisdiction_login{
background: #ff0099;
}
.jurisdiction_tips button:hover{
opacity: 0.8;
}
.jurisdiction_tips_mobile{
display: none;
}
@media screen and (max-width: 450px){
.jurisdiction_tips{
width: 80%;
padding: 20px 15px;
}
.jurisdiction_tips p{
display: none;
}
.jurisdiction_tips .jurisdiction_tips_mobile{
display: block;
}
.jurisdiction_tips img{width: 60px;}
.jurisdiction_tips h3{font-size: 16px;}
.jurisdiction_tips p{
font-size: 14px;
}
.jurisdiction_tips button{margin-top: 12px;padding: 8px 0;}
}
body{ background-position:left top; }
......
3.JS
代码如下（节选示例）：
var showAlert = function(msg){
jAlert(msg, "温馨提示");
}
window.alert=showAlert;
$.alerts={
verticalOffset:-75,horizontalOffset:0,repositionOnResize:true,overlayOpacity:0.5,overlayColor:'#fff',draggable:true,okButton:' 确定 ',cancelButton:' 取消 ',dialogClass:null,alert:function(message,title,callback){
if(title==null)title='Alert';
if(callback){
$.alerts._show(title,message,null,'confirm',function(result){
if(callback)callback(result);
});
}else{
$.alerts._show(title,message,null,'alert',function(result){
if(callback)callback(result);
});
}
}
,_show:function(title,msg,value,type,callback){
$.alerts._hide();
$.alerts._overlay('show');
$("BODY").append('<div id="popup_container">'+'<h1 id="popup_title"></h1>'+'<div id="popup_content">'+'<div id="popup_message"></div>'+'</div>'+'</div>');
if($.alerts.dialogClass)$("#popup_container").addClass($.alerts.dialogClass);
var pos=($.browser.msie&&parseInt($.browser.version)<=6)?'absolute':'fixed';
$("#popup_container").css({
//position:pos,zIndex:99999,padding:0,margin:0
});
$("#popup_title").text(title);
$("#popup_content").addClass(type);
$("#popup_message").text(msg);
$("#popup_message").html($("#popup_message").text().replace(/\n/g,'<br />'));
$("#popup_container").css({
//minWidth:$("#popup_container").outerWidth(),maxWidth:$("#popup_container").outerWidth(),
//minWidth:'290px',maxWidth:'290px',
});
$.alerts._reposition();
$.alerts._maintainPosition(true);
switch(type){
case'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" value="'+$.alerts.okButton+'" id="popup_ok" /></div>');
$("#popup_ok").click(function(){
$.alerts._hide();
callback(true)
});
$("#popup_ok").focus().keypress(function(e){
if(e.keyCode==13||e.keyCode==27)$("#popup_ok").trigger('click')
});
break
case'confirm':$("#popup_message").after('<div id="popup_panel"><input type="button" value="'+$.alerts.okButton+'" id="popup_ok" /><input type="button" value="'+$.alerts.cancelButton+'" id="popup_cancel" /></div>');
$("#popup_ok").click(function(){
$.alerts._hide();
callback(true)
});
$("#popup_cancel").click(function(){
$.alerts._hide();
callback(false)
});
$("#popup_ok").focus().keypress(function(e){
if(e.keyCode==13||e.keyCode==27)$("#popup_ok").trigger('click')
});
break
};
if($.alerts.draggable){
try{
$("#popup_container").draggable({
handle:$("#popup_title")
});
$("#popup_title").css({
cursor:'move'
})
}
catch(e){}
}
}
,_hide:function(){
$("#popup_container").remove();
$.alerts._overlay('hide');
$.alerts._maintainPosition(false)
}
,_overlay:function(status){
switch(status){
case'show':$.alerts._overlay('hide');
$("BODY").append('<div id="popup_overlay"></div>');
$("#popup_overlay").css({
position:'absolute',zIndex:99998,top:'0px',left:'0px',width:'100%',height:$(document).height(),background:$.alerts.overlayColor,opacity:$.alerts.overlayOpacity
});
break;
case'hide':$("#popup_overlay").remove();
break
}
}
,_reposition:function(){
var top=(($(window).height()/ 2) - ($("#popup_container").outerHeight() /2))+$.alerts.verticalOffset;
var left=(($(window).width()/ 2) - ($("#popup_container").outerWidth() /2))+$.alerts.horizontalOffset;
if(top<0)top=0;
if(left<0)left=0;
if($.browser.msie&&parseInt($.browser.version)<=6)top=top+$(window).scrollTop();
$("#popup_container").css({
//top:top+'px',left:left+'px'
//top:'50px',left:left+'px'
});
$("#popup_overlay").height($(document).height())
}
,_maintainPosition:function(status){
if($.alerts.repositionOnResize){
switch(status){
case true:$(window).bind('resize',function(){
$.alerts._reposition()
});
break;
case false:$(window).unbind('resize');
break
}
}
}
};
jAlert=function(message,title,callback){
$.alerts.alert(message,title,callback)
}
......
五、更多推荐
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
扫一扫
2574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
