<html>
<head>
<title>test</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("img").mouseover(function(){
var left = this.offsetLeft;
var top = this.offsetTop + this.height + 10;
$("#big-img").
css("left",left + "px").
css("top",top + "px").
html("<img src='http://blog.bingo929.com/wp-content/uploads/2009/03/38.gif'>").
show();
var url = $(this).attr("rel");
//图片加载完毕后
$('<img src="' + url + '">').load(function(){
$("#big-img").html(this);
});
}).mouseout(function(){
$("#big-img").hide().html("");
});
});
</script>
<style type="text/css">
<!--
#big-img{
display:none;
position:absolute;
border:#39C dotted 1px;
padding:5px;
z-index:1000;
background-color:#FFF;
}
-->
</style>
</head>
<body>
<img src="http://farm4.static.flickr.com/3654/3542438912_ab3574000d_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2057/3541631049_c476237602_o.jpg">
<img src="http://farm3.static.flickr.com/2444/3534307174_109197447f_o.jpg" border="0"
rel="http://farm3.static.flickr.com/2088/3533489073_d4578942bc_o.jpg">
<img src="http://farm4.static.flickr.com/3611/3490943356_a2965e0bec_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3596/3490943572_3d775cc2c9_o.jpg">
<img src="http://farm4.static.flickr.com/3656/3473128741_fe7e73978d_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3391/3473128765_9c844ff2a2_o.jpg">
<img src="http://farm4.static.flickr.com/3360/3512761921_b98cbd2324_o.jpg" border="0"
rel="http://farm4.static.flickr.com/3549/3512761925_e27810cbd2_o.jpg">
<div id="big-img"></div>
</body>
</html>
分享到：
相关推荐
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
描述中的“兼容性好支持图片轮播切换”指出该插件对多种浏览器和设备有良好的支持，这包括但不限于Chrome、Firefox、Safari、Edge以及移动设备上的浏览器。对于图片轮播切换功能，这通常涉及到触屏滑动事件的支持，...
本篇文章将深入探讨如何使用jQuery创建一个简单的四张图片轮播滚动切换效果。 首先，我们需要理解轮播的基本原理。图片轮播通常是通过定时改变显示的图片来实现的，同时提供手动切换选项，如左右箭头或导航点。在这...
"最好看的jquery 图片轮播图片切换特效"这个主题聚焦于如何利用jQuery库来创建引人入胜、视觉效果出色的图片轮播效果。 jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在创建...
本文将深入探讨“jquery图片轮播图多图切换效果（带小图左右箭头）”这一主题，包括其核心技术和实现方式。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。在创建图片...
**jQuery 广告图片轮播**是一种常见的网页交互效果，用于在有限的空间内展示多张图片，提升用户体验，尤其适用于网站的首页或者产品展示区。jQuery 提供的强大选择器和动画功能使得实现这一效果变得相对容易。在这个...
在网页设计中，首页图片轮播切换是一种常见的视觉呈现方式，用于吸引用户的注意力并展示重要信息。这种效果可以使网站看起来更生动、更具交互性。本文将深入探讨如何实现这一功能，涉及JavaScript（js）和CSS（层叠...
在“JQUERY幻灯片图片轮播带进度条幻灯片图片切换”这个主题中，我们将深入探讨如何使用jQuery实现一个具有图片轮播功能的组件，同时带有进度条来展示当前轮播的状态。 首先，我们需要理解jQuery的基本用法。jQuery...
在网页设计和开发中，图片轮播是一种常见的交互元素，用于展示一组图片或内容，而“图片轮播素材 左右按钮切换 图片叠加”这一主题涵盖了几个关键知识点，包括图片轮播的设计、左右按钮的交互功能以及图片叠加效果。...
JavaScript图片轮播是一种常见的网页动态效果，用于展示一组图片或内容，通过自动切换或用户交互来实现连续播放。VCD包装盒个性幻灯片实例源码是一个基于JavaScript实现的图片轮播组件，它可能包含自定义样式和交互...
标题提到的"Winform全屏屏保图片轮播"是指使用C# Winform技术实现的一个全屏屏幕保护程序，它能展示一系列图片并自动进行轮播。这个屏保程序在功能上类似于Windows系统自带的屏保，但它没有复杂的过渡效果，如向左...
**标题解析：** "轮播图片切换_JS图片轮播_" 这个标题表明我们要讨论的是一个使用JavaScript（JS）实现的图片轮播效果。在网页设计中，轮播图是一种常见的展示多张图片或内容的方式，它允许用户通过自动或手动切换在...
在JavaScript的世界里，图片轮播和切换效果是网页动态展示中常见的功能，广泛应用于网站的首页、产品展示或画廊等场景。这个“js图片轮播、切换效果3”应该是一个实现图片自动循环播放和手动切换的代码示例。下面...
"点击按钮图片轮播切换"是一个自定义实现的图片轮播示例，旨在提供一种灵活的方式，让用户能够根据实际需求进行修改和定制。 在实现这种功能时，我们通常会涉及以下几个关键知识点： 1. **JavaScript**：作为主要...
一个可以在Unity进行图片轮播的demo，只需要给一个texture 2d的图片数组就可以直接用，有多种切换特效
"jquery幻灯片图片轮播带进度条幻灯片图片切换"是jQuery实现的一种常见功能，通常用于网站的首页或者产品展示区，能够吸引用户的注意力并提供良好的用户体验。下面我们将深入探讨这一主题。 首先，jQuery幻灯片图片...
5. **动画效果**：图片轮播的切换效果可以是淡入淡出、滑动等，这涉及到图形操作和动画的实现。你可以使用Graphics的DrawImage方法配合Alpha通道来实现透明度变化的过渡效果。 6. **事件处理**：控件需要响应用户的...
图片轮播是一种常见的网页元素，用于展示一组图片并自动或手动切换。在Java中，这可以通过创建一个图片数组或者集合来实现，然后利用JavaScript或者JSP内置的脚本语言（如JSTL）来控制图片的切换逻辑。 【压缩包子...
在这个主题中，“jQuery 带标题的焦点图片轮播切换代码”涉及到如何利用 jQuery 实现一个具有标题功能的图片轮播效果。 首先，我们需要理解基本的 HTML 结构，这通常包括一个容器元素来承载轮播，每个图片和对应的...
在网页设计中，图片轮播是一种常见的展示方式，它能够以动态的形式展示多张图片，增强用户体验。jQuery作为一款轻量级的JavaScript库，提供了丰富的API和插件，使得实现自适应图片轮播变得简单易行。本篇将详细介绍...