jquery鼠标滑过展示图片时显示详情
jquery:
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ //页面边加载边执行
$('.box').hover(
function(){
$(this).find('img').animate({width:100, height:100,marginTop:10,marginLeft:10},600); },
function(){
$(this).find('img').animate({width:600, height:330,marginTop:0,marginLeft:0},180);
});
});
</script>
<body>
<div class="main">
<div class="box">
<img src="img/0.jpg"/>
<div class="info">
<h1>div+css及js结合的布局</h1>
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。所以要求学好HTML、CSS、JAVASCRIPT 。
</div>
</div>
</div>
jquery鼠标滑过展示图片时显示详情的更多相关文章
- jQuery实现的鼠标滑过切换图片代码实例
jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
- CSS控制当鼠标滑过时更换图片的效果
鼠标滑过时更换图片的效果有很多方法可以实现,在本文将为大家介绍喜爱如何通过css来实现.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- jquery鼠标滑过提示title具体实现代码
jquery鼠标滑过提示title的实现代码. 如下: <script type="text/javascript" src="http://ajax.google ...
- jQuery鼠标滑过横向时间轴效果
jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...
- 通过使用CSS字体阴影效果解决hover图片时显示文字看不清的问题
1.前言 最近需要加入一个小功能,在鼠标越过图片时,提示其大小和分辨率,而不想用增加属性title来提醒,不够好看.然而发现如果文字是一种颜色,然后总有概率碰到那张图上浮一层的文字会看不到,所以加入文 ...
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- 鼠标滑过元素,div显示,并根据scrollTop向下移动
如上图所示,通道有很多个,表格只有一个. 注意:滑过通道时鼠标如果停留在上面,那么表格才显示,鼠标滑过表格时,表格不消失 <div id="lineContent"> ...
- web页面上展示图片时,图片不显示,报错:ERR_CONTENT_LENGTH_MISMATCH
问题描述 前端页面加载css,和js文件的时候,经常出现ERR_CONTENT_LENGTH_MISMATCH的报错情况. 查找问题 在单独打开hearder中css,js的网络地址是能打开的 ...
- C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)
一.效果与思路 效果: 解决方案1 用chart的mousemove时间,实时跟踪鼠标最近的X轴的位置,然后把cursorX设置到那个位置上,让用户知道我是选的那一个X的值,同时用tooltip显示该 ...
随机推荐
- css控制父元素下的子元素自适应高度,且高度一致
css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:le ...
- UVA 10410 Tree Reconstruction
题意: 给定一个树的BFS和DFS,求这棵树. 分析: 拿dfs的序列,分成若干段,每一段相当一个子树,这样就可以利用bfs的序列去将dfs的序列分段,然后利用一个队列去存放每一段,不断求出子树即可. ...
- 第五章SignalR的实时高频通讯
第五章SignalR的实时高频通讯 概述:本例子演示了如果创建一个对象与其他浏览器共享实时状态的应用程序.我们要创建的应用程序为“MoveShape”,该MoveShape页面会显示一个Html Di ...
- Silverlight学习(五)图形标绘
Silverlight中进行图形标绘的方法太多了,这里的标绘和Arcgis中的标绘不同,这里大多是静态的标绘.标绘的方法主要有Path(路径标记法).直接标绘(Line等).几何标记(LineGeom ...
- hdu1251统计难题
Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己 ...
- mysql 查看mysql版本的四种方法
1 命令行中使用status可以查看. mysql> status;--------------mysql Ver 14.14 Distrib 5.5.25a, for Linux (x86_ ...
- ecshop给虚拟商品添加出售和未出售的导出xlc
在admin/virtral_card.php文件中找到$_REQUEST['act'] == 'card'这里是用来显示某一个虚拟商品的出售记录的列表将会发送到replenish_list.htm在 ...
- centos6.7配置git服务器
1.yum install -y git 2.adduser git 3.cd /data/git 没有则创建该目录 git init --bare test.git;创建一个裸仓库,没有工作区,不需 ...
- python运维开发(六)----模块续
内容目录 反射 模块 os模块 sys模块 md5加密模块 re正则匹配模块 configparse模块 xml模块 shutil模块 subprocess模块 反射 利用字符串的形式去对象(模块)中 ...
- Oracle EBS-SQL (INV-2):检查帐户别名发放记录.sql
SELECT FU.description 操作者, ITM.SEGMENT1 物料编码, ITM.DESC ...