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 ...
随机推荐
- HDU-1047(DP-二进制状态压缩)
Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he has a lot of h ...
- 基于Hadoop集群的HBase集群的配置
一 Hadoop集群部署 hadoop配置 二 Zookeeper集群部署 zookeeper配置 三 Hbase集群部署 1.配置hbase-env.sh HBASE_MANAGES_ZK:用来 ...
- Xcode Build Setting Reference
https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/XcodeBuildSettingRef/ ...
- WinXP 无线提示“区域中找不到无线网络”的一种可能原因!
貌似WinXP还是无限经典,我也一直还在用,不知道哪天才会放弃.这次遇见的问题,或许也有XP爱好者也遇得见,记下点文字备忘.----------------------- 单调的切割线 ------- ...
- 华为OJ:2041 放苹果
这道题难点不在于代码怎么写,而是思路怎么想. 感觉一般这样的题要么你理好一个思路要么你最后总结出一个公式,要么你自己模拟它的运作方式,用迭代,或者递归的方式来做. 有点像我们曾经学的排列组合. 对于m ...
- [小技巧] Python 脚本暴力破解 HC2600 机顶盒管理密码
家里最近接入了广电有线电视,配了三个创维 HC2600 机顶盒,并且每个机顶盒还带有无线路由器功能. 免费赠送 Internet 接入服务倒也没什么,不过机顶盒内置的 WIFI 实在有点寒酸:只支持 ...
- Linux字符设备中的两个重要结构体(file、inode)
对于Linux系统中,一般字符设备和驱动之间的函数调用关系如下图所示 上图描述了用户空间应用程序通过系统调用来调用程序的过程.一般而言在驱动程序的设计中,会关系 struct file 和 struc ...
- (原创)初识cordova(一)
在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...
- Http协议学习小结
1.Http基本概述: HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信规则,通 ...
- JAVA--聊天界面面板
package windows.beautify; import java.awt.BorderLayout; import java.awt.Color; import java.awt.event ...