超酷带纹理网页滚动条效果
2024-07-04 05:06:17
<!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>
<title>超酷带纹理网页滚动条效果</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">html {overflow: hidden;}body {margin: 0px;padding: 0px;background: #222;position: absolute;width: 100%;height: 100%;pointer: default;}#screen {position: absolute;left: 20%;height: 40%;top: 10%;width: 60%;overflow: auto;background: #000;color: #fff;}#screen2 {position: absolute;left: 20%;height: 30%;width: 60%;top: 60%;overflow: auto;background: #111;color: #fff;}.content {position:relative;font-size: 0.8em;font-family: verdana;color: #fff;padding: 1em;height: 100%;}a {text-decoration: none;color:#ff8000;}a:hover {text-decoration: none;background:#ff8000;color:#ffffff;}a:visited {text-decoration: none;color:#ff8000;}a:visited:hover {text-decoration: none;background:#ff8000;color:#ffffff;}.cds_scrollbar {position: absolute;background: #555 url(http://www.lanrentuku.com/down/js/images/12476505130.gif);right: 0px;cursor: pointer;}.cds_scrollbar_over {background: #aaa url(http://www.lanrentuku.com/down/js/images/12476497481.gif);}.cds_scrollbar_pushed {background: #fff url(http://www.lanrentuku.com/down/js/images/12476497480.gif);}.cds_track {position: absolute;background: #222 url(http://www.lanrentuku.com/down/js/images/12476497482.gif);right: -1px;top: 0px;height: 100%;cursor: pointer;}.cds_up {position: absolute;background: #f60 url(http://www.lanrentuku.com/down/js/images/12476497483.gif);right: 0px;top: 0px;cursor: pointer;}.cds_down {position: absolute;background: #f60 url(http://www.lanrentuku.com/down/js/images/12476497483.gif);right: 0px;bottom: 0px;cursor: pointer;}
</style><script type="text/javascript">var cds = {O : [],ok : false,ym : 0,N : 0,fo : 0,sc : 0,sp : 0,to : 0,/* on mouse move */m_move : function(e) {if (!e) e = window.event;/* release drag outside of the window - IE only */if (cds.fo.sg && !cds.w3c && !e.button) { cds.m_up(); return; }/* vertical mouse position */cds.ym = e.screenY;/* drag scrollbar */if (cds.fo.sg) cds.fo.scrollTop = cds.fo.sZ + (cds.ym - cds.fo.yZ) / cds.fo.r;},/* on mouse up */m_up : function (e) {if (!e) e = window.event;var tg = (e.target) ? e.target : e.srcElement;/* clear and skin scrollbar */if (cds.fo) cds.fo.sb.className = (tg.className.indexOf('scrollbar') > 0) ? 'cds_scrollbar cds_scrollbar_over' : 'cds_scrollbar';document.onselectstart = '';cds.clr();cds.fo.sg = false;},/* clear */clr : function () {clearTimeout(cds.to);cds.sc = 0;return false;},/* refresh all scrollbars */refresh : function () {for (var i = 0, N = cds.N; i < N; i++) {var o = cds.O[i];o.v_scroll();o.sb.style.width = o.st.style.width = o.su.style.width = o.su.style.height = o.sd.style.width = o.sd.style.height = o.w + 'px';o.sb.style.height = Math.ceil(Math.max(o.w * .5, o.r * o.offsetHeight) + 1) + 'px';}},/* arrows scrolling loop */a_scroll : function () {if (cds.sc != 0) {cds.fo.scrollTop += 6 * cds.sc / cds.fo.r;cds.to = setTimeout(cds.a_scroll, cds.sp);cds.sp = 32;}},/* start arrows scrolling */m_down : function (o, s) {if (cds.sc == 0) {o.dv.sb.className = 'cds_scrollbar cds_scrollbar_pushed';cds.fo = o.dv;cds.sc = s;cds.sp = 400;cds.a_scroll();}},/* init script */init : function () {if (window.oper || (!window.addEventListener && !window.attachEvent)) { this.ok = false; return; }/* add events */function addEvent (o, e, f) {if (window.addEventListener) { o.addEventListener(e, f, false); cds.w3c = true; return true; }if (window.attachEvent) return o.attachEvent('on' + e, f);return false;}this.ok = addEvent(window.document, 'mousemove', cds.m_move);this.ok = addEvent(window.document, 'mouseup', cds.m_up);this.ok = addEvent(window, 'resize', cds.refresh);return this.ok;},/* add skinable scrollbar */add : function (id) {/* get div */var dv = document.getElementById(id);/* init script */if (!cds.ok) cds.init();/* return on error */if (!cds.ok || !dv) return false;/* append div function */function cDiv (c) {var o = document.createElement('div');o.dv = dv;o.className = c;dc.appendChild(o);return o;}/* clone the original div to create an empty container */var dc = dv.cloneNode(false);dc.style.overflow = "hidden";/* insert the container into the div's parent */dv.parentNode.appendChild(dc);/* move the original div into the container */dc.appendChild(dv);/* modify its positionning to fit into the container */dv.style.position = 'absolute';dv.style.left = dv.style.top = '0px';dv.style.width = dv.style.height = '100%';/* push div reference in array */cds.O[cds.N++] = dv;dv.sg = false;/* create and append skinned scrollbar HTML elements to the container, on top of the original div */dv.st = cDiv('cds_track');dv.sb = cDiv('cds_scrollbar');dv.su = cDiv('cds_up');dv.sd = cDiv('cds_down');/* scrollbar on mouse down */dv.sb.onmousedown = function (e) {if (!this.dv.sg) {if (!e) e = window.event;/* save active/scrollable div */cds.fo = this.dv;/* save vertical mouse and scroll position */this.dv.yZ = e.screenY;this.dv.sZ = dv.scrollTop;this.dv.sg = true;/* pushed skin */this.className = 'cds_scrollbar cds_scrollbar_pushed';document.onselectstart = function () { return false; }}return false;}/* track on mouse down */dv.st.onmousedown = function (e) {if (!e) e = window.event;/* save active/scrollable div */cds.fo = this.dv;/* calculate scrollbar position */cds.ym = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;for (var o = this.dv, y = 0; o != null; o = o.offsetParent) y += o.offsetTop;this.dv.scrollTop = (cds.ym - y - (this.dv.r * this.dv.offsetHeight / 2) - this.dv.w) / this.dv.r;this.dv.sb.onmousedown(e);}/* arrows on mouse down */dv.su.onmousedown = dv.su.ondblclick = function (e) { cds.m_down(this, -1); return false; }dv.sd.onmousedown = dv.sd.ondblclick = function (e) { cds.m_down(this, 1); return false; }/* release events */dv.su.onmouseout = dv.su.onmouseup = cds.clr;dv.sd.onmouseout = dv.sd.onmouseup = cds.clr;/* scrollbar on mouse over skin */dv.sb.onmouseover = function (e) {if (!this.dv.sg) this.className = 'cds_scrollbar cds_scrollbar_over';return false;}/* scrollbar on mouse out (default) skin */dv.sb.onmouseout = function (e) {if (!this.dv.sg) this.className = 'cds_scrollbar';return false;}/* scrollbar repositionning */dv.v_scroll = function () {this.r = (this.offsetHeight - 2 * this.w) / this.scrollHeight;this.sb.style.top = Math.floor(this.w + this.scrollTop * this.r) + 'px';}/* calculate scrollbar width */dv.w = dv.offsetWidth - dv.clientWidth + 1;/* init scroll */dv.v_scroll();cds.refresh();/* hook on scroll browser's event */dv.onscroll = dv.v_scroll;return dv;}
}onload = function() {/* init scrollbars */cds.add('screen');cds.add('screen2');
}</script>
</head>
<body><div id="screen">
<div class="content">
<h2>Skinned HTML Scrollbar</h2>Well, usually I don't comment my work, but this one being a "pure technical demo", and as I had to place some content here, I will make an exception.<br><br>
Once upon the time I stumbled upon the great
<a href="http://www.hesido.com/web.php?page=customscrollbar" target="_blank">fleXcroll: Cross Browser Custom ScrollBar script</a> by Hesido.
<br><br>I was very curious to see how this was done and even possible, but looking at the JS code, I couldn't understand a bit of it. Sort of disappointed, I decided to "reinvent the [mouse] wheel" and see what I could do myself.
<br><br>
As always, it was just a "pushing the envelope" kind of exercice, and it might or might not work for you. Please don抰 use this in your production sites as it could divide by zero and blow up destroying the world.
<br><br>My expectations:
<ul><li>Minimal and plain old JS code<li>No CSS hack, no "bugs compliant" features, minimum browsers work-arounds<li>No JS mousewheel and keyboard event: just hook to the native OS scrolling mechanism (that's the trick, the actual scrollbars are still there, the script is just painting on top of them)<li>Skinned scrollbars 100% CSS positionned, by the browser itself and not by my JS code - no lag on resize (that's the second trick)<li>Zero CPU cycle used when idle - no setInterval loop
</ul>
<br>
Findings :
<ul><li>Avoid reading cascaded style sheet from JS (that's a mess)<li>Avoid dealing with <a href="http://erik.eae.net/archives/2007/07/27/18.54.15/" target="_blank">computed vs. cascaded</a> browsers inconsistencies (that's another mess)<li>Firefox is unable to know whether the left mouse button is pressed or not<li>SAFARI will handle JS events outside of its window (and that's great!)
</ul>
<br>
Known issues:
<ul><li>Will manage vertical scrollbars only<li>Won't work in Opera (onmouseup event won't fire, drawings/refresh artifacts)<li>Firefox won't release the left mouse button outside of the browser windows
</ul>
<br>
Developped using Firefox 2.0 + Firebug 1.0. Tests successfully passed on SAFARI win 3.0, Firefox 3 (latest alpha), IE6 and IE7.
<br><br>
That's all folks,
<br><br>
happy dhteumeuleuing :)
<br><br>
GF Nov 2007
<br><br>
<p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p>
<br><br>
</div>
</div></body>
</html>超酷带纹理网页滚动条效果相关推荐
- 超酷2012伦敦奥运会多次曝光效果摄影作品集
为什么80%的码农都做不了架构师?>>> 日期:2012-8-15 来源:GBin1.com 伦敦奥运会刚刚结束, 这里我们收集了一套超酷的多次曝光摄影效果图片,希望带给大家 ...
- 分享Css3设计---纯Css实现超酷的iphone玻璃气泡效果
最近做手机项目时候,需要实现一个类似iphone SMS效果的气泡效果. 这里分享下实现心得, 首先分析下iphone的气泡效果有一下特点 1. 圆角 2. 向下的外阴影 3. 上边和下边的内阴影 4 ...
- 8个超酷炫仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- 8个超酷炫的仿苹果应用的HTML5动画
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
- unity创建纹理_创建带纹理的文本的技术
unity创建纹理 View demo 查看演示 Download Source 下载源 In this article we're going to explore several techniqu ...
- PS如何做超酷墨迹飞溅人物海报特效
首先这是一个用PS动作制作出来的效果,喜欢者可以继续往下看,我们先下载街头立体墨迹手绘画人物效果PS动作,具体搜一下这个动作即可找到,然后我们用这个动作就可以制作出如下图的一些效果图: 01.载入街头 ...
- CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
- 带后台管理的超酷jquery+ajax幻灯相册php源码,仿门户网图片频道的jQuery幻灯相册轮播代码...
推荐 jquery画廊特效 支持缩略图预览和全屏展示及图片描述 这是款基于jquery的画廊相册特效,功能较全面,可支持缩略小图预览,幻灯图片全屏展示,可显示多种规格的图片,包括全屏显示高清大图,以及 ...
- 带后台管理的超酷jquery+ajax幻灯相册php源码,带后台管理的超酷jQuery+ajax幻灯相册PHP源码...
推荐 类似于相片画廊效果超炫的jQuery相册特效 Slider Gallery with jQuery是一款基于CSS3和jQuery的JS相册代码,效果类似于平轴滑动式的相册画廊,支持点击放大图片 ...
最新文章
- python numpy np.full(shape, fill_value, dtype=None, order='C')函数 以指定数值填充指定形状的数组
- 问题 B: 十进制到二进制的转换
- 运用Zabbix实现内网服务器状态及局域网状况监控（2） —— 环境配置
- masscan安装、研究、测试之旅、扫描结果处理
- 使用SQL Server 2005作业设置定时任务
- UnrealVS扩展
- Excel表格输入身份证数字就变了 Excel函数公式大全 Excel表格制作
- 反垄断重锤字节跳动，投资业务原地熄火 腾讯阿里争做“普通公司”
- inkscape裁剪
- windows内网的情况下如何访问外网
- TextView实现水平滚动
- 【Linux基础】Ubuntu 20.04系统安装（完整版）
- 2022-08-03 Flume
- 大数据 别让技术蛊惑
- IMAU 软件项目管理 期末复习总结 第七章
- 交通标志的检测与识别
- 关于计组整机实验的补充说明
- JFreeChart 生成 蜘蛛网/刻度 雷达图
- 2020年第三届中科实数杯 Android模拟器分析部分 wp
- 详解PhpSpreadsheet设置单元格