怎样自定义的iframe滚动条？

Junny 2012-04-02 03:10:09
前言：由于项目需要、（客户要求）唉~，现需要在现有的Web里添加一个滚动条，区别与传统的Iframe框架。
具体：自定义滚动条中：鼠标点击部分（小图标 9*19 px）背景部分：自定义图片（图标在上面滑动 12*501 px），以前没有做过，也不知道具体如何实现，求解释~~
...全文
222 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Junny 2012-04-27
  • 打赏
  • 举报
 回复
呵呵 ok!
传递正能量 2012-04-02
  • 打赏
  • 举报
 回复
又找到一个效果
<!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="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

body,div,ul,li,p{margin:0;padding:0;}

body{background:#3e3e3e;font:14px/1.5 \5fae\8f6f\96c5\9ed1;}

#box{width:600px;margin:20px auto;}

.list{position:relative;width:600px;height:144px;margin-bottom:10px;overflow:hidden;border-radius:8px;}

.list ul{position:absolute;top:0;left:0;height:144px;}

.list li{display:inline;float:left;width:144px;height:144px;list-style:none;background:#000;margin-right:8px;border-radius:8px;}

.list li img{float:left;width:124px;height:100px;border-radius:5px;margin:10px 0 0 10px;}

.list li p{float:left;color:#fff;width:100%;text-align:center;line-height:34px;}

.scrollBar{position:relative;height:19px;background:#0a0a0a;overflow:hidden;}

.scrollBar .barL,.scrollBar .barR,.scrollBar .barLStop,.scrollBar .barRStop{position:absolute;top:0;width:28px;height:19px;cursor:pointer;background:url(http://www.zzsky.cn/effect/images/20117/301630/03.gif) no-repeat;}

.scrollBar .barL{left:0;}

.scrollBar .barR{right:0;background-position:right 0;}

.scrollBar .barLStop{left:0;background-position:0 -19px;cursor:default;}

.scrollBar .barRStop{right:0;background-position:right -19px;cursor:default;}

.scrollBar .barM{position:relative;height:15px;border:1px solid #545454;border-width:1px 0;margin:0 28px;padding:1px 0;z-index:1;cursor:pointer;}

.scrollBar .bar{position:absolute;top:1px;left:0;width:150px;height:15px;cursor:e-resize;background:url(http://www.zzsky.cn/effect/images/20117/301630/01.gif) repeat-x;}

.scrollBar .bar .l,.scrollBar .bar .r{position:absolute;top:0;width:6px;height:15px;background:url(http://www.zzsky.cn/effect/images/20117/301630/02.gif) no-repeat;}

.scrollBar .bar .l{left:-6px;}

.scrollBar .bar .r{right:-6px;background-position:right 0;}

#desc{color:#ccc;width:578px;padding:10px;margin:0 auto;line-height:2;border:1px dashed #666;}

#desc dd{margin-left:2em;}

.ta-r{text-align:right;}

</style>

<script type="text/javascript">

/*-------------------------- +

  获取id, class, tagName

 +-------------------------- */

var get = {

	byId: function(id) {

		return typeof id === "string" ? document.getElementById(id) : id

	},

	byClass: function(sClass, oParent) {

		var aClass = [];

		var reClass = new RegExp("(^| )" + sClass + "( |$)");

		var aElem = this.byTagName("*", oParent);

		for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);

		return aClass

	},

	byTagName: function(elem, obj) {

		return (obj || document).getElementsByTagName(elem)

	}

};

/*-------------------------- +

  获取最终样式

 +-------------------------- */

function getStyle(obj, attr)

{

	return parseFloat(obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr])	

}

window.onload = function ()

{

	var oBox = get.byId("box");

	var oScrollBar = get.byClass("scrollBar", oBox)[0];

	var oList = get.byClass("list", oBox)[0];

	var oUl = get.byTagName("ul", oBox)[0];

	var aLi = get.byTagName("li", oBox);

	var oBarL = get.byClass("barL", oScrollBar)[0];

	var oBarM = get.byClass("barM", oScrollBar)[0];

	var oBarR = get.byClass("barR", oScrollBar)[0];

	var oBar = get.byClass("bar", oBarM)[0];

	var maxL = oBarM.offsetWidth - oBar.offsetWidth;

	var iMarginRight = getStyle(aLi[0], "marginRight");

	var timer = null;

	var iScale = 0;

	var disX = 0;

	var i = 0;

	//图片列表容器动态设置宽度

	oUl.style.width = (aLi[0].offsetWidth + iMarginRight) * aLi.length + "px";

	//拖动流动条

	oBar.onmousedown = function (event)

	{

		var event = event || window.event;

		disX = event.clientX - oBar.offsetLeft;		

		document.onmousemove = function (event)

		{

			var event = event || window.event;

			var iL = event.clientX - disX;			

			iL <= 0 && (iL = 0);

			iL >= maxL && (iL = maxL);

			oBar.style.left = iL + "px";

			iScale = iL / maxL;

			startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale));

			isStop();

			return false

		};		

		document.onmouseup = function ()

		{

			document.onmousemove = null;

			document.onmouseup = null

		};

		return false

	};

	//阻止滚动条点击事件冒泡

	oBar.onclick = function (event)

	{

		(event || window.event).cancelBubble = true

	};

	//滚动条左右按钮鼠标移入及键盘左右键按下事件

	oBarL.onmouseover = oBarR.onmouseover = document.onkeydown = function (event)

	{

		clearInterval(timer);

		var event = event || window.event;

		var iSpeed = 0;

		if (this == oBarR || event.keyCode == 39)

		{

			iSpeed = 5

		}

		else if(this == oBarL || event.keyCode == 37)

		{

			iSpeed = -5

		}

		timer = setInterval(function ()

		{

			togetherMove(getStyle(oBar, "left") + iSpeed, 1)	

		}, 30)

	};

	//滚动条左右按钮鼠标移开及键盘左右键抬起事件

	oBarL.onmouseout = oBarR.onmouseout = document.onkeyup = function ()

	{

		clearInterval(timer)	

	};	

	//滚动条可移动区域点击事件

	oBarM.onclick = function (event)

	{

		var iTarget = (event || window.event).clientX - oBox.offsetLeft - this.offsetLeft - oBar.offsetWidth / 2;

		togetherMove(iTarget)

	};

	//图片列表和流动条同时移动

	function togetherMove(iTarget, buffer)

	{

		if (iTarget <= 0)

		{

			timer && clearInterval(timer);

			iTarget = 0

		}

		else if (iTarget >= maxL)

		{

			timer && clearInterval(timer);

			iTarget	= maxL

		}

		iScale = iTarget / maxL;

		startMove(oUl, parseInt((oList.offsetWidth + iMarginRight - oUl.offsetWidth) * iScale), function () {isStop()}, buffer);

		startMove(oBar, iTarget, function () {isStop()}, buffer)

	}

	//判断滚动条是否到达边界

	function isStop()

	{

		oBarL.className = "barL";

		oBarR.className = "barR";

		switch (oBar.offsetLeft)

		{

			case 0:

				/(^|\s)barLStop(\s|$)/.test(oBarL.className) || (oBarL.className += " barLStop");

				break;

			case maxL:

				/(^|\s)barRStop(\s|$)/.test(oBarR.className) || (oBarR.className += " barRStop");

				break;

		}

	}

	isStop()

};

function startMove(obj, iTarget, fnEnd, buffer)

{

	clearInterval(obj.timer);

	obj.timer = setInterval(function ()

	{

		doMove(obj, iTarget, fnEnd, buffer)	

	}, 25)

}

function doMove(obj, iTarget, fnEnd, buffer)

{

	var iLeft = getStyle(obj, "left");

	var iSpeed = (iTarget - iLeft) / (buffer || 5);

	iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

	iLeft == iTarget ? (clearInterval(obj.timer), fnEnd && fnEnd()) : obj.style.left = iLeft + iSpeed + "px"

}

</script>

</head>

<body>

<!--把下面代码加到<body>与</body>之间-->

<div id="box">

	<div class="list">

    	<ul>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/1.jpg"><p>iPhone 4</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/2.jpg"><p>iPad 2</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/3.jpg"><p>iPod touch</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/4.jpg"><p>iPod classic</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/5.jpg"><p>iPod shuffle</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/6.jpg"><p>iPod nano</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/7.jpg"><p>MacBook Air</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/8.jpg"><p>MacBook Pro</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/9.jpg"><p>Mac mini</p></li>

            <li><img src="http://www.zzsky.cn/effect/images/20117/301630/10.jpg"><p>Mac Pro</p></li>

        </ul>

    </div>

    <!--/list-->

    <div class="scrollBar">

        <div class="barL"></div>

        <div class="barM">

            <div class="bar">

                <div class="l"></div>

                <div class="r"></div>

            </div>

        </div>

        <div class="barR"></div>

    </div>

    <!--/scrollBar-->

</div>

<!--/box-->

<dl id="desc">

	<dt>功能说明：</dt>

    <dd>1、拖动滚动条，图片列表缓冲滑动至目标点；</dd>

    <dd>2、滚动条两端鼠标移入自动滑动；</dd>

    <dd>3、滚动条滑动到两端自动更换为停止标识；</dd>

    <dd>4、点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；</dd>

    <dd>5、支持键盘左右键；</dd>

    <dd>6、鼠标滚轮功能待续……</dd>

    <dd class="ta-r">QQ:21314130, By Ferris</dd>

</dl>

</body>

</html>
传递正能量 2012-04-02
  • 打赏
  • 举报
 回复
果断放弃iframe，因为纯粹的iframe是不可能完成这个效果的
如果一定要用，就放进div中

div中有个样式叫 overflow,可以配合js 来定位scollTop属性来模拟滚动条



关于div的滚动条，给你一个类似的小例子，和你要的效果有区别的，主要来开启你的思路的
<DIV style="PADDING-RIGHT: 10px; OVERFLOW-Y: auto; PADDING-LEFT: 10px; SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 510px; SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 100%; SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px; SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 200px; TEXT-ALIGN: left">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
利用div+jquery自定义滚动条样式的2种方法
那么，这时就必须要利用滚动条了，可以设置左边菜单项div的overflow-x:auto;overlfow-y:auto;这样就会自动生成了滚动条，但是大家都知道自带的不好看。接下来就是重点了，如何修改滚动条的样式呢？ 经过从网上的不断...
jquery.nicescroll的使用和案例
Nicescroll 是制作自定义滚动条的jq插件。支持div,iframe,html等
ymprompt消息提示组件4.0【js插件弹出框美化版】
fixPosition:true, //随滚动条浮动 dragOut:false, //不允许拖出页面 autoClose:true, //点击按钮后自动关闭页面 maskAlphaColor:'#000', //遮罩透明色 maskAlpha:0.1, //遮罩透明度 winAlpha:0.8, //...
很不错的marquee不间断滚动，调用数据库站内公告代码,速度可调整
尺寸根据实际微调下即可实现站内公告滚动轮换显示，调用公告条数可自定义，没有间断空白！ 代码思路：1、站内公告用marquee实现向上滚动；2、加入java代码让站内公告显示不间断；3、调用全部数据库的文章 调用方式...
不错的marquee不间断滚动，调用数据库站内公告代码,速度可调整，有实例网站
尺寸根据实际微调下即可实现站内公告滚动轮换显示，调用公告条数可自定义，没有间断空白！ 代码思路： 1、站内公告用marquee实现向上滚动； 2、加入java代码让站内公告显示不间断； 3、调用全部数据库的文章 ...
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章