jquery实现鼠标移入移除背景图片切换
2014-12-06 14:51
656 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery.js" mce_src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sub").css("left",$("#super").offset().left); $("#sub").css("top", $("#super").offset().top); $("#super").css("background-image","url(banner1.jpg)"); $("#sub").css("background-image","url(banner2.jpg)"); $('#sub').css('opacity', 0); $("#sub").hover( function() { $("#super").stop().animate({opacity: '0'},500); $("#sub").stop().animate({opacity: '1'},500); }, function() { $("#sub").stop().animate({opacity: '0'},500); $("#super").stop().animate({opacity: '1'},500); }); } ); </script> <style> *{margin:0;padding:0;} #super{ width:1440px; height:100px; position:relative; margin:auto; } #sub { width:1440px; height:100px; position:absolute; margin:auto; } </style> </head> <body> <div id="super"></div> <div id="sub"></div> </body> </html>
相关文章推荐
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- jquery实现图片列表鼠标移入微动
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- 基于jquery实现的鼠标滑过按钮改变背景图片
- js和jquery 两种写法 鼠标经过图片切换背景效果
- jQuery鼠标移动到Div上后切换背景,或更换图片
- 【简单】H5 jQuery鼠标移入移出改变图片大小动画的实现
- jquery 实现背景图片循环切换,显示隐藏div
- 利用js实现鼠标切换控件背景图片
- jquery实现图片列表鼠标移入微动
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- jQuery实现基于鼠标滑动改变按钮背景图片、文字
- 基于jquery实现的鼠标滑过按钮改变背景图片
- CSS 实现鼠标指向切换背景图片
- Jquery实现百度的鼠标移入图片抖动的特效
- jquery实现菜单(菜单背景图片随着鼠标的移动而变化)
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- JS实现鼠标移入移出控制图片的切换效果
- jQuery实现鼠标移入移出事件切换功能示例