jQuery.position()对不同浏览器的支持，并不可靠（一，问题描述）

最新推荐文章于 2019-07-18 15:46:16 发布

wuli_luo

最新推荐文章于 2019-07-18 15:46:16 发布

阅读量643

点赞数

分类专栏： JQUERY 文章标签： jquery position 浏览器 ie 11 谷歌

本文链接：https://blog.csdn.net/u014594974/article/details/52168751

版权

JQUERY 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本人在学习《jquery从菜鸟到忍者》一书的chap4的最后一节“iphoto式的幻灯片小部件”时，用随书附带的源码进行测试时，发现在谷歌和IE11浏览器下都不能正常运行，而在360下无误，对代码进行console，终于发现了不同浏览器对position()方法的支持并不可靠。

以下为Js(script.js)源码：

$(document).ready(function(){
  gallery.trigger = $("#photos .trigger");
  gallery.content = $("#photos_inner");
  gallery.scroll = false;
  gallery.width = 400;
  gallery.innerWidth = gallery.content.width();
  gallery.timer = false;
  gallery.init();
});

gallery = {};

gallery.offset = function() {
  var left = gallery.content.position().left;
 <strong> console.log(left);</strong>
  if (gallery.scroll == '<') {
    <strong><span style="color:#000099;">if (left < 0) </span></strong>{
      left += gallery.width;
    }
  }
  else {
    if (<span style="color:#cc0000;"><strong>left <= 0</strong></span> && left >= ((gallery.innerWidth * -1) + (gallery.width * 2))) {
      left -= gallery.width;
    }
  }
  return left + "px";
}

gallery.slide = function() {  
	if (gallery.timer) {
    clearTimeout(gallery.timer);
  }
  if (gallery.scroll) {
    $(gallery.content).stop(true,true).animate({left: gallery.offset()}, 500);
    gallery.timer = setTimeout(gallery.slide, 1000)
  }
}

gallery.direction = function(e,which) {
  var x = e.pageX - which.offset().left;
  gallery.scroll = (x >= gallery.width / 2) ? ">" : "<";
}

gallery.init = function() {
  $(gallery.trigger)
    .mouseout(function() {gallery.scroll = false;})
    .mousemove(function(e) {gallery.direction(e,gallery.trigger);})
    .mouseover(function(e) {
      gallery.direction(e,gallery.trigger);
      gallery.slide();
    });
}

一。下面给出正常效果图和console.log显示，console显示的是position().left：

二。但是在谷歌浏览器，显示的结果普遍偏小，如图，这就导致了

 if (gallery.scroll == '<') {
    if (<strong>left < 0</strong>) {
      left += gallery.width;
    }
  }

在正常情况下，鼠标移到左边想查看左边的图片的时候，移到第一张时应该不再移动，而在谷歌下，第一张的position().left接近0却小于0，left 变为399.99，显示空白。

三。而在IE11下正好相反，position()偏大，尤其在第一张时，鼠标移到右边想查看右边的图片的时候，无法移动。

 else {
    if <strong><span style="font-size:14px;">(left <= 0</span></strong> && left >= ((gallery.innerWidth * -1) + (gallery.width * 2))) {
      left -= gallery.width;
    }
  }

left>0不符合程序执行条件，而且在IE中同一位置的left每次可能不一样，很头大。

四。对应的html文档，有兴趣可以自己尝试。

<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>StarTrackr!</title>
	
	<link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>	
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
  
	<script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script>
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>StarTrackr!</h1>
		</div>
		<div id="content">
			<h2>
				Welcome!
			</h2>
      <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Buy Now!</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Gift Ideas</a></li>
      </ul>
			<p id="intro">
				Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!		
			</p>
			<p id="disclaimer">
				Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
			</p>
      <h2>Around town last night</h2>
      <div id="photos">
        <a href="#" class="trigger">Image Gallery</a>
        <ul id="photos_inner">
          <li><img alt="Glendatronix" src="../../images/glenda_400.jpg" /></li>
          <li><img alt="Darth Fader" src="../../images/fader_400.jpg" /></li>
          <li><img alt="Beau Dandy" src="../../images/beau_400.jpg" /></li>
          <li><img alt="Johnny Stardust" src="../../images/johnny_400.jpg" /></li>
          <li><img alt="Mo' Fat" src="../../images/mofat_400.jpg" /></li>
          <li><img alt="Glendatronix" src="../../images/kellie_400.jpg" /></li>
          <li><img alt="Darth Fader" src="../../images/fader_400.jpg" /></li>
          <li><img alt="Beau Dandy" src="../../images/beau_400.jpg" /></li>
          <li><img alt="Johnny Stardust" src="../../images/johnny_400.jpg" /></li>
          <li><img alt="Mo' Fat" src="../../images/mofat_400.jpg" /></li>
        </ul>
      </div>
      
      <div id="comment">
        <h2>Leave a comment</h2>
        name:<br />
        <input type="text" /><br/>
        comment:<br/>
        <textarea rows="5" cols="30"></textarea>
      </div>
			
			<h2>Fine Print</h2>
			<p id="fine_print">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.		
			</p>
		</div>

		<div id="footer">
			<p>
				&copy; Copyright 2010 CelebriTracker Productions
			</p>
		</div>
	</div>
</body>
</html>

wuli_luo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.position()对不同浏览器的支持，并不可靠（一，问题描述）

本人在学习《jquery从菜鸟到忍者》一书的chap4的最后一节“iphoto式的幻灯片小部件”时，用随书附带的源码进行测试时，发现在谷歌和IE11浏览器下都不能正常运行，而在360下无误，对代码进行console，终于发现了不同浏览器对position()方法的支持并不可靠。以下为Js(script.js)源码：$(document).ready(function(){ galler
复制链接

扫一扫

专栏目录