<!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. 用JQ实现基础的添加,插入,删除功能。

    在eclipse里面运行代码即可,如果您是其他应用,请选择对您有帮助的代码即可,如果有写错或不懂的地方请联系QQ:1633420056,谢谢,祝学习进步 <!DOCTYPE html>&l ...

  2. java反射-使用反射来操纵方法

    一个类的主要成员时方法,辣么我们通过反射获取到一个类的所有方法信息后,总的寻找一种方式去操作调用这些方法,这样反射才有意义有意思. Method对象有一个方法invoke.      public O ...

  3. 记 SpringBoot1.* 转 Springoot2.0 遇到的问题

    1.拦截器问题 到2.0之后在配置文件中写 static-path-pattern: /static/** 已经不起作用(2.0需要在方法中配置) SpringBoot1.*写法 @Configura ...

  4. Spring Boot为我们准备了最佳的数据库连接池方案，只需要在属性文件（例如application.properties）中配置需要的连接池参数即可。

    Spring Boot为我们准备了最佳的数据库连接池方案,只需要在属性文件(例如application.properties)中配置需要的连接池参数即可.

  5. TP-Link的Atheros芯片的WR886n v5 安装SuperWRT系统

    安装SuperWRT系统 本教程以TP-Link的Atheros芯片的WR886n v5为例,教新手如何刷入一个已支持设备的固件. 下载设备固件请访问:这里 (没有支持你的设备?自由动手一下:hack ...

  6. 在GNS3下使用Cisco SDM 的教程

    安装步骤: 1..先安装jre-6u17-windows-i586se (最新版的)如图: 点击安装,直到安装完成. © 2.安装SDM2.5中文版SDM-V25 如图 : 出现欢迎安装向导,点击下一 ...

  7. [Algorithms] Determine if a string is a palindrome

    A palindrome is a string that reads the same forward and backward, for example, radar, toot, and mad ...

  8. CodeIgniter 向mysql插入数据包括字母、汉字问题

    今天在使用ci框架,须要向mysql数据表插入数据.当中的一个字段包括汉字.字母.但是用传统的使用sql语句:insert into XXX这样的方式,不管怎样都插入不成功,最后我换了还有一种方式: ...

  9. java实现floyd统计天津地铁的网站距离

    一:说明 (1)使用floyd实现各个网站的计算记录和路径 (2)网站获取和初始距离依据外部文件得到 (3)结果以外部文件的形式存储 (4)网站间转乘,觉得初始值也为1 (5)代码凝视比較具体,如有疑 ...

  10. ios学习8_KVC和字典转模型

    Key Value Coding是cocoa的一个标准组成部分,它能让我们能够通过name(key)的方式訪问属性,某些情况下极大地简化了代码.可称之为cocoa的大招. 例如以下的样例: 使用KVC ...