<!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. Divide Two Integers（模拟计算机除法）

    Divide two integers without using multiplication, division and mod operator. 由于不能用乘号,除号,和取余.那么一个数除另外 ...

  2. CSS头像右上角的讨厌红点

    就是这个讨厌的红点,如图: 说明: 1.主要用到position定位: 2.使用border-radius画圆角: 源码: <!DOCTYPE html> <html> < ...

  3. 子元素设置margin-top，父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  4. CentOS command

    管理centos服务器的时候常会对文件进行一些常规操作,除了ftp之外了解在ssh下必要的文件操作命令那也是必不可少的,以下摘录一些常用的文件操作命令: 文件操作: ls ####查看目录中的文件## ...

  5. AutoCAD如何打印

    现在有一个CAD图纸,左侧为房型图,右侧为规划好之后的图纸,我只要打印右侧的东西.点击文件-打印   在打印设备中选择Default Windows System Printer,名称的下拉菜单下面有 ...

  6. Java实现二叉搜索树及相关操作

    package com.tree; import com.tree.BitNode; /** * * 二叉搜索树:一个节点的左子节点的关键字小于这个节点.右子节点的关键字大于或等于这个父节点 * * ...

  7. Apple Swift编程语言新手教程

    文件夹 1   简单介绍 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 7   枚举与结构 1   简单介绍 今天凌晨Apple刚刚公布了Swift编程 ...

  8. MySQL 中间层 Atlas MySQL

    Atlas MySQL 详细介绍 Atlas是由 Qihoo 360,  Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0. ...

  9. 2.eclipse 插件安装烦死人（2）

    安装插件的实际结果是:(烦死人),要不是很多插件找不到,要不就是版本不对,要不就是下载了装上没有效果,要不就是在线安装(速度爆慢),好不容易等到结果了,结果是些错…… 最后我的eclipse 3.5. ...

  10. CSS总结01

    1 CSS 的作用是? 2 如何引入 CSS 样式? 3 CSS 选择器的基本类型和复合选择器分别是? 4 字体.背景.列表和链接和鼠标的属性有哪些? 5 如何理解盒子模型? 6 浮动的方式有哪些,如 ...