javascript基础练习-大图跟随鼠标移动展示
2018-02-01 20:55
423 查看
效果图如下:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ text-align: center; } div img{ width: 200px; height: 200px; margin-right: 20px; cursor: pointer; } .bigBox{ width: 400px; height: 400px; position: absolute; display: none; } .bigBox img{ width: 100%; height: 100%; } </style> <script type="text/javascript"> window.onload=function(){ function get(){ if(arguments.length==1){ return document.getElementById(arguments[0]); }else{ return arguments[0].getElementsByTagName(arguments[1]); } } var box=get(document,"div")[0], imgs=get(box,"img"), bigBox=get("bigBox"), i=0; for(i=0;i<imgs.length;i++){ //鼠标移到相应的图片触发 imgs[i].onmouseover=function(){ var big=document.createElement("img"); var big=new Image(); big.src=this.src; bigBox.appendChild(big); bigBox.style.display="block"; this.style.opacity="0.6"; }; //鼠标移动,改变坐标,这里大图的坐标相比鼠标的坐标要偏移20像素,如果大图坐标直接与鼠标坐标相等,很容易重复触发onmouseover事件,从而不断的添加big节点 imgs[i].onmousemove=function(event){ var event=event || window.event; marginRight=box.offsetWidth-event.clientX-20; //当大图到达浏览器窗口右边界时改为左侧显示 bigBox.style.left=bigBox.offsetWidth>marginRight?event.clientX-20-bigBox.offsetWidth+"px":event.clientX+20+"px"; bigBox.style.top=event.clientY+20+"px"; }; //鼠标移出,清除大图节点 imgs[i].onmouseout=function(){ 4000 bigBox.style.display="none"; bigBox.removeChild(bigBox.lastChild); this.style.opacity=""; }; } }; </script> </head> <body> <div> <img src="../images/1.jpg"> <img src="../images/2.jpg"> <img src="../images/3.jpg"> <img src="../images/4.jpg"> </div> <div class="bigBox" id="bigBox"></div> </body> </html>
相关文章推荐
- javascript 实例:跟随鼠标移动(大图展示)
- 跟随鼠标移动浮动显示大图展示的特效
- Ferris教程学习笔记:js示例5.6 跟随鼠标移动(大图展示)
- 阻止右键菜单(阻止默认事件)&&跟随鼠标移动(大图展示)&&自定义右键菜单
- js 鼠标放置图片展示大图并跟随鼠标移动
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- JS 事件基础 跟随鼠标移动
- javascript DIV跟随鼠标移动
- [JavaScript]跟随鼠标移动的DIV
- 基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
- javascript跟随鼠标x,y坐标移动的字效果
- Javascript_ex_文字跟随鼠标移动
- javascript文字跟随鼠标移动简易实现方法
- 跟随鼠标移动展示内容
- Web小练习-JavaScript事件的简单练习,监听鼠标的移动
- Javascript 鼠标移动上去 滑块跟随效果
- Javascript特效实现鼠标移动到小图,查看大图效果;
- javascript DIV跟随鼠标移动
- javascript实现图片跟随鼠标移动效果的方法
- Javascript 鼠标移动上去小三角形滑块缓慢跟随效果