JS实现 鼠标放上去 图片自动放大的效果
前段时间做项目，要实现，一张图片，鼠标放上去图片自动变大的效果，虽然难度不大，但当时也想了一段时间，当时没时间记录一下，现在有时间了，写篇博客把代码给记录一下；
效果如下：
代码如下：
<!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>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}
</style>
</head>
<body>
<div id="demo"> <img src="pic.png"> </div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var images = demo.getElementsByTagName("img");
var large_image = document.getElementById("enlarge_images");
for(i=0; i<images.length; i++)
{
var temp = images[i];
temp.onmousemove = function(event)
{
event = event || window.event;
large_image.style.display = "block";
large_image.innerHTML = '<img src="' + this.src + '" />';
large_image.style.top = document.body.scrollTop + event.clientY + 10 + "px";
large_image.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
temp.onmouseout = function()
{
large_image.innerHTML = "";
large_image.style.display = "none";
}
temp.onclick = function()
{
window.open( this.src);
}
}
</script>
</body>
</html>
注：
a）两个div，一个用于显示小图片，另一个用于显示大图片；
b）JS，当鼠标移动到上面时，设置第二个div的显示内容及显示位置；
c）需注意的是，large_image的display在none和block之间转化，是为了鼠标，多次放到图片上时的情况；
JS实现 鼠标放上去 图片自动放大的效果的更多相关文章
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- 鼠标放上去图片慢慢变大js 或 变大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- JS实现鼠标移上去图片停止滚动移开恢复滚动效果
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目. 首先,要做的是一个需要滚动的区域.我前边写过一个关于图片循环滚动的示例, ...
- CSS实现鼠标移入时图片的放大效果以及缓慢过渡
transform:scale()可以实现按比例放大或者缩小功能. transition可以设置动画执行的时间,实现缓慢或者快速的执行动画,效果图如下: 源码: <!DOCTYPE html&g ...
- jq实现鼠标移动到 图片上放大，移开图片缩小效果（打算封装成插件）
先看代码 <script> $(function() { $('div').mouseover(function() { $('img').animate({ opacity: '0.9' ...
- js中网页图片自动更换的效果
<script> var arr=new Array(); arr[]="url(images/city.jpg)"; arr[]="url(images/d ...
- 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...
随机推荐
- flume-agent实例
flume 多种适配,多样化的数据收集 核心概念 event:一条消息 client:访问者 agent: 重要组件Sour ...
- [置顶] 【Git入门之十】Rebase操作
原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12309627 Rebase,衍合?变基?唉,我也不知道要怎么翻译合适...变 ...
- hdu 4746 Mophues
莫比乌斯反演.先初始化出所有数有多少个质因子和mobius.然后处理mob_sum[ i ][ j ],表示当公因子的因子个数小于等于 j 个的mobius前 i 项和.然后分块求和即可. 分块处理部 ...
- animate.min.css 动画样式移动端存在的问题
使用animate.min.css可以使用很多动画效果,包括3D效果,现在也可以应用于HTML5手机移动端,使用切换效果的时候会导致页面出现卡顿现象,可以使用css3 transform 方法硬件加速 ...
- js的意义，引用方法及变量
一 JavaScript的意义. Javascript是浏览器端的脚本语言,它能够访问web页面的元素和运行它得浏览器,从而可以操作元素,创建新的元素等.它主要的作用有: 1.以指定尺寸.位置和样式( ...
- 你需要知道的九大排序算法【Python实现】之归并排序
四.归并排序 基本思想:归并(Merge)排序法是将两个(或两个以上)有序表合并成一个新的有序表,即把待排序序列分为若干个子序列,每个子序列是有序的.然后再把有序子序列合并为整体有序序列.归并过程:比 ...
- Codeforces Round #256 (Div. 2/B)/Codeforces448B_Suffix Structures(字符串处理)
解题报告 四种情况相应以下四组数据. 给两字符串,推断第一个字符串是怎么变到第二个字符串. automaton 去掉随意字符后成功转换 array 改变随意两字符后成功转换 再者是两个都有和两个都没有 ...
- 编译lua5.3.2报错提示libreadline.so存在未定义的引用解决方法
从官网上下载5.3.2的源码后,make linux进行编译,提示报错: gcc -std=gnu99 -o lua lua.o liblua.a -lm -Wl,-E -ldl -lreadline ...
- 关于控制文件和redo log损坏的恢复
前段时间一朋友自己电脑上的开发测试用的数据库出了点问题,电脑操作系统是Win8,直接在Win8上安装了Oracle11g,后来系统自动升级到Win8.1,Oracle相关的服务全都不见了,想想把数据文 ...
- UIViewController的生命周期(图解)
当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc 创建对象,分配空间2.init (initWithNibName ...