滚动居中效果(frame版)
<!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>
.main{height:12000px; width:30px; background: orange; margin-left:90%;}
.main a{ padding:10px;}
</style>
</head> <body>
<div class="main"> <?php
$map = array(0=>'O',1=>'A', 2=>'B', 3=>'C', 4=>'D', 5=>'E'); for($i=0;$i<501;$i++)
{
$b = $i;
$style = '';
if($i%100 == 0)
{
$style = 'style="background:#F00; margin-left:30px;"';
$c = $i/100;
$b = $map[$c];
} echo '<a id="target_'.$b.'" '.$style.' href="javascript:void(0);" onclick="centerWindow(\'http://www.baidu.com\', 400, 400)">'.$b.'</a>';
echo "<br/>";
} ?>
</div> </body>
<script>
function centerWindow(url, width, height)
{
/* height Number 设置窗体的高度,不能小于100
left Number 说明创建窗体的左坐标,不能为负值
location Boolean 窗体是否显示地址栏,默认值为no
resizable Boolean 窗体是否允许通过拖动边线调整大小,默认值为no
scrollbars Boolean 窗体中内部超出窗口可视范围时是否允许拖动,默认值为no
toolbar Boolean 窗体是否显示工具栏,默认值为no
top Number 说明创建窗体的上坐标,不能为负值
status Boolean 窗体是否显示状态栏,默认值为no
width Number 创建窗体的宽度,不能小于100 */ alert(screen.width);
alert(screen.height);
var left = (screen.width-width)/2;
var top = (screen.height-height)/2;
window.open(url, 'song',"width="+width+",height="+height+",left="+left+",top="+top+",scrollbars=yes"); } </script>
</html>
效果图:
滚动居中效果(frame版)的更多相关文章
- 移动页面div居中效果代码
在线查看效果:http://hovertree.com/texiao/mobile/4.htm 可用手机浏览器查看 以下为HTML文件: <!DOCTYPE html> <html& ...
- ScrollMagic – 酷毙了!超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...
- ScrollMe – 在网页中加入各种滚动动画效果
ScrollMe 是一款 jQuery 插件,用于给网页添加简单的滚动效果.当你向下滚动页面的时候,ScrollMe 可以缩放,旋转和平移页面上的元素.它易于设置,不需要任何自定义的 JavaScri ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- 实例源码--Android图片滚动切换效果
下载源码 技术要点: 1.图片滚动切换技术 2.详细的源码注释 ...... 详细介绍: 1.图片滚动切换技术 本套源码实现了类似于网站图片滚动推广效果,效果不错,很不错的参考源码 2.源码目录 运 ...
- 仿360手机卫士界面效果android版源码
仿360手机卫士界面效果android版,这个今天一大早在源码天堂的那个网站上看到了一个那个网站最新更新的一个源码,所以就分享给大学习一下吧,布局还挺不错的,而且也很简单的,我就不把我修改的那个分享出 ...
- 滚动视差效果——background-attachment
滚动视差效果的实现原理是在同一个页面上将页面元素分为多层,例如可以分为背景.内容.贴图层,在滚动页面的时候让三者滚动的速度不一,从而在人的视觉上能够形成一种立体的近似效果.最近在做一个项目wiki的时 ...
- WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放、图片立体轮播、图片倒影立体滚动)效果实现
原文:WPF技术触屏上的应用系列(四): 3D效果图片播放器(图片立体轮放.图片立体轮播.图片倒影立体滚动)效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- -webkit-overflow-scrolling 与滚动回弹效果.
参考来源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways ...
随机推荐
- bzoj 1779
较水的网络流. /************************************************************** Problem: 1779 User: idy002 L ...
- 获得sql server的table的表结构 -- 转到word中
SQL语句: select syscolumns.name,systypes.name,syscolumns.length from syscolumns join sysobjects on sy ...
- B+树索引
结构上 B树中关键字集合分布在整棵树中,叶节点中不包含任何关键字信息,而B+树关键字集合分布在叶子结点中,非叶节点只是叶子结点中关键字的索引: B树中任何一个关键字只出现在一个结点中,而B+树中的关键 ...
- js数组的使用
1.创建: var arr=Array(); 2.遍历: for(var arg in arr){ alert(arr[arg]); } 3.追加 arr1.concat(arr2) 4.元素删除 d ...
- Eclipse NDK 配置,不用安装Cygwin
一.关于NDK:NDK全称:Native Development Kit.1.NDK是一系列工具的集合.NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java应用 ...
- Visual Studio 2013 新增web项目IIS Express的64位版
使用Visual Studio 2012开发SharePoint的应该都遇到过下面的错误“SharePoint 在32位进程中不受支持”,而怎么修改目标平台都不好使,因为VS 2012所配备的IIS ...
- sqlserver锁大全
锁定提示 描述 HOLDLOCK 将共享锁保留到事务完成,而不是在相应的表.行或数据页不再需要时就立即释放锁.HOLDL ...
- 错误 1 error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead. To disable deprecation, use . See online help for details.
出现这种警告的原因是因为我们没有使用安全的字符串处理函数.如果想屏蔽这种警告,可以使用: 还可以使用其它的方法,参考: https://www.cnblogs.com/gb2013/archive/2 ...
- C/C++下scanf的%匹配以及过滤字符串问题
最近在写一个测试的小程序,由于用到了sscanf函数对字符串进行标准读入,而sscanf在很多方面都与scanf比较相像,于是对scanf进行了一番测试,遇到了一系列基础性的问题,恶补基础的同时也体现 ...
- C#-MessageBox全部函数重载形式及举例
Form1.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...