设为首页
|
加入收藏
您好,欢迎来到点滴吧!
手机版
www.diandiba.com
记录点点滴滴,尽在点滴吧
文章
文章
特效
素材
景点
首页
手机
建站
源码
服务器
生活
常识
健康
美食
美容
旅游
景点
攻略
游记
特产
知识
笑话
名句
散文
故事
编程
ASP
PHP
.NET
SQL
软件
Office
QQ
Photoshop
特效
幻灯片
图片相册
播放器
素材
图片
PSD素材
网页模板
您现在的位置:
首页
>
鼠标特效
> 特效详情
鼠标悬停显示大图并跟随鼠标移动
更新时间:2015/7/1 11:30:58 下载:6633次
<!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> <title>鼠标悬停显示大图并跟随鼠标移动-点滴吧-www.diandiba.com</</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> html,body{overflow:hidden;} body,div,ul,li{margin:0;padding:0;} #box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;} #box li{float:left;width:170px;height:170px;cursor:pointer;display:inline;border:1px solid #ddd;margin:0 10px;} #box li.active{border:1px solid #a10000;} #box li img{width:170px;height:170px;vertical-align:top;} #big{position:absolute;width:400px;height:400px;border:2px solid #ddd;display:none;} #big div{position:absolute;top:0;left:0;width:400px;height:400px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(http://www.diandiba.com/Upload/20150701113232386.gif) 50% 50% no-repeat;} </style> <script type="text/javascript"> window.onload = function () { var aLi = document.getElementsByTagName("li"); var oBig = document.getElementById("big"); var oLoading = oBig.getElementsByTagName("div")[0]; var i = 0; for (i = 0; i < aLi.length; i++) { aLi[i].index = i; //鼠标划过,预加载图片插入容器并显示 aLi[i].onmouseover = function () { var oImg = document.createElement("img"); //图片预加载 var img = new Image(); img.src = oImg.src = aLi[this.index].getElementsByTagName("img")[0].src.replace(".jpg","_big.jpg"); //插入大图片 oBig.appendChild(oImg); //鼠标移过样式 this.className = "active"; //显示big oBig.style.display = oLoading.style.display = "block"; //判断大图是否加载成功 img.complete ? oLoading.style.display = "none" : (oImg.onload = function() {oLoading.style.display = "none";}) }; //鼠标移动,大图容器跟随鼠标移动 aLi[i].onmousemove = function (event) { var event = event || window.event; var iWidth = document.documentElement.offsetWidth - event.clientX; //设置big的top值 oBig.style.top = event.clientY + 20 + "px"; //设置big的left值,如果右侧显示区域不够,大图将在鼠标左侧显示 oBig.style.left = (iWidth < oBig.offsetWidth + 10 ? event.clientX - oBig.offsetWidth - 10 : event.clientX + 10) + "px"; }; //鼠标离开,删除大图并隐藏大图容器 aLi[i].onmouseout = function () { this.className = ""; oBig.style.display = "none"; //移除大图片 oBig.removeChild(oBig.lastChild) } } }; </script> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="box"> <ul> <li><img src="http://www.diandiba.com/Upload/20150701113256413.jpg"></li> <li><img src="http://www.diandiba.com/Upload/20150701113313757.jpg"></li> <li><img src="http://www.diandiba.com/Upload/20150701113324145.jpg"></li> <li><img src="http://www.diandiba.com/Upload/20150701113334359.jpg"></li> </ul> </div> <div id="big"><div></div></div> </body> </html>
预览效果
复制代码
保存代码
提示:可以先修改部分代码后再运行
鼠标悬停显示大图并跟随鼠标移动
上一个素材:
没有了
下一个素材:
鼠标跟随文字代码
相关特效
鼠标悬停显示大图并跟随鼠
jQuery鼠标悬停显示文字效
鼠标滚轮控制页面滚动(山
禁止右键
导航分类
热门文章
1
鼠标悬停显示大图并跟随鼠标移
2
jQuery鼠标悬停显示文字效果代
3
鼠标跟随文字代码
4
鼠标滚轮控制页面滚动(山寨苹
5
禁止右键
关于我们
|
联系我们
|
免责声明
|
网站地图
|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2