/* * rem计算方式:设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem,32px = .32rem】 */ !function (n) { var e = n.document, t = e.documentElement, i = 750, d = i / 100, o = "orientationchange" in n ? "orientationchange" : "resize", a = function (ae) { if(ae == 'DOMContentLoaded'){ loadEventStep++; } var n = t.clientWidth || 320; if (n > 1200) { n = 750; } else { n > 520 && (n = 520); } t.style.fontSize = n / d + "px"; _htmlFontSize = n / d; document.getElementsByTagName("body")[0].style.visibility = 'visible'; } e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1)) }(window); // 全局变量 // 页面根字体大小 var _htmlFontSize = parseInt(getComputedStyle(document.documentElement)['font-size']); // 页面宽高 var _win_h = _win_w = 0; // 滚动条宽度 var _scroll_width = 0; // 轮播 var bodyClick = new AllAreaFun(); // 模块加载完 var divLoadFun = new AllAreaFun(); // 页面滚动 var winScroll = new AllAreaFun(); winScroll.active = true; winScroll.timerOut = null; winScroll.srctop = $(window).scrollTop(); // 窗口变动 var winSize = new AllAreaFun(); winSize.timeOut = true; // 随机数 var _Mathnum = new randomNum(9999, 99999999); // 滚动距离 var _scrollTop = $(window).scrollTop(); // 判断当前页面是否是iframe var _isFrame = null; _isFrame = window.frameElement; // svg替换 var svgJs; // 全局方法 winSize.addFun('a',function(){ // 获取浏览器滚动条宽度 _scroll_width = getScrollbarWidth(); document.querySelector('html').style.setProperty('--scroll-w', _scroll_width + 'px'); // 设置窗口大小 setWind(); }); // 获取窗口高度宽度 function setWind(){ _win_h = $(window).height(); _win_w = $(window).width()+_scroll_width; } // js加载模块 var _lwdiv_num = document.getElementsByTagName('lwdiv').length; // DOM 加载完毕 document.onready = function () { _lwdiv_num = document.getElementsByTagName('lwdiv').length; start_load_document(); } // 执行模块加载 function start_load_document() { if (_lwdiv_num != 0) { $('lwdiv').each(function () { var _this = $(this), _arr = _this[0].attributes, //获取属性 file_dir = '', //文件路径 _attrObj = {}, //转化后的属性 regEx, _html = ''; for (var i = 0; i < _arr.length; i++) { _attrObj[_arr[i].name.replace('lw-', '')] = _arr[i].value; } file_dir = _attrObj.file; if (!file_dir) { console.error('请填写文件路径哇!--------提示') return false; } // 地址加时间戳防止缓存 file_dir = file_dir + '?vTime=' + new Date().getTime(); $.ajax({ url: file_dir, type: 'GET', success: function (e) { var _html = '', _obj; for (var k in _attrObj) { regEx = new RegExp('{\\s*' + k + '\\s*}', 'g'); e = e.replace(regEx, _attrObj[k]); // 去掉js代码 e = e.replace(/)<[^<]*)*<\/script>/gi,""); e = e.replace(//gi,""); } _this.before(e); _obj = _this.prev(); for (var k in _attrObj) { _obj.find('*[lw-' + k + ']').attr(k, _attrObj[k]).removeAttr('lw-' + k); } _html = _obj.html(); _html = _html.replace('lw-', ''); _html = _obj.html(_html); _this.remove(); _lwdiv_num--; if (_lwdiv_num == 0) { fun_load(); } } }) }); } else { fun_load(); } } function fun_load() { // 全局添加Body点击事件 $('body').click(function(e){ bodyClick.eventClick = e; bodyClick.runFun(); }); //加载后执行 divLoadFun.runFun(); // 页面变化 winSize.runFun(); // 滚动 winScroll.srctop = $(window).scrollTop(); if(winScroll.srctop > 0){ winScroll.runFun(); } /***轮播***/ var _swiper_arr = document.querySelectorAll('.swiper'); var _swiper_item = 0; for(var k of _swiper_arr){ var _this = k; var _attr = _this.attributes; var _can_swiper = true; if(_attr['data-auto-swiper']){ _can_swiper = _attr['data-auto-swiper'].value=='false'?false:true; } var _class = _attr['data-swiper-class']?_attr['data-swiper-class'].value:'swiper_'+_swiper_item; var _json = _attr['data-swiper-json']?_attr['data-swiper-json'].value:false; if(_can_swiper && _json){ // 字符串转json _json = eval('('+_json+')'); window[_class] = new Swiper(_this,_json) } _swiper_item = _swiper_item + 1; } /***可滚动菜单***/ if ($('.next-menu .swiper-slide').length > 0) { var _next_menu_index = $('.next-menu .link').index($('.next-menu .on')); _next_menu_index = _next_menu_index>=0?_next_menu_index:0; setTimeout(function(){ var _next_menu = new Swiper('.next-menu .swiper', { watchOverflow: true,//因为仅有1个slide,swiper无效 slidesPerView: 'auto', // simulateTouch: false, initialSlide: _next_menu_index, centerInsufficientSlides: true }) },100); } // 标题文字修改 $('.en-word-first').each(function(){ var _this = $(this); var _html; if(!_this.attr('data-edit')){ _html = _this.html(); _html = ''+_html[0]+''+_html.substring(1); _this.html(_html); } }); try { //图片放大弹框 if ($('.galpopImg').length > 0) { $('.galpopImg').galpop(); } } catch (error) { } // svg图标 try { if(SvgIcon){ svgJs = new SvgIcon(); } } catch (error) { } /**切换选项卡**/ var TablesCheck1 = TablesCheck($('.tab-box'), function () { }); // 二级菜单锚点 var _goScrollLink = hrefGetParameter('link'); if (_goScrollLink && typeof _goScrollLink.link !== 'undefined') { setTimeout(function () { goScrollFun('link=' + _goScrollLink.link); }, 100); } // 弹框 $(document).on('click','.tank-block-switch',function(){ var _class = $(this).attr('data-point'); $('.'+_class).fadeIn(); }); $(document).on('click','.tank-block .exit',function(){ $(this).parents('.tank-block').fadeOut(); }); // 通用下拉框设置() // 给body添加通用下拉框消失事件 bodyClick.addFun('selectSelfHide',function(){ if($('.select-self.show-list').length > 0){ var _e = bodyClick.eventClick; if($(_e.target).parents('.select-self').length < 1){ $('.select-self').removeClass('show-list'); } } }); $('.select-self').each(function(i){ var _this = $(this); var _select_obj = _this.find('.select-list li[default]'); if(_this.find('.select-list li.select').length > 0){ _select_obj = _this.find('.select-list li.select').eq(0); } if(_select_obj.length > 0){ _this.find('.select-word').html(_select_obj.html()); if(_select_obj.attr('val')!=''){ _this.find('.select-word').addClass('has-val'); _this.find('.select-val').val(_this.find('.select-list li.select').attr('val')); } } }); $(document).on('click','.select-self .select-val-model',function(){ var _this = $(this).parents('.select-self').eq(0); var _list = $('.select-self'); var _inx = _list.index(_this); for(var i=0,len=_list.length;i 0) { // 向上滚 $('body').removeClass('show-header'); } else if (_delta < 0) { // 向下滚 $('body').addClass('show-header'); } } else { $('body').removeClass('show-header'); $('body').removeClass('small-header'); } if(_scrollTopAll > _win_h){ $('body').addClass('show-fix'); }else{ $('body').removeClass('show-fix'); } _scrollTop = srctop; winScroll.srctop = srctop; clearTimeout(winScroll.timerOut); winScroll.timerOut = setTimeout(function () { winScroll.runFun(); }, 100); }); /**iframe弹框**/ $(document).on('click', '.iframe-btn', function () { var _href = $(this).attr('href'); var _parameter = $(this).attr('data-parameter'); var _id = 'Iframe_'; for (var i = 0; i < 999999; i++) { if ($('#' + _id + i).length > 0) { continue; } else { _id = _id + i; break; } } if (_parameter != undefined) { if (_href.indexOf('?') < 0) { _href = _href + '?' + _parameter; } else { _href = _href + '&' + _parameter; } } $('body').append(''); return false; }); // 图片上传选择 function uplpadPic(btn,img){ btn.change(function(e){ var objUrl = getObjectURL(this.files[0]) ; if (objUrl) { $(this).parents('.upload-img-block').addClass('has-val'); img.attr("src", objUrl) ; } }); } function uplpadPicDelete(btn,img){ btn.click(function(){ $(this).parents('.upload-img-block').removeClass('has-val'); $(this).parents('.upload-img-block').find('.upload-input').val(''); img.attr("src", img.attr('data-default-src')) ; }); } //建立一個可存取到該file的url function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; } /**删除iframe弹框**/ function delteIframe(obj, callback) { $(obj).fadeOut(); callback(obj); } /*** * 弹出式表单 */ $(document).on('click','.form-switch-btn',function(e){ $(this).parents('.form-box').addClass('show-form'); }); /***移动端菜单***/ $(document).on('click', '.phone-menu', function () { if ($('body').hasClass('menu-show')) { $('body').removeClass('menu-show'); } else { $('body').addClass('menu-show'); } }); /***移动端头部菜单下拉***/ $(document).on('click', '.sub-icon', function () { if($(window).width() < 1200){ var _obj = $(this).parents('.menu-son'); if(_obj.find('.sub-block').length > 0){ if (_obj.find('.menu-title').hasClass('on')) { _obj.find('.menu-title').removeClass('on'); _obj.find('.sub-block').slideUp(); } else { _obj.find('.menu-title').addClass('on'); _obj.find('.sub-block').slideDown(); } return false; } } }); /***移动端底部菜单下拉***/ $(document).on('click', '.menus .menus-li .jt', function () { if($(window).width() < 1200){ var _obj = $(this).parents('.menus-li'); if(_obj.find('.sub-block').length > 0){ if (_obj.find('.menus-title').hasClass('on')) { _obj.find('.menus-title').removeClass('on'); _obj.find('.sub-block').slideUp(); } else { _obj.find('.menus-title').addClass('on'); _obj.find('.sub-block').slideDown(); } return false; } } }); /**返回头部**/ $(document).on('click', '.return-top', function () { $('body,html').animate({ 'scrollTop': 0 }, 500); }); // 搜索框 $(document).on('click', '.search-check', function () { if ($('body').hasClass('search-show')) { $('body').removeClass('tank-show'); $('body').removeClass('search-show'); } else { $('body').addClass('tank-show'); $('body').addClass('search-show'); } }); $(document).on('click', '.form-type-a .exit', function () { $('body').removeClass('search-show'); }); // 搜索框隐藏 bodyClick.addFun('searchClickHide',function(){ var _e = bodyClick.eventClick; if($(_e.target).parents('.search-check').length < 1 && $(_e.target).parents('.form-type-a').length < 1 && !$(_e.target).hasClass('form-type-a')){ $('body').removeClass('search-show'); } }); // 二级菜单锚点 $(document).on('click', '*[data-url]', function () { var _link = $(this).attr('data-url'); if (_link) { goScrollFun(_link); return false; } }); function goScrollFun(str) { var _str_arr = str.split('='), _link_str = '', _len = 0; if (_str_arr.length < 2) { return false; } _link_str = _str_arr[1]; _len = $('.' + _link_str).offset().top - $('#header').height(); // if($('.next-menu').length > 0){ // _len = _len - $('.next-menu').height(); // } $('*[data-url]').removeClass('on'); $('*[data-url="' + str + '"]').addClass('on'); $('html,body').animate({ 'scrollTop': _len }, 500); } // 视频 $(document).on('click', '.video-play', function () { if($(this).parent('.video-play-box').find('video').length > 0){ $(this).parent('.video-play-box').addClass('controls'); $(this).parent('.video-play-box').find('video')[0].play(); $(this).parent('.video-play-box').find('video').attr('controls','true'); return false; } var src = $(this).attr('data-src') ? $(this).attr('data-src') : $(this).find('video').attr('src'); if (src) { $('.tank-video-box').find('video').attr('src', src); $('.tank-video-box').fadeIn(); $('.tank-video-box').find('video')[0].play(); return false; } }); $(document).on('click', '.tank-video-box', function () { $('.tank-video-box').fadeOut(); $('.tank-video-box').find('video')[0].pause(); }); $(document).on('click', '.tank-video-box video', function (e) { e.preventDefault(); e.stopPropagation(); }); $('video').bind('ended',function(){ $(this).parents('.video-play-box').removeClass('controls'); $(this).removeAttr('controls'); exitFullscreen(); }); //退出全屏 function exitFullscreen() { var de = document; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } } winScroll.addFun('scrollAnimate',function(){ scrollBlockAimate(); }) // 滚动动画 function scrollBlockAimate(){ var _obj = $('*[data-scroll-animate="true"]'); var _len = _obj.length; _obj.each(function(i){ var _this = $(this); scrollBlockAimateFun({ o: _this, len: _len, current: i, callback: _this.attr('data-fun')?_this.attr('data-fun'):function(){} }); }); } function scrollBlockAimateFun(opt){ var _opt = {} _opt = Object.assign(_opt,opt); // 当前标签高度 var _o_h = _opt.o.height(); // 当前标签距离顶部的距离 var _o_top = _opt.o.offset().top; // 触发点 var _check_point = { start: 0, start_pecent: .9, end: 0, end_pecent: .5, }; if(_opt.o.attr("data-start-pecent")){ _check_point.start_pecent = _opt.o.attr("data-start-pecent"); } if(_opt.o.attr("data-end-pecent")){ _check_point.end_pecent = _opt.o.attr("data-end-pecent"); } // 触发点 start _check_point.start = parseFloat(_o_top - _win_h*_check_point.start_pecent); // 触发点 end _check_point.end = parseFloat(_o_top + _o_h - _win_h**_check_point.end_pecent); if(_scrollTop > _check_point.start && _scrollTop < _check_point.end){ if(!_opt.o.hasClass('is-show-this')){ _opt.o.addClass('is-show-this') if(window[_opt.callback]){ window[_opt.callback]() } } }else{ // if(_opt.o.hasClass('is-show-this')){ // _opt.o.removeClass('is-show-this') // } } } // 百度地图API功能 function setMapfun(str,arr,arr2){ var map = new BMapGL.Map(str); var marker_arr = []; var infoWindow_arr = []; // 创建自定义图标 if(arr2.length > 0){ for (var _i=0,_len=arr2.length; _i<_len ; _i++) { var _val = arr2[_i]; var _myIcon = false; if(_val.icon){ _myIcon = new BMapGL.Icon( _val.icon, new BMapGL.Size(_val.iconSize[0],_val.iconSize[1]), { anchor:new BMapGL.Size(_val.iconSize[0]*.48,_val.iconSize[1]*.9), imageSize:new BMapGL.Size(_val.iconSize[0]*_val.iconSizePercent,_val.iconSize[1]*_val.iconSizePercent), } ); } var _coordinate = new BMapGL.Point(_val.coordinate[0],_val.coordinate[1]); var _marker = new BMapGL.Marker(_coordinate,{ icon: _myIcon }); var _infoWindow = new BMapGL.InfoWindow( _val.address, { width: 310, title: _val.title } ); map.addOverlay(_marker); marker_arr[_i] = _marker; infoWindow_arr[_i] = _infoWindow; openIw(_i,_coordinate,_val.showInfoWindow); } } // map.enableScrollWheelZoom(true); // map.addControl(new BMapGL.NavigationControl()); map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件 map.addControl(new BMapGL.ZoomControl()); // 添加比例尺控件 map.centerAndZoom(new BMapGL.Point(arr[0],arr[1]), 18); function openIw(index,coordinate,showInfoWindow){ marker_arr[index].addEventListener("click", function(){ map.openInfoWindow(infoWindow_arr[index],coordinate); //开启信息窗口 }); if(showInfoWindow){ map.openInfoWindow(infoWindow_arr[index],coordinate); //开启信息窗口 } } } /**切换选项卡**/ /*** * tab-t--选项卡对应标题 * tab-s--选项卡对应内容块儿 * tab-Parts--选项卡对应的分部 * object--选项卡最外层板块儿 * object的data-listen--本层框架标记 * data-listen--选项卡触发事件默认是click,若要用hover在object设置data-listen="hover" * -All可显示全部 * ***/ function TablesCheck(object, callback, callback_after) { object.each(function () { var _this = $(this); var listen = _this.attr('data-listen'); var checkParts = _this.attr('tab-Parts'); var points = _this.find('*[tab-t^="' + checkParts + '"]'); var shows = _this.find('*[tab-s^="' + checkParts + '"]'); // 处理函数 var activeFun = function (obj) { var _obj = obj; var tval = _obj.attr('tab-t'); if (tval) { if (callback) { callback(_obj, _this.find('*[tab-s="' + tval + '"]')); } // 所有控制点删除on points.removeClass('on'); // 设置当前选中项 _this.attr('data-tips', tval); // 当前控制点添加on _this.find('*[tab-t="' + tval + '"]').addClass('on'); if (tval == checkParts + '-All') { shows.show().removeClass('on'); } else { shows.hide().removeClass('on'); // 显示对应的板块并添加on _this.find('*[tab-s="' + tval + '"]').show().addClass('on'); } if (callback_after) { callback_after(_obj, _this.find('*[tab-s="' + tval + '"]')); } } } if (listen == 'hover') { points.hover(function () { activeFun($(this)); }); } else { points.click(function () { activeFun($(this)); }); } if (points.length > 0) { activeFun(points.eq(0)); } }); } // 声明全局对象,后期可添加 function AllAreaFun() { var _this = this; this.funArray = []; // 添加方法 this.addFun = function (fName, fn) { _this.funArray.push(fName); _this[fName] = fn; }; // 删除方法 this.removeFun = function (fName) { _this[fName] = null; delete _this[fName]; for (var i = 0, _len = _this.funArray.length; i < _len; i++) { if (_this.funArray[i] == fName) { _this.funArray.splice(i, 1); } } }; this.runFun = function () { var _funArray = _this.funArray; for (var i = 0, _len = _funArray.length; i < _len; i++) { _this[_funArray[i]](); } }; } //生成从minNum到maxNum的随机数 function randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); break; case 2: return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); break; default: return Math.random(); break; } } /**获取地址栏的参数**/ function hrefGetParameter() { var _href = window.location.href, // 获取地址 _tmp, // 临时 _tmp2, // 临时 _tmp = _href.split('?'), // 获取到的参数 _rs = {}; // 返回值 if (_tmp.length > 1) { _tmp = _tmp[1]; _tmp = _tmp.split('&'); for (var i = 0; i < _tmp.length; i++) { _tmp2 = null; _tmp2 = _tmp[i].split('='); if (_tmp2[0] != '') { if (_tmp2.length > 1) { _rs[_tmp2[0]] = _tmp2[1]; } else { _rs[_tmp2[0]] = _tmp2[0]; } } } } else { _rs = false; } _href = _tmp = _tmp2 = null; // 释放 return _rs; } // 获取浏览器滚动条宽度 function getScrollbarWidth() { var odiv = document.createElement('div'),//创建一个div styles = { opacity: 0, position: 'fixed', left: 0, top: 0, pointerEvents: 'none', width: '100px', height: '100px', overflowY: 'scroll'//让他有滚动条 }, i, scrollbarWidth; for (i in styles) odiv.style[i] = styles[i]; document.body.appendChild(odiv);//把div添加到body中 scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减 odiv.remove();//移除创建的div return scrollbarWidth;//返回滚动条宽度 } /***鼠标滚动***/ /*** * callback--回调 * ***/ function addMouseScrollFun(opt) { var _this = this, _o = { _if_h: opt.ifHistory ? true : false, // 是否启动记录功能 _a_s_n: 0, // 滚动总次数 _a_u_s_n: 0, // 向上滚动总次数 _a_d_s_n: 0, // 向下滚动总次数 _p_dir: 0, // 上次滚动方向 _c_dir: 0, // 当前滚动方向 _afterScroll: opt.callback ? opt.callback : function() {}, // 滚动后 }; // 初始化 _this.init = function() { //给页面绑定滑轮滚动事件 if (document.addEventListener) { document.addEventListener('DOMMouseScroll', _this.scrollFunc, false); } //滚动滑轮触发scrollFunc方法 window.onmousewheel = document.onmousewheel = _this.scrollFunc; } // 滚动 _this.scrollFunc = function(e) { e = e || window.event; _o._a_s_n++; // 滚动总次数 _o._p_dir = _o._c_dir; // 记录上次 if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件 if (e.wheelDelta > 0) { //当滑轮向上滚动时 _o._c_dir = 1; if (_o._if_h) { _o._a_u_s_n++; } } if (e.wheelDelta < 0) { //当滑轮向下滚动时 _o._c_dir = -1; if (_o._if_h) { _o._a_d_s_n++; } } } else if (e.detail) { //Firefox滑轮事件 if (e.detail > 0) { //当滑轮向上滚动时 _o._c_dir = 1; if (_o._if_h) { _o._a_d_s_n++; } } if (e.detail < 0) { //当滑轮向下滚动时 _o._c_dir = -1; if (_o._if_h) { _o._a_u_s_n++; } } } _o._afterScroll(_o._c_dir) } // 执行初始化 _this.init(); } //数字增长 (function($) { $.fn.numberRock = function(options) { var defaults = { lastNumber: 100, duration: 2000, easing: 'swing' //swing(默认 : 缓冲 : 慢快慢) linear(匀速的) }; var opts = $.extend({}, defaults, options); $(this).animate({ num: "numberRock", // width : 300, // height : 300, }, { duration: opts.duration, easing: opts.easing, complete: function() { //console.log("success"); }, step: function(a, b) { //可以检测我们定时器的每一次变化 //console.log(a); //console.log(b.pos); //运动过程中的比例值(0~1) $(this).html(parseInt(b.pos * opts.lastNumber)); } }); } })(jQuery); //倒计时函数 /** * @param * obj 处理对象 * times 设置时间 默认60 * callback 计时完成回调函数 */ function jsInnerTimeout(opt) { var _this = this; var opts = { obj: opt.obj ? opt.obj : document.getElementById('getCode'), times: opt.times ? opt.times : 60, callfun: function(e) { if (opt.callback) { opt.callback(e); } } } opts.obj.setAttribute('data-word', opts.obj.innerText); _this.goSet = function() { if (opts.times <= 0) { opts.obj.removeAttribute("disabled"); opts.obj.innerText = opts.obj.getAttribute('data-word'); opts.callfun(_this); return false; } else { opts.obj.setAttribute("disabled", "disabled"); opts.obj.innerText = opts.times + 's'; setTimeout(function() { _this.goSet(); }, 1000); } opts.times--; } _this.goSet(); }; /**统一高度**/ /*** * opints--传入对象 * opints.obj--需要处理列表对象 * opints.nums--是否分组不分组则不填写 * ***/ function ListSameHeight(opints) { var obj = opints.obj; var num = opints.nums ? opints.nums : false; obj.height('auto'); if (num == false || num >= obj.length) { var li_h = 0; obj.each(function(i) { $(this).height('auto'); if (li_h < $(this).height()) { li_h = $(this).height(); } }); obj.height(li_h); } else { var li_h = 0; obj.each(function(i) { if (i % num == num - 1) { $(this).height('auto'); if (li_h < $(this).height()) { li_h = $(this).height(); } for (var ii = num - 1; ii >= 0; ii--) { obj.eq(i - ii).height(li_h); } li_h = 0; } else { $(this).height('auto'); if (li_h < $(this).height()) { li_h = $(this).height(); } if (i == obj.length - 1) { for (var ii = obj.length % num - 1; ii >= 0; ii--) { obj.eq(i - ii).height(li_h); } } } }); } } /**图片放大**/ function Zoom(imgbox, hoverbox, l, t, x, y, h_w, h_h, showbox) { var moveX = x - l - (h_w / 2); //鼠标区域距离 var moveY = y - t - (h_h / 2); //鼠标区域距离 if (moveX < 0) { moveX = 0 } if (moveY < 0) { moveY = 0 } if (moveX > imgbox.width() - h_w) { moveX = imgbox.width() - h_w } if (moveY > imgbox.height() - h_h) { moveY = imgbox.height() - h_h } //判断鼠标使其不跑出图片框 var zoomX = showbox.width() / imgbox.width() //求图片比例 var zoomY = showbox.height() / imgbox.height() showbox.css({ left: -(moveX * zoomX), top: -(moveY * zoomY) }) hoverbox.css({ left: moveX, top: moveY }) //确定位置 } function Zoomhover(imgbox, hoverbox, showbox) { var l = imgbox.offset().left; var t = imgbox.offset().top; var w = hoverbox.width(); var h = hoverbox.height(); var time; imgbox = imgbox.find('.probox'); imgbox.mouseover(function(e) { l = imgbox.offset().left; t = imgbox.offset().top; w = hoverbox.width(); h = hoverbox.height(); var n_src = $(this).find('img').attr('src'); var o_src = showbox.attr('src'); if (n_src != o_src) { showbox.attr('src', n_src); } var x = e.pageX; var y = e.pageY; var obj = $(this); $(".hoverbox,.showbox").show(); hoverbox.css("opacity", "0.3") time = setTimeout(function() { Zoom(obj, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mousemove(function(e) { l = imgbox.offset().left; t = imgbox.offset().top; w = hoverbox.width(); h = hoverbox.height(); var x = e.pageX; var y = e.pageY; var obj = $(this); time = setTimeout(function() { Zoom(obj, hoverbox, l, t, x, y, w, h, showbox) }, 1) }).mouseout(function() { showbox.parent().hide() hoverbox.hide(); }) }