网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页制作
>
js教程
> >
js实现的翻页效果代码|js实现的翻页效果
js实现的翻页效果代码|js实现的翻页效果
发布时间:2016-05-30
【www.gdgbn.com--js教程】
提示:您可以先修改部分代码再运行
<script type="text/javascript" language="javascript"> var div=null; var line=null; var qap=0; var timerid=0; var w,h,s; var step=5; var pages,boxs,box,boxframe,box3,page3; var page=0; function config() { pages=document.getElementsByName("page"); boxs=document.getElementsByName("box"); box=document.getElementById("box0"); boxframe=document.getElementById("boxframe"); boxframe.style.borderWidth=0; w=parseInt(box.currentStyle.width)/2; h=parseInt(box.currentStyle.height); s=Math.sqrt(w*w+h*h); for(var i=0;i<4;i++){ boxs[i].style.width=s; boxs[i].style.height=s; pages[i].style.width=w-2; pages[i].style.height=h-2; boxs[i].style.top=s-h+1; if(i>0){ boxs[i].style.left=w; boxs[i].style.zIndex=i; }else{ boxs[i].style.left=1; boxs[i].style.zIndex=i; } } pages[0].style.backgroundImage="url("http://afei.name/1.jpg")"; pages[1].style.backgroundImage="url("http://afei.name/2.jpg")"; pages[2].style.backgroundImage="url("http://afei.name/3.jpg")"; pages[3].style.backgroundImage="url("http://afei.name/4.jpg")"; box.style.borderWidth=0; box.style.height=s; boxframe.style.zIndex=0; boxframe.style.left=0; boxframe.style.top=s-h; boxframe.style.width=w*2; boxframe.style.height=h; box3=boxs[2]; page3=pages[2]; box3.style.zIndex=5; qap=0; w=w-2; h=h-2; changeqa(); box.style.visibility="visible"; boxframe.style.visibility="visible"; } function fanye() { qap=0; step=3; if(timerid>0) window.clearInterval(timerid); if(page>0){ } timerid=window.setInterval(changeqa,1); page++; } function changeqa() { if(qap>90){ qap=90; window.clearInterval(timerid); } var qa=Math.PI*qap/180; var mcs=Math.cos(qa); var mss=Math.sin(qa); with(box3.filters.item(0)){ M11=mcs; M12=mss; M21=-mss; M22=mcs; } box3.style.top=h-s*mss-s*mcs+(s-h)-1; box3.style.left=-s*mss+w+1; with(boxs[3].filters.item(0)){ M11=mcs; M12=mss; M21=-mss; M22=mcs; } boxs[3].style.top=h-s*mss+(s-h)-1; page3.style.left=0; page3.style.top=s-w*mss; with(pages[3].filters.item(0)){ M11=mcs; M12=-mss; M21=mss; M22=mcs; } var weitiao=0; if(qap==5||(qap>=15&&qap<25)||qap==40||qap==45||qap==50||qap==65||qap==60){ weitiao=1; }else if(qap==35||qap==25||qap==70){ weitiao=2; }else if(qap==80){ weitiao=4; } pages[3].style.top=-h*mcs+weitiao; qa=Math.PI*180/180+qa; mcs=Math.cos(qa); mss=Math.sin(qa); with(page3.filters.item(0)){ M11=mcs; M12=mss; M21=-mss; M22=mcs; } qap+=step; if(step<3) step+=1; } window.attachEvent("onload",config); </script>
page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容page1这是第一页内容 page2第二页page2第二页page2第二页page2第二页page2第二页page2第二页page2第二页 page3阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们 page4阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们阿飞们
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyezhizuo/11590/
上一篇:
json|js 弹出登录窗口
下一篇:
图片编辑器手机版下载_163编辑器下载
相关推荐
非页面缓冲池_简单的页面缓冲技术
用户口令是什么_用户口令检查(/etc/passwd)
邮件群发php|PHP邮件专题
php高级面试题及答案_PHP高级技巧全放送
php中文乱码问题及解决方案_PHP中文乱码问题及解决方法
ubb代码怎么用_ubb代码共亨
【python字符替换】非法字符替换程序
为盼_为PHP4加入动态Flash文件的生成的支持
全员加速中|加速你的页面--数据压缩
【如何部署php】如何使用PHP和PEAR进行不同时区的转换
网友关注
mysql 事务|我的MySQL事务处理
【使用phpmyadmin】使用PHPLIB进行Session的管理和认证
json|js 弹出登录窗口
[php命令行参数]php命令行参数详解及应用PHP学习网
【php随机生成数字】如何用PHP生成WAP页面
【用php实现xml备份mysql数据库中】用PHP实现XML备份MySQL数据库
建网站需要多少钱_建网站:搜索引擎的实现
php中使用xmlhttprequest_PHP中使用XML-RPC构造WebService简单入门
[什么就是一个服务器端的处理程序]PHP程序与服务器端通讯方法小结
利用php代码实现的|利用PHP代码实现网页自动判断转向
热门标签
最新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教程
图片编辑器手机版下载_163编辑器下载
js教程
【简单的jsp页面】简单的JS多重继承示例
js教程
js密码强度|js密码强度检测
js教程
用js加上ajax写一个 天气预报|用js 文件导入方式放GG广告
js教程
【html网页排版】HTML网页中如何向swf传递参数
js教程
在html网页中使用js获取当前时间|在HTML网页中使用js获取参数。
js教程
【自动复制功能失效】自动复制功能
js教程
js转换成html代码|js转换成html代码
js教程
html网页排版|HTML网页中如何向swf传递参数
js教程
[如何调用flash player]如何调用Flash才符合Web网页标准
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有