实现页面滑动到一定位置后弹出图片（兼容IE9/10/11,chrome,firefox,safari）

来源：互联网发布：淘宝直通车创意编辑：程序博客网时间：2024/05/21 16:53

如题。希望这一次能够实现如下的右侧导航的效果：

http://www.tmall.com/go/act/315/anquanhuijia.php?spm=3.1000473.295292.d13.ipRRpg&ad_id=&am_id=&cm_id=140107924754f1af939f&pm_id#f6

让我来分析一下这个导航栏的效果是怎么实现的吧。

1.我们要有一张图片，用一个盒子来包住他。Map那块先不管他吧。

<!--右边导航栏--><div class="right-nav" id="right-nav">    <img usemap="#test" id="pic" class="pic" src="../res/right-nav.png" />    <map id="test" name="test">      <area shape="rect" coords="5,299,121,336" href="#f1" />      <area shape="rect" coords="6,336,120,362" href="#" />      <area shape="rect" coords="7,361,120,384" href="#" />      <area shape="rect" coords="5,383,120,412" href="#" />      <area shape="rect" coords="7,413,122,440" href="#" />      <area shape="circle" coords="61,472,31"   href="#" />      <area shape="circle" coords="60,252,42" href="#f0" />    </map></div>

2.添加了这张图片之后，我们要先让他给我们定位到右侧要的位置上去：这里使用jquery的一个函数来实现这种效果，所以你的网页先要引入一个jquery的库啦。这里就不引入演示了。将下面这段js代码放到script的标签里去。其中的top和right就是我们使用fixed定位的位置。可以根据你的需要来调整位置。

<!--左侧导航栏实现由小变大的效果-->$(window).scroll(function(){  var h_num=$(window).scrollTop();  if(h_num>200){                  //这里的200是指当页面滑动到200px的时候，触发下面的函数。$('.pic').addClass('pichover'); var temp = document.getElementById("right-nav");temp.style.position = "fixed";temp.style.top = "30px";  //可以根据你的需要来调整fixed的位置temp.style.right = "-3px";   }       else{                     //当往回滑动时，删除该元素   $('.pic').removeClass('pichover');   }   });

实现这个功能的关键在下面的CSS。

/*左侧导航栏渐变大的css*/.pic{display:block; width:123px; margin:60px 0 0; padding:10px 10px 15px; -webkit-transform:rotate(0deg) scale(0.0001); /*初始的时候，我们将其大小，也即scale设置得非常小以至不可见*/-moz-transform:rotate(0deg) scale(0.0001); transform:rotate(0deg) scale(0.0001);transition:all 0.3s ease-in; /*这句话就是关键，让整个变大的过程缓缓进行*/border:none;}.pichover{ -webkit-transform:rotate(0deg) scale(1.0); /*当变换class的时候，通过这个transform的属性，让他变大*/ -moz-transform:rotate(0deg) scale(1.0);  transform:rotate(0deg) scale(1.0);}/*左侧导航栏渐变大的css结束*/

目前这个效果只能够兼容IE9/10/11,chrome,safari,firefox,在IE8以下的浏览器中是失效的。淘宝天猫上的应该也是没有实现这个兼容性的。

然后，大家可以配合锚点，来实现导航的功能。

0 0