昨天在一个博客上看到了一个非常不错的效果,背景图片的postion属性在随着鼠标的移动而移动,如果放在banner上,效果非常漂亮~
现在我呢就做个例子
请移动鼠标看我这个网站的logo有什么变化~,效果怎么样?如果放个大图,效果太帅了!
实现代码
要实现,首先必须要有js运行库,然后接下来的你就懂了
<code>
jQuery(document).ready(function($) {
$(document).mousemove(function(e) {
var offset=$(document).width()/2-e.clientX;
$("#logo").css({"background-position":( ($(document).width()-256)/2+offset/4 -50 )+"px 0px"});
});
});</code>
jQuery(document).ready(function($) {
$(document).mousemove(function(e) {
var offset=$(document).width()/2-e.clientX;
$("#logo").css({"background-position":( ($(document).width()-256)/2+offset/4 -50 )+"px 0px"});
});
});</code>
说明:
代码中256代表你的背景图片的宽度!