求高手解决jquery问题（ie下）

xuchuang934411545 2012-03-16 01:29:45
我做了一个js效果，就是鼠标在图片上左右滑动的时候，图片跟着变，我用的jquery的mousemove事件，结果问题来了，在别的浏览器下都没问题，就是在ie下来回快速的滑动，来回四五圈过后就会出现问题了，请大家帮我看看啊
<!DOCTYPE html>

<html><head>

<title>test</title>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="http://static.cnmo-img.com.cn/js/jquery144p.js"></script>

<style>



@charset "gb2312";

/* CSS Document */

body{ background:url(http://icon.cnmo-img.com.cn/mainpage/20120301/body_bg.jpg) repeat-x;}

a{ color:#003366; text-decoration:none;}

.headline a,.headline{ color:#666;}

a:hover{ text-decoration:underline;}

:focus{outline:0 none;}

.l{ float:left;}

.r{ float:right;}



.wrapper3{ width:980px; margin:0 auto; background:url(http://icon.cnmo-img.com.cn/mainpage/20120301/sidebg.jpg) repeat-y; padding:0 13px;}

.pt10{ padding-top:10px;}

.mt10{ margin-top:10px;}

.mt5{ margin-top:7px;}

.colum1{ width:440px;}

.colum2{ width:530px;}

.main{ width:790px;}

.side{ width:170px; padding-left:10px;}



/*字体样式*/

.f14{ font-size:14px;}



.main h2{ height:24px; overflow:hidden; text-indent:-9999em;}

.main h2.hot{ background-position:-2px -236px; width:86px; }

.main h2.enhot{ background-position:-2px -264px; width:111px; height:31px; }

.main h2.android{ background-position:-90px -235px; width:106px; }

.main h2.enandroid{ background-position:-122px -265px; width:75px; height:31px;}

.main h2.wp{ background-position:-200px -236px; width:229px; }

.main h2.enwp{ background-position:-205px -265px; width:144px; height:31px; }

.main h2.apple{ background-position:-440px -236px; width:108px; }

.main h2.enapple{ background-position:-361px -265px; width:119px; height:31px;}

.main h2.tables{ background-position:-558px -236px; width:119px; }

.main h2.entables{ background-position:-488px -265px; width:69px; height:31px;}

.main h2.school{ background-position:-683px -235px; width:92px; }

.main h2.enschool{ background-position:-567px -265px; width:65px; height:31px;}

.main h2.fashion{ background-position:-779px -236px; width:92px; }

.main h2.enfashion{ background-position:-643px -265px; width:127px; height:31px;}

.main h2.forums{ background-position:-873px -236px; width:92px; }

.main h2.enforums{ background-position:-780px -265px; width:135px; height:31px;}

.main .title{ height:30px; border-bottom:3px solid #000;}

.main h3{ font:18px/31px "微软雅黑"; color:#333; width:320px; float:right;  line-height:29px\9; padding-top:2px\9;}

.tag_list{ float:right; padding-top:5px;}

.tag_list li{ width:88px; float:left; font:14px/25px simsun; text-align:center; cursor:pointer; background:#EEF0F2; margin-left:3px; display:inline; height:25px; overflow:hidden;}

.tag_list li a{ display:block; color:#666; font:14px/26px simsun;  line-height:28px\9;}

.tag_list li.cur a{ background:#3984B0; font-weight:bold; color:#fff; text-decoration:none;}

.best_seller_box{ height:556px;}

.product_box{ width:254px; height:268px; border:1px solid #ebebeb; float:left; text-align:center; position:relative; margin:0 11px 10px 0;  display:inline; background:#fff;}

.product_box_end{ margin-right:0;}

.product_box .tl,.product_box .tr{ width:12px; height:12px; background-position:-113px -201px; position:absolute; top:-1px; line-height:12px; font-size:0;}

.product_box .tl{ left:-1px;}

.product_box .tr{ background-position:-125px -201px; right:-1px; }

.product_box .pic{ width:254px; height:171px; display:table-cell; padding-top:7px; border-bottom:1px solid #ebebeb;}

.star,.star em{ display:inline-block; height:21px; font:0/0 Arial; width:84px; background-position:0 -373px; text-align:left; vertical-align:middle;}

.star{ background-position:0 -397px;}

.star_box{ display:inline-block; cursor:pointer;}

.product_box .f14{ color:#900; font-weight:bold;}

.product_box .tel{ background-position:0 -423px; display:inline-block; padding-left:20px; margin-left:10px;}

.product_box .name{ padding:8px 0; line-height:16px;}

.product_box .addr{ padding:5px 0 0;}

.product_box .level{ margin-left:8px;}

.side .title{ background-position:0 -49px; }

.side h2{ font:bold 14px/18px simsun; width:100px; margin:0 auto; background:#fff; text-align:center;}



</style>



</head>

<body>





<div class="wrapper3 clearfix">

	<div class="main l pt10">

    	

        <div class="clearfix">

        	<h2 class="enhot">Best Sellers</h2>

        </div>

        <!--热销产品-->

        <div class="clearfix best_seller_box" id="c_tab_b1">

        

             <div class="product_box">

                <div class="tl"></div>

                <div class="tr"></div>

                <div class="tuijian"></div>

                <div class="pic">

                	<a href="http://product.cnmo.com/cell_phone/index161617.shtml">

                    <img  src="http://imgm9.cnmo-img.com.cn/56_module_images/319.jpg" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm6.cnmo-img.com.cn/56_module_images/346.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm3.cnmo-img.com.cn/56_module_images/323.jpg" style="display: none;" height="165" width="220">

                    </a>

                </div>

              </div>



               <div class="product_box">

                <div class="tl"></div>

                <div class="tr"></div>

                <div class="tuijian"></div>

                <div class="pic">

                	<a href="http://product.cnmo.com/cell_phone/index161617.shtml">

                    <img  src="http://imgm9.cnmo-img.com.cn/56_module_images/319.jpg" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm6.cnmo-img.com.cn/56_module_images/346.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm3.cnmo-img.com.cn/56_module_images/323.jpg" style="display: none;" height="165" width="220">

                    </a>

                </div>

              </div>



               <div class="product_box">

                <div class="tl"></div>

                <div class="tr"></div>

                <div class="tuijian"></div>

                <div class="pic">

                	<a href="http://product.cnmo.com/cell_phone/index161617.shtml">

                    <img  src="http://imgm9.cnmo-img.com.cn/56_module_images/319.jpg" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm6.cnmo-img.com.cn/56_module_images/346.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm3.cnmo-img.com.cn/56_module_images/323.jpg" style="display: none;" height="165" width="220">

                    </a>

                </div>

              </div>



               <div class="product_box">

                <div class="tl"></div>

                <div class="tr"></div>

                <div class="tuijian"></div>

                <div class="pic">

                	<a href="http://product.cnmo.com/cell_phone/index161617.shtml">

                    <img  src="http://imgm9.cnmo-img.com.cn/56_module_images/319.jpg" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm.cnmo-img.com.cn/56_module_images/320.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm6.cnmo-img.com.cn/56_module_images/346.jpg" style="display: none;" height="165" width="220">

                    <img  src="http://imgm3.cnmo-img.com.cn/56_module_images/323.jpg" style="display: none;" height="165" width="220">

                    </a>

                </div>

              </div>

                

                

               

    

</div>

<div id="number"></div>



<script type="text/javascript">





$(document).ready(function(){



    //热销产品图片切换

	$("#c_tab_b1 .product_box div.pic").mouseenter(function(){

		var picNum = $(this).children('a').children().size();

		//图片宽度

		var img = new Image();

		img.src =$(this).children('a').children('img').attr("src") ;

        var picWidth = img.width;

		var $widthPer = Math.ceil(picWidth/picNum);

		var widthPic = $(this).children('a').children('img').offset().left || 0;

		if(picNum >= 1){

			$(this).children('a').children('img').mousemove(function(e){

				var widthh = e.pageX-widthPic || 0;//鼠标相对图片的很坐标

                for(var i=0;i<=picNum;i++){

	            	var maxWid = $widthPer*(i+1);

	            	var minWid = $widthPer*i;

	            	if(widthh > minWid && widthh <= maxWid){

	            		$(this).parent().children('img').hide();

	            		$(this).parent().children().filter(":eq("+i+")").show();

	            	}

	            }

			});

		}

	}).mouseleave(function(){

		$(this).children('a').children('img').hide().first().show();

	});





	

});







</script>



</body></html>
...全文
176 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
解决 IE下ajaxfileupload不兼容的问题
本文介绍了解决IE浏览器中使用AjaxFileUpload组件上传文件无反应的问题。通过修改源代码实现IE各版本的兼容，并提供了解决因jQuery版本过高导致的不兼容问题的方法。
ie ajax十分卡,解决jquery .ajax 在IE下卡死问题的解决方法
本文详细介绍了如何解决jQuery的ajax在Internet Explorer浏览器中出现的缓存问题，包括设置dataType以区分返回类型，使用特定的解析XML函数以适应IE，以及在请求URL中添加时间戳防止缓存。同时，提到了Firefox浏览器在此问题上的不同行为，并给出了在jQuery中全局禁用缓存的方法。
jQuery的offset在IE下的问题
本文探讨了在IE浏览器中使用jQuery的offset()方法设置inline-block元素位置时出现的问题，解释了原因在于IE下inline-block元素与inline元素默认长宽不同，并通过实例演示了解决方案。
Uploadify在IE下的兼容问题解决
本文提供了解决IE9和IE10浏览器中使用Uploadify组件时无法点击的问题方案，并修复了JQuery运行时出现的“没有对象”的错误。通过修改Uploadify的JS文件中的特定方法实现问题的解决。
IE8不支持jQuery问题
在开发WordPress主题时，发现网页在Chrome等现代浏览器正常，但在IE8上出现错误。经排查，问题源于IE8不支持jQuery 2.1及以上版本，因为这些版本不再兼容IE8。解决方案是在页面头部引入jQuery 1.9的CDN链接，确保对IE8的兼容。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章