用html绘制图册,项目图册.html

项目图册

var statistics = {}

statistics.start = +new Date();

var _vds = _vds || [];

window._vds = _vds;

(function () {

_vds.push(['setAccountId', 'a4f46f59c1ea0610']);

if (window.localStorage) {

var statsInfoStr = localStorage.getItem('siteStatsInfo');

if (statsInfoStr) {

var statsInfo = JSON.parse(statsInfoStr);

if (statsInfo) {

statsInfo.userId && _vds.push(['setCS1', 'userId', statsInfo.userId]);

statsInfo.projName && _vds.push(['setCS2', 'proj', statsInfo.projName + '___' + statsInfo.projId]);

var wxName = statsInfo.wxName || statsInfo.wxname;

wxName && _vds.push(['setCS3', 'wx', wxName + '___' + statsInfo.token]);

statsInfo.orgName && _vds.push(['setCS4', 'org', statsInfo.orgName + '___' + statsInfo.orgId]);

}

}

}

(function () {

var vds = document.createElement('script');

vds.type = 'text/javascript';

vds.async = true;

vds.src = 'Public/js/vds.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(vds, s);

})();

})();

body {

background-color: #f6f6f6;

}

.swiper-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

background-color: #f0f0f0;

z-index: 10;

}

.swiper-wrapper {

width: 100%;

font-size: 0;

overflow: hidden;

}

.swiper-wrapper ul {

white-space: nowrap;

}

.swiper-wrapper li {

height: 40px;

display: inline-block;

line-height: 38px;

font-size: 16px;

box-sizing: border-box;

text-align: center;

}

.swiper-wrapper li.hide {

display: none;

}

.swiper-container .current span {

height: 38px;

background: #fff;

color: #3c6;

border-bottom: 2px solid #3c6;

display: block;

}

.qiandaobanner {

width: 100%;

position: relative;

margin-top: 40px;

background-size: 100% 100%;

}

.qiandaobanner img {

display: block;

width: 100%;

}

.qiandaobanner .jieshao {

position: absolute;

width: 100%;

bottom: 0;

background: rgba(51, 204, 102, 0.8);

line-height: 20px;

font-size: 14px;

padding: 10px;

padding-left: 15px;

padding-right: 0px;

box-sizing: border-box;

}

.right_btn {

background: #f0f0f0 url(Public/myui_v1/css/photo/css/img/slide_arrow_right.png) no-repeat center center;

position: absolute;

width: 13px;

height: 40px;

background-size: 7px 10px;

top: 0;

right: 0;

z-index: 99999;

}

.right_btn.active {

border-left: 1px solid #ccc;

box-shadow: 0px 0 10px #aaa, 0px 0 0px yellow, 0 0px 0px blue, 0 0px 0px green

}

.main {

background-image: url(Public/myui_v1/css/photo/css/img/line.png);

background-repeat: repeat-y;

background-position: center top;

background-size: 5px 1px;

}

.gallery {

padding: 0px;

width: 50%;

float: left;

}

.gallery_right {

padding-top: 38px;

}

.gallery li {

box-sizing: border-box;

padding: 12px;

position: relative;

}

.gallery li a {

display: block;

line-height: 0;

font-size: 0;

background-color: #fff;

padding: 5px;

border: 1px solid #efefef;

}

.gallery li img {

width: 100%;

}

.gallery li i {

position: absolute;

width: 6px;

height: 11px;

background-repeat: no-repeat;

background-size: 6px 11px;

background-position: left top;

}

.gallery_left li a i {

background-image: url("Public/myui_v1/css/photo/css/img/arrow_right_bg.png");

right: 8px;

top: 18px;

}

.gallery_right li a i {

background-image: url("Public/myui_v1/css/photo/css/img/arrow_left_bg.png");

left: 8px;

top: 18px;

}

