黑马day18 鼠标事件&图片变大
有时候我们在淘宝网或者京东商城上浏览要购买的商品的时候当把鼠标移动到图图片上的时候会发现图片放大。然后鼠标移动，图片也会跟着移动，接下来我就使用jquery来实现这样的效果：
这是图片文件夹：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
} /* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var x=10,y=10;
var myHref;
$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候
myHref=this.href;//获取大图片
var $div=$("<div id='tooltip'><img src='"+myHref+"'></img></div>");//创建一个div
$("body").append($div);//把div加入到body中
$("#tooltip").css({
top:e.pageY+y+"px",
left:e.pageX+x+"px"
}).show("slow");
}).mouseout(function(e){//鼠标移开的时候
$("#tooltip").remove();
}).mousemove(function(e){//鼠标移动的时候
$("#tooltip").css({
top:e.pageY+y+"px",
left:e.pageX+x+"px"
}).show("slow");
})
});
</script> </head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
效果：
黑马day18 鼠标事件&图片变大的更多相关文章
- WPF 鼠标移动到图片变大，移开还原，单击触发事件效果
<Grid> <Canvas x:Name="LayoutRoot"> <Image Cursor=" ...
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...
- 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码
css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...
- CSS3动画@keyframes图片变大变小颜色变化
在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...
- 鼠标悬浮在img上让图片变大
样式: <style type="text/css"> img:hover{ transform:scale(1.02,1.02)}</style& ...
- android 双击图片变大，缩放功能
package com.example.administrator.myapplicationphotochange; /** * Created by Administrator on 2016/8 ...
- .net 加水印 图片变大很多 解决方法
/// 给图片加水印 中国红木网 /// </summary> /// <param name="originalImg"> ...
随机推荐
- 隐马尔可夫模型HMM与维特比Veterbi算法（二）
隐马尔可夫模型HMM与维特比Veterbi算法(二) 主要内容: 前向算法(Forward Algorithm) 穷举搜索( Exhaustive search for solution) 使用递归降 ...
- Windows 抓取本地环路包
1.cmd,ipconfig查看自己的ip地址. 2.执行命令:route add 10.36.65.89 mask 255.255.255.255 10.36.65.1 metric 1,其中10. ...
- Java 吸血鬼数字
非常羞愧(事实上没什么羞愧.水平就这样).搞了半晌才写出来了一个Java 版求四位吸血鬼数字的方法 吸血鬼数字是指位数为偶数的数字.能够由一对数字相乘而得到.而这对数字各包括乘积的一半位数的数字,当中 ...
- 多mysql实例下开发需要注意主从同步延迟
今天晚上服务器上线测试,遇到了一个问题! 往数据库写了一条数据之后,再读取该记录,居然读不出来,报空指针.十分费解,喊来开发组长定位问题.他的解释是:写操作用的是主库,而读操作用的是从库.在写库写完之 ...
- VC操作MPP文件
1.背景简介 因需要对Office系列进行程序操作,特需要使用COM编程. Microsoft Project生成进度计划,office家族软件,文件后缀为.mpp. 具体信息见维基百科http:// ...
- UITextView自适应高度
- (float) heightForTextView: (UITextView *)textView WithText: (NSString *) strText{ float fPadding = ...
- java面试第六天
集合:保存多个其他对象的对象,不能保存简单类型 List:有序(存放元素的顺序),可重复的集合 ArrayList:实质就是一个会自动增长的数组 查询效率比较高,增删的效率比较低,适用于查询比较频繁, ...
- reset.css 和 flexible.js
重置css默认样式(淘宝): body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, f ...
- 解决Win10系统backgroundTaskHost占用cpu大
打开照片应用后,点击左下角“设置”按钮,如下图
- java8 map flatmap
map: 对于Stream中包含的元素使用给定的转换函数进行转换操作,新生成的Stream只包含转换生成的元素.这个方法有三个对于原始类型的变种方法,分别是:mapToInt,mapToLong和ma ...