jquery实现鼠标滑过后动态图片提示效果实例


Posted in Javascript onAugust 10, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
js事件触发操作实例分析
Jun 21 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 #Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 #Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
js中的内部属性与delete操作符介绍
Aug 10 #Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
javascript中对变量类型的判断方法
Aug 09 #Javascript
You might like
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python中退出多层循环的方法
2018/11/27 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python with语句用法原理详解
2020/07/03 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
工程管理专业个人求职信范文
2013/12/07 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
应届生自荐书
2014/06/23 职场文书
公司合作协议范文
2014/10/01 职场文书
测量员岗位职责
2015/02/14 职场文书