.gallery li span {

position: absolute;

width: 14px;

height: 22px;

background-image: url("Public/myui_v1/css/photo/css/img/pic_icon_bg.png");

background-repeat: no-repeat;

background-size: 14px 22px;

}

.gallery_left li span {

right: -7px;

top: 13px;

}

.gallery_right li span {

left: -7px;

top: 13px;

}

.jieshao {

color: #fff;

}

.jieshao .photo_title {

font-size: 21px;

padding-bottom: 8px;

}

.photo_info {

white-space: nowrap;

overflow: hidden;

width: 100%;

text-overflow: ellipsis;

}

• 康桥林溪湾实景展示

康桥林溪湾实景展示

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

.powered {

background-color: #f6f6f6;

margin-bottom: 0px;

padding: 10px 0px 6px 0px;

font-size: 11px;

color: #aaa;

text-align: center;

width: 100%;

}

.powered {

margin-bottom: 6px;

font-size: 11px;

color: #aaa;

text-align: center;

width: 100%;

}

.powered a {

color: #aaa;

text-decoration: none;

}

.powered a:hover,

.powered a:visited {

color: #aaa;

}

.powered a:active {

color: #2caf56;

}

Powered by  明源云客

// document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

// WeixinJSBridge.call('hideToolbar');

// });

$(document).ready(function () {

var lis = $("#top_tab li");

if (lis.size() >= 3) {

lis.width($(window).width() / 3).removeClass("hide");

$(window).bind("resize", function () {

lis.width($(window).width() / 3);

$("#top_tab ul").width(lis.width() * lis.size());

myscroll.refresh();

});

$("#top_tab ul").width(lis.width() * lis.size());

} else {

lis.width($(window).width() / lis.size()).removeClass("hide");

}

var myscroll = new iScroll("top_tab", {

scrollX: true,

scrollY: false,

hScrollbar: false

});

$('#minpanel').css('min-height', $(window).height() - 84);

var tabSwipe = $('#top_tab'),

rightBtn = $('.right_btn');

tabSwipe.bind("touchstart", function () {

rightBtn.addClass("active");

}).bind("touchend", function () {

rightBtn.removeClass("active")

});

//如果菜单少于或等于3个，左右提示按钮消失

if (tabSwipe.find('li').length <= 3) {

rightBtn.hide();

}

});

function setAIndex(aindex) {

sessionStorage.setItem('photo_aindex', aindex);

}

function AjaxLoadDataInfo(id, obj, a_index) {

$(".allslidediv").removeClass("current");

$(obj).addClass("current");

$("#Gallery .gallery").empty();

$("#Gallery").prepend(

'

'

);

var subdate = {

token: "tdyajl1427723483",

id: id

};

$.ajax({

url: "/Photo/Index/AjaxGetPhotoList?id=" + id + "&token=tdyajl1427723483",

data: subdate,

dataType: "json",

success: function (retdata) {

var data = retdata;

var info = data.info;

$("#qiandaobanner").css("background-image", "url(" + info.picurl + ")");

$("#photo_title").html(info.title);

$("#photo_info").html(info.info);

if (info.isshowinfo == 1) {

$("#jieshao").show();

} else {

$("#jieshao").hide();

}

if (data.photo_list == "" || data.photo_list == null) {

$("#Gallery").append(

"

无相关数据

"

);

} else {

$("#Gallery .loading").remove();

var photo_list = data.photo_list;

var li_left = "",

li_right = "";

//var arrHTML = [];

$.each(photo_list, function (i, item) {

if (i % 2 == 1) {

li_right += returnli(i, item);

} else {

li_left += returnli(i, item);

}

});

function returnli(i, item) {

var str = "

"\" pindex=" + (i + 1) + " alt=" + (i + 1) + "/" + data.all_count + ":" +

item.title + ">

";

//arrHTML.push('

');

return str;

}

//arrHTML = arrHTML.join('');

$("#main .gallery_left").html(li_left);

$("#main .gallery_right").html(li_right);

}

}

});

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史