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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
解决bootstrap模态框数据缓存的问题方法
Aug 10 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 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
php5 and xml示例
2006/11/22 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python写的ARP攻击代码实例
2014/06/04 Python
python matplotlib画图实例代码分享
2017/12/27 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python字典排序的方法
2019/10/12 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
中医专业应届生求职信
2013/11/17 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
情人节单身感言
2015/08/03 职场文书
用Python实现Newton插值法
2021/04/17 Python