网页侧边半收藏，鼠标移上时，滑出并全显示

来源：互联网发布：网络维护好学吗编辑：程序博客网时间：2024/06/03 20:15

<style>.lj{width:100px;height:100px;background:#990000;position:absolute;    top:400px;left:-60px;z-index:99;cursor:pointer;}.lj.lj-is-visible{position:fixed;top:10px;}</style>

<body style="height:2000px;"><div class="lj" ></div><script type="text/javascript"> $(window).scroll(function(){   ($(this).scrollTop()>420)?$('.lj').addClass('lj-is-visible'):$('.lj').removeClass('lj-is-visible'); }); if(document.body.clientWidth<=800){   $('.lj').mouseenter(function(){$('.lj').stop().animate({left:'20'},500);});   $('.lj').mouseleave(function(){$('.lj').stop().animate({left:'-60'},1000);}); } else{ $('.lj').css("left","20px"); }</script></body>

实现2个功能：

1、当滚动像素大于420时，对div的样式添加lj-is-visible样式，否则只应该lj样式;
2、当前窗体的宽度少于800px时，对div应用mouseenter和mouseleave事件，当大于800px时，直接定义div的left值

注：要加载jQuery.js代码

0 0