feat: 模板区分pc与mobile
This commit is contained in:
27
public/static/index/pc/js/before-after.min.js
vendored
Executable file
27
public/static/index/pc/js/before-after.min.js
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
! function (a) {
|
||||
function b(b, c, d) {
|
||||
b.on("mousedown.ba-events touchstart.ba-events", function (e) {
|
||||
b.addClass("ba-draggable"), c.addClass("ba-resizable");
|
||||
var f = e.pageX ? e.pageX : e.originalEvent.touches[0].pageX,
|
||||
g = b.outerWidth(),
|
||||
h = b.offset().left + g - f,
|
||||
i = d.offset().left,
|
||||
j = d.outerWidth();
|
||||
minLeft = i + 10, maxLeft = i + j - g - 10, b.parents().on("mousemove.ba-events touchmove.ba-events", function (b) {
|
||||
var c = b.pageX ? b.pageX : b.originalEvent.touches[0].pageX;
|
||||
leftValue = c + h - g, leftValue < minLeft ? leftValue = minLeft : leftValue > maxLeft && (leftValue = maxLeft), widthValue = 100 * (leftValue + g / 2 - i) / j + "%", a(".ba-draggable").css("left", widthValue), a(".ba-resizable").css("width", widthValue)
|
||||
}).on("mouseup.ba-events touchend.ba-events touchcancel.ba-events", function () {
|
||||
b.removeClass("ba-draggable"), c.removeClass("ba-resizable"), a(this).off(".ba-events")
|
||||
}), e.preventDefault()
|
||||
})
|
||||
}
|
||||
a.fn.beforeAfter = function () {
|
||||
var c = this,
|
||||
d = c.width() + "px";
|
||||
c.find(".resize img").css("width", d), b(c.find(".handle"), c.find(".resize"), c), a(window).resize(function () {
|
||||
var a = c.width() + "px";
|
||||
c.find(".resize img").css("width", a)
|
||||
});
|
||||
return this
|
||||
}
|
||||
}(jQuery);
|
||||
184
public/static/index/pc/js/large.js
Normal file
184
public/static/index/pc/js/large.js
Normal file
@@ -0,0 +1,184 @@
|
||||
$(document).ready(function () {
|
||||
// 图片上下滚动
|
||||
var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
|
||||
var interval = $("#imageMenu li:first").height();
|
||||
var curIndex = 0;
|
||||
if (curIndex > count) curIndex = 0;
|
||||
//左右箭头切换图片
|
||||
$('.scrollbutton').click(function () {
|
||||
if ($(this).hasClass('disabled')) return false;
|
||||
if ($(this).hasClass('smallImgUp')) --curIndex;
|
||||
else ++curIndex;
|
||||
$('.scrollbutton').removeClass('disabled');
|
||||
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
|
||||
if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
|
||||
$("#imageMenu ul").stop(false, true).animate({
|
||||
"marginTop": -curIndex * interval + "px"
|
||||
}, 600);
|
||||
//获取当前指定的图片属性
|
||||
var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
|
||||
//切换图片
|
||||
$("#midimg").attr('src', midImg);
|
||||
$(".enlarge-img").find("img").attr('src', midImg);
|
||||
//小图添加属性
|
||||
$("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
|
||||
});
|
||||
//大图左右箭头切换图片
|
||||
$('.scrollbutton_01').click(function () {
|
||||
if ($(this).hasClass('disabled')) return false;
|
||||
if ($(this).hasClass('smallImgUp')) --curIndex;
|
||||
else ++curIndex;
|
||||
$('.scrollbutton_01').removeClass('disabled');
|
||||
if (curIndex == 0) $('.smallImgUp').addClass('disabled');
|
||||
if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
|
||||
//$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
|
||||
$("#imageMenu ul").stop(false, true).animate({
|
||||
"marginTop": -curIndex * interval + "px"
|
||||
}, 600);
|
||||
//获取当前指定的图片属性
|
||||
var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
|
||||
//切换图片
|
||||
$("#midimg").attr('src', midImg);
|
||||
$(".enlarge-img").find("img").attr('src', midImg);
|
||||
//小图添加属性
|
||||
$("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
|
||||
});
|
||||
|
||||
function isIE() {
|
||||
return /MSIE|Trident/.test(navigator.userAgent);
|
||||
}
|
||||
// 解决 ie6 select框 问题
|
||||
$.fn.decorateIframe = function (options) {
|
||||
if (isIE()) {
|
||||
var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
|
||||
$(this).each(function () {
|
||||
var $myThis = $(this);
|
||||
//创建一个IFRAME
|
||||
var divIframe = $("<iframe />");
|
||||
divIframe.attr("id", opts.iframeId);
|
||||
divIframe.css("position", "absolute");
|
||||
divIframe.css("display", "none");
|
||||
divIframe.css("display", "block");
|
||||
divIframe.css("z-index", opts.iframeZIndex);
|
||||
divIframe.css("border");
|
||||
divIframe.css("top", "0");
|
||||
divIframe.css("left", "0");
|
||||
if (opts.width == 0) {
|
||||
divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 +
|
||||
"px");
|
||||
}
|
||||
if (opts.height == 0) {
|
||||
divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) *
|
||||
2 + "px");
|
||||
}
|
||||
divIframe.css("filter", "mask(color=#fff)");
|
||||
$myThis.append(divIframe);
|
||||
});
|
||||
}
|
||||
}
|
||||
$.fn.decorateIframe.defaults = {
|
||||
iframeId: "decorateIframe1",
|
||||
iframeZIndex: -1,
|
||||
width: 0,
|
||||
height: 0
|
||||
}
|
||||
//放大镜视窗
|
||||
$("#bigView").decorateIframe();
|
||||
//点击到中图
|
||||
var midChangeHandler = null;
|
||||
$("#imageMenu li img").bind("click", function () {
|
||||
if ($(this).attr("id") != "onlickImg") {
|
||||
midChange($(this).attr("data-url"));
|
||||
$("#imageMenu li").removeAttr("id");
|
||||
//$(this).parent().attr("id", "onlickImg");
|
||||
}
|
||||
}).bind("mouseover", function () {
|
||||
if ($(this).attr("id") != "onlickImg") {
|
||||
window.clearTimeout(midChangeHandler);
|
||||
midChange($(this).attr("data-url"));
|
||||
// $(this).css({ "border": "1px solid #990000" });
|
||||
}
|
||||
}).bind("mouseout", function () {
|
||||
if ($(this).attr("id") != "onlickImg") {
|
||||
$(this).removeAttr("style");
|
||||
midChangeHandler = window.setTimeout(function () {
|
||||
midChange($("#onlickImg img").attr("data-url"));
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
//点击中图，切换大图
|
||||
$("#midimg").bind("click", function () {
|
||||
$(".enlarge-img").find("img").attr("src", $(this).attr("src"));
|
||||
});
|
||||
|
||||
function midChange(src) {
|
||||
$("#midimg").attr("src", src).load(function () {
|
||||
changeViewImg();
|
||||
});
|
||||
}
|
||||
//大视窗看图
|
||||
function mouseover(e) {
|
||||
if ($("#winSelector").css("display") == "none") {
|
||||
$("#winSelector,#bigView").show();
|
||||
}
|
||||
$("#winSelector").css(fixedPosition(e));
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
function mouseOut(e) {
|
||||
if ($("#winSelector").css("display") != "none") {
|
||||
$("#winSelector,#bigView").hide();
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
$("#midimg").mouseover(mouseover); //中图事件
|
||||
$("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
|
||||
var $divWidth = $("#winSelector").width(); //选择器宽度
|
||||
var $divHeight = $("#winSelector").height(); //选择器高度
|
||||
var $imgWidth = $("#midimg").width(); //中图宽度
|
||||
var $imgHeight = $("#midimg").height(); //中图高度
|
||||
var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
|
||||
function changeViewImg() {
|
||||
$("#bigView img").attr("src", $("#midimg").attr("src"));
|
||||
}
|
||||
changeViewImg();
|
||||
$("#bigView").scrollLeft(0).scrollTop(0);
|
||||
|
||||
function fixedPosition(e) {
|
||||
if (e == null) {
|
||||
return;
|
||||
}
|
||||
var $imgLeft = $("#midimg").offset().left; //中图左边距
|
||||
var $imgTop = $("#midimg").offset().top; //中图上边距
|
||||
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
|
||||
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
|
||||
X = X < 0 ? 0 : X;
|
||||
Y = Y < 0 ? 0 : Y;
|
||||
X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
|
||||
Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
|
||||
if ($viewImgWidth == null) {
|
||||
$viewImgWidth = $("#bigView img").outerWidth();
|
||||
$viewImgHeight = $("#bigView img").height();
|
||||
if ($viewImgWidth < 200 || $viewImgHeight < 200) {
|
||||
$viewImgWidth = $viewImgHeight = 800;
|
||||
}
|
||||
$height = $divHeight * $viewImgHeight / $imgHeight;
|
||||
$("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
|
||||
$("#bigView").height($height);
|
||||
}
|
||||
var scrollX = X * $viewImgWidth / $imgWidth;
|
||||
var scrollY = Y * $viewImgHeight / $imgHeight;
|
||||
$("#bigView img").css({
|
||||
"left": scrollX * -1,
|
||||
"top": scrollY * -1
|
||||
});
|
||||
$("#bigView").css({
|
||||
"top": 0,
|
||||
"left": $(".preview").offset().left + $(".preview").width() + 15
|
||||
});
|
||||
return {
|
||||
left: X,
|
||||
top: Y
|
||||
};
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user