<!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实现鼠标移入移除背景图片切换的更多相关文章

  1. Vue2.0选中当前鼠标移入移除加样式

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...

  2. [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  3. jQuery实现鼠标移入切换图片

    初始效果: 鼠标移入效果: 首先添加jQuery库,我这边直接引用百度CDN地址 <script src="https://apps.bdimg.com/libs/jquery/2.1 ...

  4. jQuery plugin : bgStretcher 背景图片切换效果插件

    转自:http://blog.dvxj.com/pandola/jQuery_bgStretcher.html bgStretcher 2011 (Background Stretcher)是一个jQ ...

  5. JS中的鼠标移入移除监控操作

    有些时候我们需要通过页面来监控用户的行为,包括鼠标操作键盘操作,本文章介绍的是鼠标的操作监控: <script> window.onload = function(){ var oDiv ...

  6. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  7. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  8. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  9. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

随机推荐

  1. python性能优化、内存优化、内存泄露；与其他语音比较效率如何？

    1.内存泄露:http://www.cnblogs.com/xybaby/p/7491656.html 2.内存优化:http://www.cnblogs.com/xybaby/p/7488216.h ...

  2. 利用Python爬虫实现百度网盘自动化添加资源

    事情的起因是这样的,由于我想找几部经典电影欣赏欣赏,于是便向某老司机寻求资源(我备注了需要正规视频,绝对不是他想的那种资源),然后他丢给了我一个视频资源网站,说是比较有名的视频资源网站.我信以为真,便 ...

  3. sum over使用方法，以及与group by的差别

    1.sum over使用方法 sum(col1) over(partition by col2 order by col3 ) 以上的函数能够理解为:按col2 进行分组(partition ),每组 ...

  4. ubuntu上跑python连接pg，报错 ImportError: No module named psycopg2

    ubuntu上跑python连接pg,报错  ImportError: No module named psycopg2 root@pgproxy1:~# python /home/zxw/PGWri ...

  5. 使用adb在电脑和手机间传文件

    首先须要root手机. 然后,"Win + R",打开cmd窗体.以下以copy d:\1.txt到/system/文件夹为例说明. adb push source(localpa ...

  6. Objective-C语言的 if ( self = [super init] )

    我们先假设如今自己创建了个类.我们起名叫MyObject,继承于NSObject. 继承知道吧,就是你这个子类(MyObject)假设什么都不写的话,和父类(NSObject)就是一模一样的. OC里 ...

  7. openwrt-安装-驱动-应用-lcd2004a实验

    1. 板子f403tech的RT5350的板子和 (1)openWRT系统的定义和特点         OpenWrt是一个高度模块化.高度自己主动化的嵌入式Linux系统.拥有强大的网络组件.经常被 ...

  8. Android开发之接收系统广播消息

    BroadcastReceiver除了接收用户所发送的广播消息之外.另一个重要的用途:接收系统广播. 假设应用须要在系统特定时刻运行某些操作,就能够通过监听系统广播来实现.Android的大量系统事件 ...

  9. sql server 生成随机数 rand函数

    https://docs.microsoft.com/en-us/sql/t-sql/functions/rand-transact-sql?view=sql-server-2017 在某一个区间内生 ...

  10. HDU 1517:A Multiplication Game

    A Multiplication Game Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Ot ...