首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视 ┆淘宝手机在线充值 ┆淘宝游戏点卡充值 
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>javscript实现鼠标移到小图片上出现大图片的效果
javscript实现鼠标移到小图片上出现大图片的效果
来源: 发布时间:2008-11-07 发布人: 浏览: 人次   字体: [ ]  

在来提供一个非常棒的效果,本效果是用javscript实现鼠标移到图片上会出现这个图片的大图片效果,这次先看代码,后看效果了,图片太大了,呵呵!

先看代码:
<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>
<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">
 <img src="/upimg/userup/0811/0G1160239D.jpg">
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
 var ts = gg[i];
 ts.onmousemove = function(event){
  event = event || window.event;
  ei.style.display = "block";
  ei.innerHTML = '<img src="' + this.src + '" />';
  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";
  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
 }
 ts.onmouseout = function(){
  ei.innerHTML = "";
  ei.style.display = "none";
 }
 ts.onclick = function(){
  window.open( this.src );
 }
}
</script>

效果图:
 还不错吧,试试看看合不合您的胃口了!


相 关 文 章   发布商链接
·基于ExtJs框架实现高级查询界面的代...
·javascript如何检测多个文本框不为空...
·运行在浏览器地址栏中神奇的javascri...
·如何在javascript中使用哈希表的代码...
·一个带源码的JavaScript日期联动选择...
·Javascript利用正则表达式读取cookie...
·javascipt实现倒计时显示的功能一例
·实例讲解JS计算表格每行的和与总和代...
·JS验证密码的强度级别代码实例
·javascript实现按钮响应鼠标动作并发...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·JS验证密码的强度级别代码实...
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档
·javascript实现页面自动刷新...
·javascript解决iframe框架页...
·javascript实现网易邮箱多附...
·javascript实现模仿IE自动完...
·javacript实现关闭子窗口,刷...
·javascript脚本实现右键弹出...
·javascript结合Ajax制作的可...
·javascript实现页面载入等待...
·javascript实现一个IP只弹窗...
·javascript导航条比较实用的...
热 门 文 章
·Ext2.0框架的Grid使用介绍祥...
·JS实现多行的HTML静态表格分...
·javascript实现多张图片轮流...
·Adobe Reader利用javascript...
·实例讲解Ext Js生成动态树,...
·javascript使用xml数据岛的简...
·javascript实现页面跳转的五...
·javascript读写TEXT文本文件...
·幻灯片焦点图片新闻显示调用f...
·javascript实现页面载入等待...
·javascript实现页面自动刷新...
·Javascript在IE和FireFox中的...
·javascript实现动态多附件上...
·鼠标右下角显示层,javascrip...
·javascript脚本实现右键弹出...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .