jquery实现飘窗(飘动图片) 插件bay-window.js
效果:
1.js及css部分:
<script type="text/javascript" src="/js/jquery.bay-window.js"></script>
<style type="text/css">
/* 给飘窗添加一些基础样式,如宽度,高度和背景颜色等等 */
#bay{
width: 420px;
height: 250px;
z-index:99999999;
}
body{background-color: #F4F4F4}
</style>
2.html页面:
<!-- 飘窗元素 -->
<a href="#"><img id="bay" src="images/piao.jpg" /></a>
3.插件启用:
<script type="text/javascript">
//测试插件
$('#bay').autoMove({angle:-Math.PI/4, speed:200});
</script>
注意事项:
插件中 使用了绝对位置,若想图片随着浏览器的显示一值滚动,可将
$(this).css({position: 'absolute', left: setobj['startL']+'px', top: setobj['startT']+'px'});
里的position: 'absolute',改为 position: 'fixed'
本文原创,转载必追究版权。