www.okkomax.com

(function ($) { $.fn.wheel = function (opt) { var _this = $(this); var d_opt = { scroll: "#scroll-content" // 滚动内容和模拟滚动条的容器元素 }; // 参数合并 $.extend(d_opt, opt); var index = 0; var scroll = $(d_opt.scroll); var len = scroll.children().length; add_wheel_event(_this); // 左侧导航点击事件 $(".printer-main-ul li").unbind("click").click(function () { var cur_index = $(this).index(); if (cur_index == index) { return; } index = cur_index; var step = $(window).height(); $(this).addClass("actived").siblings().removeClass("actived"); scroll.animate({ top: (-(index * step)) + "px" }, 1000); var i = $(".printer-main-ul li").eq(index).children()[0].innerText; switch (index) { case 0: first(i); break; case 1: second(i); break; case 2: third(i); break; case 3: forth(i); break; case 4: five(i); break; case 5: six(i); break; } }); //滚轮滚动 function _wheel(e) { e = e || window.event; var direct = -1;// 标记滚轮滚动方向,默认向下滚动 //确定滚轮滚动方向 if (e.deltaY) { direct = e.deltaY > 0 ? -1 : 1;// 支持标准w3c事件 } else { direct = e.wheelDelta > 0 ? 1 : -1;// IE } if ((direct > 0 && index == 0) || (direct < 0 && index == len - 1)) { // 如果已经是第一个或者最后一个,则不需要滚动 return; } //确定滚动屏数 if (direct < 0 && index < len - 1) { // 鼠标向下滚动 index += 1; } else if (direct > 0 && index !== 0) { // 鼠标向上滚动 index -= 1; } //开始滚动动画前,先取消滚轮事件 remove_wheel_event(_this); var step = $(window).height(); scroll.animate({ top: (-(index * step)) + "px" }, 1000); $(".printer-main-ul li").removeClass("actived").eq(index).addClass("actived"); var i = $(".printer-main-ul li").eq(index).children()[0].innerText; switch (index) { case 0: first(i); break; case 1: second(i); break; case 2: third(i); break; case 3: forth(i); break; case 4: five(i); break; case 5: six(i); break; } // 动画结束后,添加滚轮事件 setTimeout(function () { add_wheel_event(_this); }, 1000); } //取消滚轮滚动 function stop_wheel(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault();// 禁止执行默认事件 } else { e.returnValue = false; } } //注册滚轮滚动事件 function add_wheel_event(element) { if (document.onwheel !== undefined) { element[0].onwheel = _wheel;// 支持标准w3c事件 } else { element[0].onmousewheel = _wheel;// IE } } //取消滚轮滚动事件 function remove_wheel_event(element) { if (document.onwheel !== undefined) { element[0].onwheel = stop_wheel;// 支持标准w3c事件 } else { element[0].onmousewheel = stop_wheel;// IE } } //横向滚动 horizon_effect("first"); horizon_effect("second"); horizon_effect("third"); horizon_effect("forth"); horizon_effect("five"); horizon_effect("six"); horizon_effect1("third"); horizon_effect1("forth"); function horizon_effect1(id) { var tag = 0; var index = 0; var cur_left = ".menulist_left_" + id; var cur_right = ".menulist_right_" + id; var custom = "#" + id + " .custom"; var custom_li = "#" + id + " .custom>li"; $(cur_left).click(function () { var _this = $(this); var custom_li_w = $(window).width(); var callback = arguments.callee; _this.unbind("click"); if (index == 0) { _this.bind("click", callback); return; } index -= 1; if (index == 0) { _this.removeClass("left"); } $(custom).animate({ marginLeft: (-(index * custom_li_w)) + "px" }, 1000, function () { //$(cur_right).addClass("right"); _this.bind("click", callback); }); $(".printer-main-ul li.actived").children()[0].innerHTML = index; switch (id) { case "zero": zero(index); break; case "first": first(index); break; case "second": second(index); break; case "third": third(index); break; case "forth": forth(index); break; case "fifth": fifth(index); break; } }); $(cur_right).click(function () { var _this = $(this); var custom_li_w = $(window).width(); var callback = arguments.callee; _this.unbind("click"); if (index == $(custom_li).length - 1) { index = 0; } index += 1; if (index == $(custom_li).length - 1) { _this.removeClass("right"); } $(custom).animate({ marginLeft: (-(index * custom_li_w)) + "px" }, 1000, function () { //$(cur_left).addClass("left"); _this.bind("click", callback); }); $(".printer-main-ul li.actived").children()[0].innerHTML = index; switch (id) { case "zero": zero(index); break; case "first": first(index); break; case "second": second(index); break; case "third": third(index); break; case "forth": forth(index); break; case "fifth": fifth(index); break; } }); } function horizon_effect(id) { var index = 0; var cur_left = "#cur_left_" + id; var cur_right = "#cur_right_" + id; var custom = "#" + id + " .custom"; var custom_li = "#" + id + " .custom>li"; $(cur_left).click(function () { var _this = $(this); var custom_li_w = $(window).width(); var callback = arguments.callee; _this.unbind("click"); if (index == 0) { _this.bind("click", callback); return; } index -= 1; if (index == 0) { _this.removeClass("left"); } $(custom).animate({ marginLeft: (-(index * custom_li_w)) + "px" }, 1000, function () { $(cur_right).addClass("right"); _this.bind("click", callback); }); $(".printer-main-ul li.actived").children()[0].innerHTML = index; switch (id) { case "first": first(index); break; case "second": second(index); break; case "third": third(index); break; case "forth": forth(index); break; } }); $(cur_right).click(function () { var _this = $(this); var custom_li_w = $(window).width(); var callback = arguments.callee; _this.unbind("click"); if (index == $(custom_li).length - 1) { _this.bind("click", callback); return; } index += 1; if (index == $(custom_li).length - 1) { _this.removeClass("right"); } $(custom).animate({ marginLeft: (-(index * custom_li_w)) + "px" }, 1000, function () { $(cur_left).addClass("left"); _this.bind("click", callback); }); $(".printer-main-ul li.actived").children()[0].innerHTML = index; switch (id) { case "first": first(index); break; case "second": second(index); break; case "third": third(index); break; case "forth": forth(index); break; } }); } $(window).resize(function () { sizechange(); var h = $(window).height(); var w = $(window).width(); var index = $(".printer-main-ul li.actived").index(); scroll.animate({ top: (-(index * h)) + "px" }, 1); $(".printer-main-ul li").each(function (i) { debugger var index2 = $(this).children()[0].innerHTML; var id = $(this).attr('class').split(" ")[0]; $("#" + id + " .custom").animate({ marginLeft: (-(index2 * w)) + "px" }, 1); }); // step = $(window).height(); // var ii = 0; // $(".printer-main-ul li").each(function (i) { // if ($(this).attr("class") == 'actived') { // scroll.stop(true, true).animate({ top: (-(i * step)) + "px" }, 1); // ii = i; // } // }); // $(".printer-main-ul li.actived").children()[0].innerHTML = index; // switch (ii) { // case 1: // reset(index); // break; // case 2: // reset2(index); // break; // case 3: // reset3(index); // break; // } }); }; })(jQuery); $(function () { sizechange(); $(document).wheel(); if (!Array.prototype.forEach) { Array.prototype.forEach = function (fun /*, thisp*/) { var len = this.length; if (typeof fun != "function") throw new TypeError(); var thisp = arguments[1]; for (var i = 0; i < len; i++) { if (i in this) fun.call(thisp, this[i], i, this); } }; } }); function sizechange() { var w = $(window).width(); var h = $(window).height(); var custom_li = $(".custom>li"); custom_li.each(function (i) { $(this).width(w); $(this).height(h); }); $(".custom").each(function (i) { $(this).width($(this).children().length * w); $(this).height(h); }); } var canvas; var context; var chart; var isNew = true; function first(i) { chart.hidecan(); chart.populate([]); $(".printer-main-ul li div").slideUp("slow"); } function second(i) { chart.hidecan(); chart.populate([]); $(".printer-main-ul li div").slideUp("slow"); } function third(i) { chart.hidecan(); chart.populate([ { label: '客户信息', value: 10, future: true }, { label: '售后提醒', value: 150 } ], i); chart.showcan(); down() } function forth(i) { chart.hidecan(); chart.populate([ { label: '员工绩效', value: 10, future: true }, { label: '决策分析', value: 150 }, { label: '财务分析', value: 200 } ], i); chart.showcan(); down() } function five(i) { chart.hidecan(); chart.populate([]); $(".printer-main-ul li div").slideUp("slow"); } function six(i) { chart.hidecan(); chart.populate([]); $(".printer-main-ul li div").slideUp("slow"); } $(document).ready(function () { menulist() }) function menulist() { $(".printer-main-ul li").click(function () { $(this).find("div").slideDown(); $(this).siblings().find("div").hide(); }) } function down() { $(".printer-main-ul li.actived div").slideDown("slow").parent().siblings().find("div").slideUp("slow"); } window.onload = function () { var LineChart = function (options) { var data = options.data; canvas = document.getElementById("myCanvas"); if (typeof window.G_vmlCanvasManager != "undefined") { canvas = window.G_vmlCanvasManager.initElement(canvas); context = canvas.getContext("2d"); } else { context = canvas.getContext("2d"); } context.save();//保存当前环境的状态 context.globalAlpha = 0.5; //这里采用简单算法布置透明 context.clearRect(0, 0, canvas.width, canvas.height); //将上面的圆填充为灰色 context.fillStyle = "gray"; context.fillRect(0, 0, canvas.width, canvas.height); context.fill(); context.restore();//返回之前保存过的路径状态和属性 var rendering = false; var paddingXL = 60, paddingXR = 60, paddingYU = 20, paddingYD = 40; var width = options.width; var height = options.height; var progress = 0; canvas.width = width;//画布区域大小 canvas.height = height; var picwidth = width - paddingXL - paddingXR;//图像区域大小 var picheight = height - paddingYU - paddingYD; var maxValue, minValue; (); render(); //计算点显示的位置坐标 function (force) { maxValue = 0; minValue = Number.MAX_VALUE; data.forEach(function (point, i) {//遍历data,找出point里面value最大值和最小值 maxValue = Math.max(maxValue, point.value); minValue = Math.min(minValue, point.value); }); data.forEach(function (point, i) {//计算point在画布中的坐标位置 point.targetX = paddingXL + (i / (data.length - 1)) * picwidth;//X坐标 point.targetY = paddingYU + point.value / (maxValue + minValue) * picheight;//Y坐标 point.targetY = height - point.targetY + (paddingYU - paddingYD);//因为Y坐标是从下往上的,所以要用height-point.targetY + (paddingYU - paddingYD)得到最终的Y坐标,(paddingYU - paddingYD)上下的差 if (force || (!point.x && !point.y)) { point.x = point.targetX + 30; point.y = point.targetY; } }); } function render() { if (!rendering) { if (typeof ("requestAnimationFrame") == "function") { requestAnimationFrame(render); return; } else { setTimeout(render, 0); } } if (isNew) { context.clearRect(0, 0, width, height);//清除画布中的像素 context.font = '12px sans-serif';//字体设置 data.forEach(function (point, i) { context.save();//保存当前环境的状态 if (point.future) { //写文字 context.font = 'bold 18px sans-serif';//字体设置 var wordWidth = context.measureText(point.label).width;//返回包含指定文本宽度的对象 context.fillStyle = point.future ? 'red' : 'white'; context.fillText(point.label, point.x - (wordWidth / 2), point.y + 25);//文字显示在点下方 //画圆点 context.beginPath(); context.arc(point.x, point.y, 10, 0, Math.PI * 2); context.fillStyle = '#44b549';//圆点样式 context.fill(); } else { //写文字 var wordWidth = context.measureText(point.label).width;//返回包含指定文本宽度的对象 context.fillStyle = point.future ? 'red' : 'white'; context.fillText(point.label, point.x - (wordWidth / 2), point.y + 25);//文字显示在点下方 //画圆点 context.beginPath(); context.arc(point.x, point.y, 6, 0, Math.PI * 2); context.fillStyle = '#44b549';//圆点样式 context.fill(); } context.restore();//返回之前保存过的路径状态和属性 }); context.save();//保存当前环境的状态 context.beginPath(); context.strokeStyle = '#44b549';//线样式 context.lineWidth = 2; var futureStarted = false; data.forEach(function (point, i) { var px = i === 0 ? data[0].x : data[i - 1].x,//点的起始X坐标 py = i === 0 ? data[0].y : data[i - 1].y;//点的起始Y坐标 var x = point.x, y = point.y; if (i > 0 && data[i - 1].future && !futureStarted) { futureStarted = true; context.stroke(); //绘制已定义的路径 context.beginPath();//起始一条路径,或重置当前路径 context.moveTo(px, py); context.strokeStyle = '#aaa';//设置或返回用于笔触的颜色、渐变或模式 if (typeof context.setLineDash === 'function') { context.setLineDash([2, 3]);//虚线设置 } } if (i === 0) { context.moveTo(x, y); } else { context.lineTo(x, y); } }); context.stroke();//绘制已定义的路径 context.restore();//返回之前保存过的路径状态和属性 isNew = false; } if (typeof ("requestAnimationFrame") == "function") { requestAnimationFrame(render); return; } else { setTimeout(render, 0); } } this.start = function () { rendering = true; } this.stop = function () { rendering = false; progress = 0; (true); } this.restart = function () { this.stop(); this.start(); } this.populate = function (points, index) { progress = 0; data = points; data.forEach(function (point, i) { if (i == index) point.future = true; else point.future = false; }); (); } this.showcan = function () { $("#ffff").show(); $("#aaaa").show(); isNew = true; } this.hidecan = function () { $("#ffff").hide(); $("#aaaa").hide(); } }; var ww = document.getElementById("fff").clientWidth; var hh = document.getElementById("fff").clientHeight; chart = new LineChart({ data: [], height: hh, width: ww }); chart.start(); first(0); }