查看: 2842|回复: 2

javascript 带滚动条的图片查看特效(超酷)1 [复制链接]

书生

Rank: 2

电梯直达

1^#

嘟嘟 发表于 2011-7-13 00:01:52 |只看该作者 |倒序浏览

注：本人收集的其中一种特效呵呵感觉能让大家学习欣赏！(例子中图片自己找吧),由于帖子字数限制分3张发布(抱歉)!
【代码复制粘贴找到图片即可运行】 iscripts 只有想不到的没有做不到的！完整实例已经上传群空间(14791694)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>1</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#imageFlow {
position: absolute;
width: 50%;
height: 40%;
left: 0%;
top: 10%;
background: #000;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 40%;
background: #181818;
}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 16%;
text-align: center;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>

javascript 带滚动条的图片查看特效(超酷)2
http://www.iscripts.org/forum.php?mod=viewthread&tid=322

javascript 带滚动条的图片查看特效(超酷)3
http://www.iscripts.org/forum.php?mod=viewthread&tid=323