网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页制作
>
js教程
> >
js图片放大效果怎么做|js图片放大效果
js图片放大效果怎么做|js图片放大效果
发布时间:2017-04-29
【www.gdgbn.com--js教程】
提示:您可以先修改部分代码再运行
建设中
<script type="text/javascript"> var xm = 0; var ym = 0; sP = { cx : 0, cy : 0, N : 0, R : [], I : [], C : [], L : [], Id : 0, init : function () { /* ==== init script ==== */ this.scr = document.getElementById("screen"); this.pan = document.getElementById("pan"); this.div = this.pan.getElementsByTagName("div"); this.scr.onselectstart = function () { return false; } this.scr.ondrag = function () { return false; } /* ==== for each pane ==== */ for (var i = 0, o; o = this.div[i]; i++) { if (o.className == "frame") { /* ==== create legend ==== */ o.l = document.createElement("div"); o.l.className = "legend"; o.appendChild(o.l); /* ==== create flap ==== */ o.r = document.createElement("div"); o.r.className = "slider"; o.appendChild(o.r); o.r.x = 0; o.r.l = o.l; o.r.p = 0; o.r.s = 2; o.r.m = false; o.img = o.r.img = o.getElementsByTagName("img")[0]; o.r.c = Math.random() * 100; o.r.o = o; sP.R[sP.N] = o.r; sP.I[sP.N] = o.img.src; sP.L[sP.N] = o.title; o.title = ""; sP.N++; /* ==== flap mouse over event ==== */ o.r.onmouseover = function () { if (!this.m && this.img.complete) { /* ==== switch image ==== */ if (sP.O != this && !this.n) { this.x = this.o.offsetWidth; this.l.innerHTML = sP.L[sP.Id]; this.img.src = sP.I[sP.Id]; this.resize(); this.n = true; if(++sP.Id >= sP.N) { sP.Id = 0; for (var i = 0, o; o = sP.R[i]; i++) o.n = false; } } /* ==== up++ ==== */ if (sP.O) { sP.O.s = 2; sP.C.push(sP.O); } this.m = true; sP.O = this; sP.Or = this; } } /* ==== resize image ==== */ o.r.resize = function () { var i = new Image(); i.src = this.img.src; this.img.style.width = (i.width < this.offsetWidth) ? Math.round(this.offsetWidth * 1.25) + "px" : Math.round(i.width) + "px"; this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + "px" : Math.round(i.height) + "px"; this.w = (this.img.offsetWidth - this.offsetWidth) * .5; this.h = (this.img.offsetHeight - this.offsetHeight) * .5; this.img.style.visibility = "visible"; } } } /* ==== start script ==== */ sP.resize(); sP.run(); }, resize : function () { /* ==== window resize ==== */ var o = sP.scr; sP.nw = o.offsetWidth; sP.nh = o.offsetHeight; sP.iw = sP.pan.offsetWidth; sP.ih = sP.pan.offsetHeight; for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent) { sP.nx += o.offsetLeft; sP.ny += o.offsetTop; } for (var i = 0, o; o = sP.R[i]; i++) o.resize(); }, /* ==== main loop ==== */ run : function () { /* ==== scroll main frame ==== */ sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1; sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1; sP.pan.style.left = Math.round(sP.cx) + "px"; sP.pan.style.top = Math.round(sP.cy) + "px"; /* ==== lissajou ==== */ if(sP.O) { sP.O.c += .015; sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + "px"; sP.O.img.style.top = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + "px"; sP.O.l.style.left = Math.round(sP.O.x--) + "px"; } /* ==== up ==== */ if (sP.Or) { sP.Or.p -= sP.Or.s; sP.Or.s *= 1.1; if (sP.Or.p < -sP.Or.offsetHeight) { sP.Or.p = -sP.Or.offsetHeight; sP.Or.s = 2; sP.Or.m = false; sP.Or = false; } sP.O.style.top = Math.round(sP.O.p) + "px"; } /* ==== down ==== */ for (var i = 0, c; c = sP.C[i]; i++) { if (c != sP.Or) { c.p += c.s; c.s *= 1.2; if (c.p >= 0) { c.p = 0; c.s = 2; c.m = false; sP.C.splice(i, 1); } c.style.top = Math.round(c.p) + "px"; } else { c.s = 2; c.m = false; sP.C.splice(i, 1); } } setTimeout(sP.run, 16); } } /* ==== global mouse position ==== */ document.onmousemove = function(e) { if (window.event) e = window.event; xm = e.clientX; ym = e.clientY; return false; } </script>
<script type="text/javascript"> /* ==== start script ==== */ sP.init(); onresize = sP.resize; </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyezhizuo/16926/
上一篇:
js换行符|js换肤效果
下一篇:
js操作dom节点_js+dom增加删除表格行代码
相关推荐
apache tomcat_apache 服务器网站不能访问
json|js 控制execel表格
[phpstudy]php dir 函数教程
ps怎么处理模糊照片_ps把模糊照片处理清析制作教程
判断用户是否注册表|判断用户是否注册
【phpstudy】php __get(),__set()函数来实现对属性的访问
[站长工具]站长常用javascript脚本代码
【phpstudy】PHP 文件处理
ps二寸照片制作教程_ps照片美白的制作教程
asp判断用户是否存在|asp判断用户是否登陆
网友关注
[js漂亮导航效果图]js漂亮导航效果代码
【侠盗猎车手鼠标不能转】随鼠标转动的小眼睛
【simplexml_load_string】SimpleXML在 PHP 5
超级成熟性感动漫美女图片_超级成熟性感动漫美女图
sql server|sql 判断且增加字段ADD
[鼠标移动显示行放大效果图]鼠标移动显示行放大效果
js换行符|js换肤效果
phpstudy|PHP 对象使用
性质美女的胸|18岁大胸美女图性感b图片
ps怎么做gif?|ps做非主流怀旧艺术照片
热门标签
最新js教程
js教程
js遍历对象_js中查找对象代码
js教程
javascript学习指南_java 自动装箱拆箱实现方法
js教程
eclipse连接mysql数据库_java连接db2数据代码
js教程
flash player|flash js Fusioncharts 参数详解与参考
js教程
json_js ajax XMLHttpRequest与jq $.ajax
js教程
【js利用cookie】js利用cookies与正则设置字体高亮显示
js教程
asp.net core_asp.net DataGridTree 下拉树 实现方法
js教程
[jsp注册页面代码]JSP页面编码问题分析
js教程
[hibernate和mybatis的区别]Hibernate 中get()和load()与Hibernate简介
js教程
判断textarea中是否有回车符|判断textarea中是否有回车符方法
js教程热门文章
js教程
js操作dom节点_js+dom增加删除表格行代码
js教程
[网页病毒通过什么传播]网页病毒清除办法
js教程
奥迪as3_AS3与JS交互
js教程
[json]js 点击切换图片的效果
js教程
[js下拉菜单代码]js下拉菜单 代码
js教程
js图片切换效果代码_js图片切换效果
js教程
[json]js 控制图片滚动效果
js教程
js特效大全_js特效:文字上下无间断滚动
js教程
[js特效大全]js特效:左右无间断滚动
js教程
json_js 客户端数据排序
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有