jquery实现鼠标滑过后动态图片提示效果实例
更新时间：2015年08月10日 10:19:39 作者：企鹅
这篇文章主要介绍了jquery实现鼠标滑过后动态图片提示效果,涉及jquery鼠标事件及页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现鼠标滑过后动态图片提示效果。分享给大家供大家参考。具体如下：
这里jquery实现的鼠标悬停图片提示效果，把鼠标放在图片上的时候，图片向右上角滑动并缩小，同时提示显示出来，类似幻灯片一样的效果，推荐给大家学习借鉴。
运行效果截图如下：
具体代码如下：
<!DOCTYPE html>
<head>
<title>jQuery图片动态信息显示幻灯效果</title>
<style>
.galleryContainer {width: 1024px;}
.galleryImage { background-color:black; width:325px; height:260px; overflow:hidden; margin:5px; float:left;}
.info { margin-left:10px; font-family:arial;padding:3px;}
.info h2 { color:gray;}
.info p { color:white}
.clear { clear:both; margin-top:10px;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.galleryImage').hover(
function(){
$(this).find('img').animate({width:100, marginTop:10, marginLeft:10}, 500);
},
function(){
$(this).find('img').animate({width:325, marginTop:0, marginLeft:0},300);
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="galleryContainer">
<!--galleryEntry-->
<div class="galleryImage">
<img src="//img.jbzj.com/file_images/article/201508/2015810102423303.jpg"></img>
<div class="info">
<h2>美国农场</h2>
<p>
美国农场的大自然美景.
</p>
</div>
</div>
<!--end galleryEntry-->
<!--galleryEntry-->
<div class="galleryImage">
<img src="//img.jbzj.com/file_images/article/201508/2015810102436957.jpg"></img>
<div class="info">
<h2>日落黄昏</h2>
<p>
美丽的日落，拍摄于2009年10月16日，印度尼西亚。
</p>
</div>
</div>
<!--end galleryEntry-->
<!--galleryEntry-->
<div class="galleryImage">
<img src="//img.jbzj.com/file_images/article/201508/2015810102445216.jpg"></img>
<div class="info">
<h2>欧洲乡野</h2>
<p>
沉浸在大自然的寂静里, Tennessee in 2006.
</p>
</div>
</div>
<!--end galleryEntry-->
</div>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
您可能感兴趣的文章:
- jQuery实现鼠标滑过图片移动特效
- jQuery实现鼠标滚动图片延迟加载效果附源码下载
- jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- jQuery实现的鼠标滑过弹出放大图片特效
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
- 基于jquery实现鼠标滚轮驱动的图片切换效果
- JQuery实现鼠标移动图片显示描述层的方法
- jQuery实现鼠标经过图片变亮其他变暗效果
- Jquery实现鼠标移动放大图片功能实例
- jQuery实现的感应鼠标悬停图片色彩渐显效果
- jQuery实现鼠标滑过预览图片大图效果的方法
相关文章
由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案2011-10-10
这篇文章主要介绍了简述Jquery与DOM对象的相关资料,十分的简单实用，需要的朋友可以参考下2015-07-07
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。今天这篇文章就与大家分享30个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果更佳）2012-03-03
虽然圆角页面很好看，但一直以来都不太好实现，一方面是没有CSS3，二是都得通过美工切图切出来角。但这些麻烦事即将过去，就是因为它：jQuery Corner的出现！2014-08-08
本文主要给大家讲述的是如何使用jquery+easeing实现仿flash的载入动画的方法，附上示例代码，非常细致全面，这里推荐给大家，希望对大家熟练使用jQuery有所帮助。2015-03-03
这篇文章主要总结了jQuery 常用操作方法及常用函数,需要的朋友可以参考下2014-06-06
关于jQuery的DOM操作面试问题其实有很多，下面这篇文章主要给大家介绍了jQuery常见面试题之DOM操作的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
这篇文章主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例，感兴趣的小伙伴们可以参考一下2016-03-03
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。2010-04-04
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
这篇文章主要介绍了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法,涉及jquery针对鼠标事件的响应及页面元素动态操作的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-02-02
最新评论