首先，只判断是否是用 移动设备 浏览的：
创新互联建站专业为企业提供龙圩网站建设、龙圩做网站、龙圩网站设计、龙圩网站制作等企业网站建设、网页设计与制作、龙圩企业网站模板建站服务，10余年龙圩做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
// Mobile 这里是只有不再 移动设备 上访问时，才给相应元素加上 mouseenter 和 mouseleave 事件。
if (!navigator.userAgent.match(/mobile/i)) {
$('.nav-dots span').mouseenter(function(){
$(this).css('background-color', 'rgba(0, 0, 0, 0.2) !important');
});
$('.nav-dots span').mouseleave(function(){
$(this).css('background-color', 'rgba(255, 255, 255, 0.2) !important');
});
}
第二，需要得到详细的移动设备的类型：
$(document).ready(function() {
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i) ? true : false;
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i) ? true : false;
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i) ? true : false;
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
}
};
if( isMobile.any() )
{
$('.main_header').hide();
}
});
html
head
titleemu/title
/head
body
BR
原图：BR
img src=[pp.jpg onmousemove="zoom()" id=srcImg
BR
局部放大图：BR
div style="overflow:hidden"img id=zoomImg/div
SCRIPT LANGUAGE="javascript"
!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height/2;
var zoomRate = 5;
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x(elm.offsetWidth-w)?xw?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y(elm.offsetHeight-h)?yh?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//--
/SCRIPT
/body
/html
这个是随鼠标移动查看放大图片响应的是onmousemove事件
你可以改下
第二种方法：
可自定义CSS样式，控制jQuery插件jQuery Image Flyout提示小图片显示效果。
代码
一，包含文件
script src="jquery.js" type="text/javascript"/script
script src="jquery.flyout.js" type="text/javascript"/script
script src="jquery.easing.js" type="text/javascript"/script
二，HTML部分(DIV层内所用图片链接)
divjQuery插件flyout弹出图片/div
div id="biuuu"
a href="iphone.jpg" title="jquery.flyout"img src="iphone_small.jpg" alt="iphone" //a
/div
三，Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用)
script type="text/javascript"
!--
$(function() {
$(#biuuu a).flyout();
--
/script
实例中将ID为biuuu的DIV内所有链接元素a增加javascript弹出放大图片功能，其中链接href部分为表示弹出的 大图片路径。使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。
一，自定义预加载提示图片
$(#biuuu a).flyout({loadingSrc:thumb-loading.gif,outEase:easeInCirc,inEase:easeOutBounce});
loadingSrc表示预加载提示图片路径
outEase表示弹出图片放大过程使用的jQuery插件Easing Plugin特效，如：easeInCirc
inEase表示弹出图片缩小过程使用的jQuery插件Easing Plugin特效，如：easeOutBounce
二，自定义弹出图片后图片显示样式
$(#biuuu a).flyout({loadingSrc:thumb-loading.gif,outEase:easeOutQuad,inEase:easeInBack,loader:loader2,widthMargin:300,heightMargin:300});
loader表示弹出图片后调用的CSS样式
widthMargin表示弹出图片后显示的margin宽度
heightMargin表示弹出图片后显示的margin高度
jQuery插件jQuery Image Flyout弹出图片可自定义定制丰富的图片效果
方法/步骤
1
首先需要引入一个jquery.fly.min.js文件（可自行搜索，也可以在本人的百度云盘中找到）
2
设置抛物线的位置（起点也可以是整个页面的可点击区域，即body）：
抛物线起点，此例中为.left_btn（标签的classname）
抛物线终点，此例中为.gwcimg（标签的classname）
3
创建JS方法：
$('.left_btn').on('click', addProduct);
function addProduct(event){
var offset = $(".gwcimg").offset(),
//抛物线图片，可自行更改
flyer = $('img src="brandmarket/image/gwc.png" width="36" height="36"');
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
//抛物线完成后留在页面上的图片大小
width: 20,height: 20
}
});
}
4
大致有两种效果，一种是每添加一次就在购物车的数字上加一，数字显示的位置可以用CSS样式控制，然后把上一步中“抛物线完成后留在页面上的图片大小”中宽高值都设置为0，效果如下：
5
另一种是将数字用图片代替，此为默认的效果，改变浏览器大小的时候，用来代替的图片会一直停留在绝对位置，效果如下：