|
|
@@ -0,0 +1,587 @@
|
|
|
+{% load staticfiles %}
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <title>景点导览</title>
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
|
|
|
+ <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
|
|
|
+ <link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
|
|
|
+ <script type="text/javascript"
|
|
|
+ src="https://api.map.baidu.com/api?v=2.0&ak=EpbgpqakDpXGN9E3ejg6e93ffsi83b0t"></script>
|
|
|
+ <style>
|
|
|
+ .breadcrumbs {
|
|
|
+ padding: 12px 0 12px 30px;
|
|
|
+ border-bottom: 1px solid #dbdbdb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-breadcrumb>* {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixedDiv {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0px 3px 5px 0px #ececec;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 发布类型 */
|
|
|
+
|
|
|
+ .widget-title {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ left: 0;
|
|
|
+ top: 9px;
|
|
|
+ height: 15px;
|
|
|
+ border-left: 5px solid #23a3ee;
|
|
|
+ padding-left: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 5px 0 5px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title h2 {
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 33px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .widget-title h2 span {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 100;
|
|
|
+ margin-left: 20px;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ /* 上传详情 */
|
|
|
+
|
|
|
+ .uploadContent {
|
|
|
+ /* border-top: 7px solid #f0f0f0; */
|
|
|
+ padding: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadUl>li {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadUl>li:first-child {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .innerDiv {
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图片预览 */
|
|
|
+
|
|
|
+ .layui-upload-img {
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #progressBar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 产品展厅上传多图 */
|
|
|
+
|
|
|
+ .uploadParent {
|
|
|
+ position: absolute;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadParent>div {
|
|
|
+ display: inline-block;
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ /* border: 1px solid #b8b8b8; */
|
|
|
+ background: url(../../static/imgs/addicon.png) no-repeat center;
|
|
|
+ background-size: 80% 80%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadShowParent .layui-upload-list {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 表单样式 */
|
|
|
+
|
|
|
+ .layui-form-item .layui-input-inline {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layui-form-item .layui-input-textarea {
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImg {
|
|
|
+ position: absolute;
|
|
|
+ margin: 10px 0;
|
|
|
+ width: 92px;
|
|
|
+ height: 92px;
|
|
|
+ background: none;
|
|
|
+ border: 1px solid #b8b8b8;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadImgIcon {
|
|
|
+ background: url(../../static/imgs/uploadImgIcon.png) no-repeat center;
|
|
|
+ background-size: 80% 80%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 多图上传 */
|
|
|
+
|
|
|
+ .uploader-list {
|
|
|
+ margin-left: -15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploader-list .info {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -25px;
|
|
|
+ background-color: black;
|
|
|
+ color: white;
|
|
|
+ filter: alpha(Opacity=80);
|
|
|
+ -moz-opacity: 0.5;
|
|
|
+ opacity: 0.5;
|
|
|
+ width: 100px;
|
|
|
+ height: 25px;
|
|
|
+ text-align: center;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploader-list .handle {
|
|
|
+ position: relative;
|
|
|
+ background-color: black;
|
|
|
+ color: white;
|
|
|
+ filter: alpha(Opacity=80);
|
|
|
+ -moz-opacity: 0.5;
|
|
|
+ opacity: 0.5;
|
|
|
+ width: 100px;
|
|
|
+ text-align: right;
|
|
|
+ height: 18px;
|
|
|
+ margin-bottom: -18px;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploader-list .handle span {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploader-list .handle span:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploader-list .file-iteme {
|
|
|
+ margin: 12px 0 0 15px;
|
|
|
+ padding: 1px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 民宿位置 */
|
|
|
+
|
|
|
+ .dorminnerDiv {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dormSite {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 38%;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ height: 636px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="content">
|
|
|
+ <div class="floatNav">
|
|
|
+ <!-- 导航 -->
|
|
|
+ <div class="breadcrumbs">
|
|
|
+ <span class="layui-breadcrumb">
|
|
|
+ <a target="BoardRight">首页</a>
|
|
|
+ <a>
|
|
|
+ <cite>信息发布</cite>
|
|
|
+ </a>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 内容 -->
|
|
|
+ <div>
|
|
|
+ <!-- 发布详情 -->
|
|
|
+ <div class="uploadContent" id="uploadContent">
|
|
|
+ <div class="widget-title">
|
|
|
+ <h2>景点信息
|
|
|
+ <span id="Uptime"></span>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="dorminnerDiv">
|
|
|
+ <div class="dormSite">
|
|
|
+ <div id="map">ditu</div>
|
|
|
+ </div>
|
|
|
+ <form class="layui-form" action="" id="formDiv" lay-filter="newsFormDiv">
|
|
|
+ <input type="hidden" name="id">
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">景点名称：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" name="name" required lay-verify="required" placeholder="请输入名称"
|
|
|
+ autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">景点图：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <button type="button" class="uploadImg uploadImgIcon" id="newsUpImg"></button>
|
|
|
+ <!-- 隐藏的input -->
|
|
|
+ <input type="hidden" id="img_url" name="img_url" value="" />
|
|
|
+ <div class="layui-upload-list">
|
|
|
+ <img class="layui-upload-img" id="demo1">
|
|
|
+ <p id="demoText"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">景点地址：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" name="addr" required="" lay-verify="required" placeholder="请输入景点地址"
|
|
|
+ autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ <button type="button" class="layui-btn layui-btn-success layui-btn-md "
|
|
|
+ onclick="getMapTxt()">定位</button>
|
|
|
+ <input type="hidden" value="" id="location" name="location">
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">联系电话：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="phone" name="mobile" required="" lay-verify="required|phone"
|
|
|
+ placeholder="请输入联系电话" autocomplete="off" class="layui-input">
|
|
|
+ <!-- <input type="phone" name="mobile" required="" lay-verify="required|phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input"> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">门票价格：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="number" name="price" required lay-verify="required" placeholder="请输入价格"
|
|
|
+ autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">开放时间：</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" name="openTime" required lay-verify="required" placeholder="请选择开放时间"
|
|
|
+ autocomplete="off" class="layui-input">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <label class="layui-form-label">简介：</label>
|
|
|
+ <div class="layui-input-inline layui-input-textarea">
|
|
|
+ <textarea name="intro" lay-verify="required" placeholder="请输入内容"
|
|
|
+ class="layui-textarea"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="layui-form-item layui-form-text">
|
|
|
+ <label class="layui-form-label">详细说明：</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <textarea name="content" id="editor1" rows="10" cols="80"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
|
|
|
+ <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
|
|
|
+ <button class="layui-btn layui-btn-primary" type="button"
|
|
|
+ onclick="clearForm()">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
|
|
|
+ <script src="{% static '/lib/layui/layui.js'%}"></script>
|
|
|
+ <script src="{% static 'lib/ckeditor/ckeditor.js'%}"></script>
|
|
|
+ <script src="{% static 'lib/ckeditor/lang/zh-cn.js'%}"></script>
|
|
|
+ <script src="{% static '/js/backstageNet/common.js'%}"></script>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ // 百度地图API功能
|
|
|
+ var map = new BMap.Map("map", { minZoom: 5 }); //BMAP_SATELLITE_MAP 卫星地图
|
|
|
+ map.centerAndZoom(new BMap.Point(113.43797, 34.164943), 14);
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ var geoc = new BMap.Geocoder();
|
|
|
+
|
|
|
+ function getMapTxt() {
|
|
|
+ var txt = $("input[name='addr']").val();
|
|
|
+ geoc.getPoint(txt, function (point) {
|
|
|
+ if (point) {
|
|
|
+ var latlng = point.lng + ',' + point.lat;
|
|
|
+ $('#location').val(latlng)
|
|
|
+ getMapSite(point.lng, point.lat);
|
|
|
+ } else {
|
|
|
+ layer.msg("您选择地址没有解析到结果", { icon: 5 });
|
|
|
+ }
|
|
|
+ }, "");
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function getMapSite(lng, lat) {
|
|
|
+ map.clearOverlays();
|
|
|
+ var point = new BMap.Point(lng, lat);
|
|
|
+ var marker = new BMap.Marker(point); // 创建标注
|
|
|
+ map.centerAndZoom(point);
|
|
|
+ map.centerAndZoom(point, 14);
|
|
|
+ map.addOverlay(marker); // 将标注添加到地图中
|
|
|
+ marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+ }
|
|
|
+ //单击获取点击的经纬度
|
|
|
+ map.addEventListener("click", function (e) {
|
|
|
+ getMapSite(e.point.lng, e.point.lat);
|
|
|
+ var latlng = e.point.lng + ',' + e.point.lat;
|
|
|
+ $('#location').val(latlng)
|
|
|
+ var pt = e.point;
|
|
|
+ geoc.getLocation(pt, function (rs) {
|
|
|
+ var addComp = rs.addressComponents;
|
|
|
+ // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
|
|
|
+ $("input[name='addr']").val(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber)
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ var picList = [];
|
|
|
+ var element, form, upload;
|
|
|
+ layui.use(['element', 'form', 'upload'], function () {
|
|
|
+ element = layui.element;
|
|
|
+ form = layui.form;
|
|
|
+ upload = layui.upload;
|
|
|
+ //一些事件监听
|
|
|
+ element.on('tab(demo)', function (data) {
|
|
|
+ console.log(data);
|
|
|
+ });
|
|
|
+
|
|
|
+ //新闻图片上传
|
|
|
+ var uploadInst = upload.render({
|
|
|
+ elem: '#newsUpImg'
|
|
|
+ , url: 'dorm_img'
|
|
|
+ , field: 'hotel_photo'
|
|
|
+ , xhr: function () { } //上传视频进度条
|
|
|
+ , before: function (obj) {
|
|
|
+ $('.uploadImg').removeClass('uploadImgIcon')
|
|
|
+ //预读本地文件示例，不支持ie8
|
|
|
+ obj.preview(function (index, file, result) {
|
|
|
+ $('#demo1').attr('src', result); //图片链接（base64）
|
|
|
+ });
|
|
|
+ }
|
|
|
+ , done: function (res) {
|
|
|
+ //如果上传失败
|
|
|
+ if (res.code == 0) {
|
|
|
+ //上传成功
|
|
|
+ document.getElementById("img_url").value = res.data.src;
|
|
|
+ } else {
|
|
|
+ return layer.msg('上传失败');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ , error: function () {
|
|
|
+ //演示失败状态，并实现重传
|
|
|
+ var demoText = $('#demoText');
|
|
|
+ demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
|
|
+ demoText.find('.demo-reload').on('click', function () {
|
|
|
+ uploadInst.upload();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //监听提交
|
|
|
+ form.on('submit(formDemo)', function (data) {
|
|
|
+ window.id = data.field.id
|
|
|
+ var img_url = $('#img_url').val();
|
|
|
+ var location = $('#location').val();
|
|
|
+ if (!img_url) {
|
|
|
+ layer.msg("请上传景点封面图", { icon: 5 });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!location) {
|
|
|
+ layer.msg("请点击定位获取位置", { icon: 5 });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var content = editor1.getData();
|
|
|
+ // alert(content)
|
|
|
+ if (!content) {
|
|
|
+ layer.msg("请填写文章正文", { icon: 5 });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ field = Object.assign(data.field, { content: content });
|
|
|
+
|
|
|
+ // layer.msg(JSON.stringify(data.field));
|
|
|
+
|
|
|
+ CKupdate()
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ url: 'dorm_pub',
|
|
|
+ data: $("#formDiv").serialize(),
|
|
|
+ type: 'post',
|
|
|
+ success: function (data) {
|
|
|
+ if (data) {
|
|
|
+ if (window.id !== '') {
|
|
|
+ parent.layer.msg("发布成功，等待审核", { icon: 1 });
|
|
|
+ } else {
|
|
|
+ layer.msg("发布成功，等待审核", { icon: 1 });
|
|
|
+ }
|
|
|
+ clearForm()
|
|
|
+ } else {
|
|
|
+ if (window.id !== '') {
|
|
|
+ parent.layer.msg("发布失败", { icon: 2 });
|
|
|
+ } else {
|
|
|
+ layer.msg("发布失败", { icon: 2 });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function (type) {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return false;
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+ function clearForm() {
|
|
|
+ form.val('newsFormDiv', {
|
|
|
+ "name": "",
|
|
|
+ "price": "",
|
|
|
+ "openTime": "",
|
|
|
+ "mobile": "",
|
|
|
+ "img_url": "",
|
|
|
+ "addr": "",
|
|
|
+ "location": "",
|
|
|
+ "intro": ""
|
|
|
+ });
|
|
|
+ map.clearOverlays();
|
|
|
+ $('.uploadImg').addClass('uploadImgIcon');
|
|
|
+ $('#demo1').removeAttr('src'); //图片链接（base64）
|
|
|
+ fuzhi()
|
|
|
+ if (window.id !== '') {
|
|
|
+ var index = parent.layer.getFrameIndex(window.name);
|
|
|
+ parent.layer.close(index);//关闭当前页
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 示例1：设置工具栏为基本工具栏，高度为70
|
|
|
+ var editor1 = CKEDITOR.replace('editor1',
|
|
|
+ {
|
|
|
+ filebrowserBrowseUrl: 'test_aaphoto',
|
|
|
+ height: 430,
|
|
|
+ toolbar:
|
|
|
+ [
|
|
|
+ { name: 'document', items: ['Source', '-', 'DocProps', 'Preview', 'Print', '-'] },
|
|
|
+ { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },
|
|
|
+ { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-'] },
|
|
|
+ { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
|
|
|
+ '/',
|
|
|
+ { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl'] },
|
|
|
+ { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
|
|
|
+ { name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'] },
|
|
|
+ '/',
|
|
|
+ { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
|
|
|
+ { name: 'colors', items: ['TextColor', 'BGColor'] },
|
|
|
+ { name: 'tools', items: ['ShowBlocks', '-'] }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ //处理CKEDITOR的值
|
|
|
+ function CKupdate() {
|
|
|
+ for (instance in CKEDITOR.instances)
|
|
|
+ CKEDITOR.instances[instance].updateElement();
|
|
|
+ }
|
|
|
+
|
|
|
+ function fuzhi() { //编辑器赋值
|
|
|
+ editor1.setData("");
|
|
|
+ }
|
|
|
+
|
|
|
+ function insertText(value) { //插入文本
|
|
|
+ editor1.insertText('value');
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ windowAddMouseWheel();
|
|
|
+ function windowAddMouseWheel() {
|
|
|
+ var scrollFunc = function (e) {
|
|
|
+ e = e || window.event;
|
|
|
+ var top = $(window).scrollTop();
|
|
|
+ if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
|
|
|
+ if (e.wheelDelta > 0) { //当滑轮向上滚动时
|
|
|
+ if (top < 60) {
|
|
|
+ if ($(".floatNav").hasClass("fixedDiv")) {
|
|
|
+ $(".floatNav").removeClass("fixedDiv");
|
|
|
+ $(window).scrollTop(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (e.wheelDelta < 0) { //当滑轮向下滚动时
|
|
|
+ if (top >= 60) {
|
|
|
+ $(".floatNav").addClass("fixedDiv");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (e.detail) { //Firefox滑轮事件
|
|
|
+ if (e.detail > 0) { //当滑轮向上滚动时
|
|
|
+ if (top < 60) {
|
|
|
+ if ($(".floatNav").hasClass("fixedDiv")) {
|
|
|
+ $(".floatNav").removeClass("fixedDiv");
|
|
|
+ $(window).scrollTop(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (e.detail < 0) { //当滑轮向下滚动时
|
|
|
+ if (top >= 60) {
|
|
|
+ $(".floatNav").addClass("fixedDiv");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //给页面绑定滑轮滚动事件
|
|
|
+ if (document.addEventListener) {
|
|
|
+ document.addEventListener('DOMMouseScroll', scrollFunc, false);
|
|
|
+ }
|
|
|
+ //滚动滑轮触发scrollFunc方法
|
|
|
+ window.onmousewheel = document.onmousewheel = scrollFunc;
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
