文中图片地址已经失效，但代码功能都存在，大家注意替换下 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>实例索引</title> <style type="text/css"> body{margin:0px;padding:0px;font-size:12px;font-family:Verdana, "微软雅黑";background:#2d3033;} img{border:0;} a{outline:none;} #box{width:918px;height:745px;margin:20px auto;border:5px solid #4b5258;background:#fff;padding:1px;position:relative;} #box .kuang{width:918px;height:745px;float:left; background:#eaeaea;position:relative;} #box .kuang ul{margin:0px;padding:0px;float:left;list-style-type:none;} #box .kuang li{width:130px;height:120px;display:inline;margin:28px 0 0 28px;background:#f3f3f3;float:left;padding:10px 10px 0 10px;overflow:hidden;filter:alpha(opacity=100);opacity:1;} #box .kuang li span{display:block;height:90px;} #box .kuang li h3{display:block;height:30px;line-height:30px;text-align:left;text-indent:3px;margin:0px;padding:0px;font-style:normal;} #box .kuang li h3 a{font-size:12px;font-weight:normal;color:#333;text-decoration:none;} #box .kuang li h3 a:hover{text-decoration:underline;} #box .kuang .menu{width:918px;height:76px;background:url(https://www./script/images/menu_bg.png) no-repeat center;display:inline;margin-top:28px;text-align:center; position:absolute;bottom:0px;left:0px;} #box .kuang .menu a{width:52px;height:52px;display:inline-block;background:url(https://www./script/images/menu_bg_but.png) no-repeat;margin-top:12px; color:#9c9c9c;font-size:20px;text-decoration:none;text-align:center;line-height:50px;} #box .kuang .menu a:hover{background:url(https://www./script/images/menu_bg_but.png) no-repeat -57px 0;} #box .kuang .menu a.hover{background:url(https://www./script/images/menu_bg_but.png) no-repeat -114px 0;color:#fff;} #box .l_t{width:14px;height:14px;position:absolute;background:url(https://www./script/images/l_t.jpg) no-repeat;top:-5px;left:-5px;z-index:10;} #box .r_t{width:14px;height:14px;position:absolute;background:url(https://www./script/images/r_t.jpg) no-repeat;top:-5px;right:-5px;z-index:10;} #box .l_b{width:14px;height:14px;position:absolute;background:url(https://www./script/images/l_b.jpg) no-repeat;bottom:-5px;left:-5px;z-index:10;} #box .r_b{width:14px;height:14px;position:absolute;background:url(https://www./script/images/r_b.jpg) no-repeat;bottom:-5px;right:-5px;z-index:10;} #bg{width:100%;height:100%;position:absolute;background:#000;top:0px;left:0px;filter:alpha(opacity=0);opacity:0;z-index:100;display:none;} #img_kuang{width:610px;height:20px;position:absolute;z-index:101;overflow:hidden;top:50%;left:50%;margin:0 0 0 -305px;display:none;} #img_kuang .box{width:610px;height:500px;position:absolute;background:#000;top:0;left:0;filter:alpha(opacity=50);opacity:0.5;} #img_kuang .box_1{width:588px;height:478px;position:absolute;background:#f2f2f2;top:10px;left:10px;border:1px solid #fff;} #img_kuang .box_1 h2{width:300px;height:34px;float:left;margin:0px;padding:0px;font-size:14px;line-height:34px; text-indent:15px;color:#1e2123;} #img_kuang .box_1 div em{width:100px;height:34px;line-height:34px;float:right;font-style:normal;text-align:right;color:#999999;font-size:12px;padding-right:18px;font-weight:normal;} #img_kuang .box_1 div em a{color:#999999;text-decoration:none;} #img_kuang .box_1 div em a:hover{text-decoration:underline;} #img_kuang .box_1 p{width:588px;height:412px;display:inline-block;margin:0px;padding:0px;background:url(https://www./script/images/img_bg.jpg) no-repeat center center;text-align:center;} #img_kuang .box_1 p img{display:inline;margin:6px 0 0 0;} #img_kuang .box_1 span{width:570px;height:32px;display:inline-block;font-size:12px;line-height:34px;padding-right:18px;text-align:right;} #img_kuang .box_1 span a{color:#006699;text-decoration:underline;} </style> <script type="text/javascript"> window.onload = function(){ var oBox = document.getElementById('box'); var oMenu = getClass(oBox, 'menu')[0]; var aMenu_a = oMenu.getElementsByTagName('a'); var aLi = oBox.getElementsByTagName('li'); var aA = oBox.getElementsByTagName('a'); var i = aList = 0; var len = aMenu_a.length; var li_len = aLi.length; var zIndex = li_len-1; var timer = null; var oSwitch = true; var oPlace = []; var aTit = [ {title:'功能筛选',url:'https://www./script/Filter/',img:'https://www./script/images/01.jpg'}, {title:'手风琴效果(海贼王)',url:'https://www./script/accordion/',img:'https://www./script/images/02.jpg'}, {title:'海贼王通缉令',url:'https://www./script/hzw/',img:'https://www./script/images/03.jpg'}, {title:'孔明社区图片切换效果',url:'https://www./script/kmsq/',img:'https://www./script/images/04.jpg'}, {title:'绝对固定位置回到顶部按钮',url:'https://www./js/positionFixed',img:'https://www./script/images/05.jpg'}, {title:'模拟表单控件',url:'https://www./js/ten/05.html',img:'https://www./script/images/06.jpg'}, {title:'拼图小游戏',url:'https://www./js/ten/04.html',img:'https://www./script/images/07.jpg'}, {title:'苹果导航栏',url:'https://www./js/ten/03.html',img:'https://www./script/images/08.jpg'}, {title:'模仿QQ登录窗口',url:'https://www./js/ten/02.html',img:'https://www./script/images/09.jpg'}, {title:'窗口拖拽（Cookie保存拖拽位置）',url:'https://www./js/ten/01.html',img:'https://www./script/images/10.jpg'}, {title:'仿土豆滚动条',url:'https://www./js/nine/04.html',img:'https://www./script/images/11.jpg'}, {title:'照片墙',url:'https://www./js/nine/03.html',img:'https://www./script/images/12.jpg'}, {title:'DIV弹出拖拽层',url:'https://www./js/nine/02.html',img:'https://www./script/images/13.jpg'}, {title:'图片预加载播放器',url:'https://www./js/nine/01.html',img:'https://www./script/images/14.jpg'}, {title:'手风琴焦点图',url:'https://www./js/eight/07.html',img:'https://www./script/images/15.jpg'}, {title:'仿土豆底部菜单效果',url:'https://www./js/eight/06.html',img:'https://www./script/images/16.jpg'}, {title:'仿腾讯微博效果',url:'https://www./js/eight/05.html',img:'https://www./script/images/17.jpg'}, {title:'淘宝幻灯片2',url:'https://www./js/eight/04.html',img:'https://www./script/images/18.jpg'}, {title:'图片淡入淡出',url:'https://www./js/eight/03.html',img:'https://www./script/images/19.jpg'}, {title:'多级右键菜单',url:'https://www./js/eight/02.html',img:'https://www./script/images/20.jpg'}, {title:'图片大小缩放',url:'https://www./js/eight/01.html',img:'https://www./script/images/21.jpg'}, {title:'缓冲运动回到顶部按钮',url:'https://www./js/seven/06.html',img:'https://www./script/images/05.jpg'}, {title:'淘宝图片幻灯片',url:'https://www./js/seven/04.html',img:'https://www./script/images/22.jpg'}, {title:'倒计时时钟',url:'https://www./js/three/09.html',img:'https://www./script/images/23.jpg'}, {title:'淡入淡出焦点图',url:'https://www./js/four/03.html',img:'https://www./script/images/24.jpg'}, {title:'焦点图',url:'https://www./js/four/02.html',img:'https://www./script/images/24.jpg'}, {title:'简易选项卡',url:'https://www./js/two/07.html',img:'https://www./script/images/25.jpg'}, {title:'评分系统',url:'https://www./script/01.html',img:'https://www./script/images/26.jpg'}, {title:'淘宝焦点图效果(面向对象)',url:'https://www./js/slide',img:'https://www./script/images/32.jpg'}, {title:'弹出层效果(面向对象)',url:'https://www./js/alert',img:'https://www./script/images/31.jpg'}, {title:'延时加载(面向对象)',url:'https://www./js/delayLoad',img:'https://www./script/images/30.jpg'}, {title:'图片连续滚动(面向对象)',url:'https://www./js/marqueeImg',img:'https://www./script/images/29.jpg'}, {title:'放大镜(面向对象)',url:'https://www./js/magnifier',img:'https://www./script/images/28.jpg'}, {title:'淡入淡出焦点图(面向对象)',url:'https://www./js/four/03-3.html',img:'https://www./script/images/24.jpg'}, {title:'焦点图(面向对象)',url:'https://www./js/four/02-2.html',img:'https://www./script/images/24.jpg'}, {title:'选项卡(面向对象)',url:'https://www./js/two/tab.html',img:'https://www./script/images/27.jpg'}, {title:'评分系统(面向对象)',url:'https://www./script/02.html',img:'https://www./script/images/26.jpg'} ]; function list(){ for(i=0;i<li_len;i++){ var oTit_img = aLi[i].getElementsByTagName('img')[0]; var oTit_a = aLi[i].getElementsByTagName('a')[1]; if(aList=0)startMove(aLi[diNow],{opacity:100,top:oPlace[diNow].top,left:oPlace[diNow].left}); diNow--; if(iNow==li_len-1){ oSwitch=true; clearInterval(timer); for(i=0;i<li_len;i++){ aLi[i].onclick = function(){ img(this) }; } } },1100); } },100); } cli++; } }; } }; //img function img(obj){ var oBg = document.getElementById('bg'); var oImg_kuang = document.getElementById('img_kuang'); var oImg_img = oImg_kuang.getElementsByTagName('img')[0]; var oImg_H2 = oImg_kuang.getElementsByTagName('h2')[0]; var oImg_span = oImg_kuang.getElementsByTagName('span')[0].getElementsByTagName('a')[0]; var oImg = obj.getElementsByTagName('img')[0].src; var oH3 = obj.getElementsByTagName('h3')[0].getElementsByTagName('a')[0]; oImg_img.src = oImg.replace('https://www./script/images/','https://www./script/images/big/'); oImg_H2.innerHTML = oH3.innerHTML; oImg_span.href = oH3.href; oBg.style.display = 'block'; oBg.style.height = document.documentElement.scrollHeight+'px'; setTimeout(function(){ startMove(oBg,{opacity:70},function(){ oImg_kuang.style.display = 'block'; startMove(oImg_kuang,{height:500,marginTop:document.documentElement.scrollTop-250},function(){ var oClose = document.getElementById('close'); oClose.onclick = function(){ startMove(oImg_kuang,{height:0,marginTop:0},function(){ oImg_kuang.style.display = 'none'; startMove(oBg,{opacity:0},function(){ oBg.style.display = 'none'; }); }); }; }); }); },1000); } //运动框架 function startMove(obj, json, fnEnd){ if(obj.timer)clearInterval(obj.timer); obj.timer = setInterval(function (){ doMove(obj, json, fnEnd); }, 30); } function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr]; } function doMove(obj, json, fnEnd){ var iCur = 0; var attr = ''; var bStop = true; for(attr in json){ attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj, 'opacity'))*100) : iCur = parseInt(getStyle(obj, attr)); if(isNaN(iCur))iCur = 0; if(navigator.userAgent.indexOf("Firefox") > 0){ var iSpeed = (json[attr]-iCur) / 6; }else{ var iSpeed = (json[attr]-iCur) / 4; } iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(parseInt(json[attr])!=iCur)bStop = false; if(attr=='opacity'){ obj.style.filter = "alpha(opacity:"+(iCur+iSpeed)+")"; obj.style.opacity = (iCur + iSpeed) / 100; }else{ attr == 'zIndex' ? obj.style[attr] = iCur + iSpeed : obj.style[attr] = iCur + iSpeed +'px'; } } if(bStop){ clearInterval(obj.timer); obj.timer = null; if(fnEnd)fnEnd(); } } //class函数 function getClass(oParent, sClass){ var aElem = oParent.getElementsByTagName('*'); var aClass = []; var i = 0; for(i=0;i <script type="text/javascript" src="/public/static/common/js/ey_global.js?v=v1.7.1"></script> </head> <body> <h2>222</h2><em>× 关闭</em> <p></p> <span>>>点击浏览</span> <em class="l_t"></em> <em class="r_t"></em> <em class="l_b"></em> <em class="r_b"></em> <ul> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> <li> <span></span> <h3></h3> </li> </ul> 1 2 <script type="text/javascript">var root_dir="";var ey_aid=498756;</script> <script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关栏目： 【 科技资讯 】 【 运营推广 】 【 技术教程 】 【 SEO优化 】 【 AI营销 】 【 运维开发 】 【 软件编程 】
相关推荐： Python logging自定义字段输出及打印颜色 使用PyCharm官方中文语言包汉化PyCharm java 多线程实现在线咨询(udp) spring boot拦截器注入不了java bean的原因 Django URL参数Template反向解析 Nginx配置SSL证书出错解决方案 python爬虫 requests-html的使用 mybatis 连接mysql数据库 tinyint 为boolean类型详解 通过pipeline配置sonar自动化实现过程解析 c# 如何实现图片压缩 golang使用 gomodule 在公共测试环境管理go的依赖的实例详解 详解c# 协变和逆变 celery在python爬虫中定时操作实例讲解 在Vue中使用CSS3实现内容无缝滚动的示例代码 python制作一个简单的gui 数据库查询界面 Spring MVC创建项目踩过的bug Docker 修改docker存储位置 修改容器镜像大小限制操作 使用MinGW使Windows通过gcc实现C或C++程序本地编译执行的方法 如何利用Python写个坦克大战 利用spring-data-redis实现incr自增的操作 大白话讲解C# 中的委托 Python爬虫如何破解JS加密的Cookie C#实现窗体抖动的两种方法 JavaScript构造函数原理及实现流程解析 python爬虫中采集中遇到的问题整理 用webAPI实现图片放大镜效果 JavaScript实现网页tab栏效果制作 Mybatis 动态sql if 判读条件等于一个数字的案例 php如何实现数据库的备份和恢复 Loongnix安装PyCharm Community 2025.2.3的教程详解 Java的idea连接mongodb数据库的详细教程 基于Python采集爬取微信公众号历史数据 SpringBoot项目中遇到的BUG问题及解决方法 非常全面的Java异常处理(全文干货，值得收藏) 解决python3中os.popen()出错的问题 微信小程序实现日历小功能 Docker容器上用DockerFile部署多个tomcat服务的步骤 Docker可视化ui管理工具Portainer安装及使用解析 mybatis 逆向生成后遵循java驼峰法则的解决 如何使用 Flask 做一个评论系统 Docker 配置阿里云容器服务操作 SpringBoot整合Mybatis注解开发的实现代码 Android studio配置国内镜像源的实现 VSCode中画UML图的方法实现 微信小程序实现列表左右滑动 巧妙mybatis避免Where 空条件的尴尬 python 实用工具状态机transitions Docker 容器监控原理及 cAdvisor的安装与使用说明 python爬虫中url管理器去重操作实例 详解 MySQL的FreeList机制
上一篇：js实现的|美女|瀑布流效果代码
下一篇：命令行模式下备份、还原 MySQL 数据库的语句小结
服务热线
截屏，微信识别二维码
打开微信
