Js相册横向滚动效果 应用
毕竟不是量身定做的，也不是自己写的，要据为己用，还的改动。
我把js代码复制我的代码里面，提示“找不到对象”，我把页面上的服务器空间都去掉也不行，后来发现不是这回事，主要是代码放错了位置。那段js代码应放在</html>后面。
HTML
1<%
@ Page Codebehind="Index.aspx.cs" Language="c#" AutoEventWireup="True" Inherits="Web.Index" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4<html>
5<head>
6 <title></title>
7 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
8 <meta name="CODE_LANGUAGE" content="C#">
9 <meta name="vs_defaultClientScript" content="JavaScript">
10 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
11 <link href="style.css" rel="stylesheet" type="text/css" />
12 <style>
13
#tbody {}{width:650px;margin:20px auto;text-align:left;}
14#mainbody {}{width:640px;margin:5px;border:1px solid #222;padding:1px}
15#mainphoto {}{cursor:pointer;display:block;}
16#goleft {}{float:left;clear:left;margin:6px 5px 0 3px;}
17#goright {}{float:right;clear:right;margin:6px 3px 0 5px;}
18#photos {}{width:330px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}
19#showArea img {}{display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}
20.txt_1 {}{font:bold 24px Verdana, Tahoma;color:#fff;}
21
</style>
22</head>
23<body>
24 <form runat="server">
25 <table width="1002" border="0" cellpadding="0" cellspacing="0">
26 <tr>
27 <td width="57">
28 <img src="images/top1.jpg" width="57" height="103" /></td>
29 <td width="390">
30 <img src="images/logo.jpg" width="396" height="103" /></td>
31 <td width="555">
32 </td>
33 </tr>
34 <tr>
35 <td height="403" valign="top">
36 <img src="images/top2.jpg" width="57" height="110" /></td>
37 <td colspan="2" align="left" valign="top">
38 <table width="94%" border="0" cellpadding="0" cellspacing="0">
39 <tr>
40 <td width="19%">
41 <!--#include file="menu.aspx" -->
42 </td>
43 <td width="81%" style="padding-left: 4px;">
44 <div id="mainbody">
45 <%=initHtm %>
46 </div>
47 </td>
48 </tr>
49 </table>
50 <table width="94%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 7px;">
51 <tr>
52 <td width="50%" valign="top" style="padding-right: 5px;">
53 <table width="100%" border="0" cellspacing="0" cellpadding="0">
54 <tr>
55 <td width="40%" class="bottom_line">
56 <img src="images/in_buss01.jpg" width="178" height="28" /></td>
57 <td width="60%" align="right" class="bottom_line">
58 <a href="About_us.aspx">
59 <img src="images/more.jpg" width="41" height="19" border="0" /></a></td>
60 </tr>
61 <tr>
62 <td height="93" colspan="2" valign="top" style="padding: 3px; line-height: 1.5;">
63 <img src="images/t.bmp" alt="" width="84" height="84" align="left" class="img_yinying" />
64 <%=corpIntro %>
65 </td>
66 </tr>
67 </table>
68 </td>
69 <td width="50%" valign="top" style="padding-left: 5px;">
70 <table width="100%" border="0" cellspacing="0" cellpadding="0">
71 <tr>
72 <td width="40%" height="28" class="bottom_line">
73 <img src="images/in_case.jpg" width="182" height="25" /></td>
74 <td width="60%" align="right" class="bottom_line">
75 <a href="case.aspx">
76 <img src="images/more.jpg" width="41" height="19" border="0" /></a></td>
77 </tr>
78 <tr>
79 <td height="104" colspan="2" align="center" valign="middle" style="padding: 3px;
80 line-height: 1.5;">
81 <table width="99%" border="0" cellpadding="0" cellspacing="0" class="huise_line">
82 <tr>
83 <td width="3%">
84 <img src="images/jiantou01.jpg" id="goleft" width="13" height="81" /></td>
85 <td width="96%" align="center">
86 <div id="photos">
87 <div id="showArea">
88 <!--
89 SRC: 缩略图地址
90 REL: 大图地址
91 NAME: 网址
92 -->
93 <%=htm %>
94 </div>
95 </div>
96 </td>
97 <td width="1%">
98 <img src="images/jiantou02.jpg" id="goright" width="13" height="81" /></td>
99 </tr>
100 </table>
101 </td>
102 </tr>
103 </table>
104 </td>
105 </tr>
106 </table>
107 </td>
108 </tr>
109 <tr>
110 <td height="40" valign="top">
111 </td>
112 <td colspan="2" align="left" class="huise_bottom_line" style="padding: 5px;">
113 <!--#include file="foot.aspx" -->
114 </td>
115 </tr>
116 </table>
117 </form>
118</body>
119</html>
120
121<script language="javascript" type="text/javascript">
122
var browse = window.navigator.appName.toLowerCase();
123var MyMar;
124var speed = 1; //速度，越大越慢
125var spec = 1; //每次滚动的间距, 越大滚动越快
126var minOpa = 100; //滤镜最小值
127var maxOpa = 100; //滤镜最大值
128var spa = 2; //缩略图区域补充数值
129var w = 0;
130spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20);
131function $(e) {return document.getElementById(e);}
132function goleft() {$('photos').scrollLeft -= spec;}
133function goright() {$('photos').scrollLeft += spec;}
134function setOpacity(e, n) {
135 if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')';
136 else e.style.opacity = n/100;
137
}
138$('goleft').style.cursor = 'pointer';
139$('goright').style.cursor = 'pointer';
140$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);}
141$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);}
142$('mainphoto').onclick = function() {location = this.getAttribute('name');}
143$('goleft').onmouseover = function() {this.src = 'images/jiantou01.jpg'; MyMar=setInterval(goleft, speed);}
144$('goleft').onmouseout = function() {this.src = 'images/jiantou01.jpg'; clearInterval(MyMar);}
145$('goright').onmouseover = function() {this.src = 'images/jiantou02.jpg'; MyMar=setInterval(goright,speed);}
146$('goright').onmouseout = function() {this.src = 'images/jiantou02.jpg'; clearInterval(MyMar);}
147window.onload = function() {
148 setOpacity($('mainphoto'), minOpa);
149 var rHtml = '';
150 var p = $('showArea').getElementsByTagName('img');
151 for (var i=0; i<p.length; i++) {
152 w += parseInt(p[i].getAttribute('width')) + spa;
153 setOpacity(p[i], minOpa);
154 p[i].onclick = function() {location = this.getAttribute('name');}
155 p[i].onmouseover = function() {
156 setOpacity(this, maxOpa);
157 $('mainphoto').src = this.getAttribute('rel');
158 $('mainphoto').setAttribute('name', this.getAttribute('name'));
159 setOpacity($('mainphoto'), maxOpa);
160 }
161 p[i].onmouseout = function() {
162 setOpacity(this, minOpa);
163 setOpacity($('mainphoto'), minOpa);
164 }
165 rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />';
166 }
167 $('showArea').style.width = parseInt(w) + 'px';
168 var rLoad = document.createElement("div");
169 $('photos').appendChild(rLoad);
170 rLoad.style.width = "1px";
171 rLoad.style.height = "1px";
172 rLoad.style.overflow = "hidden";
173 rLoad.innerHTML = rHtml;
174}
175</script>
176
177
C#
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Data;
5using System.Drawing;
6using System.Web;
7using System.Web.SessionState;
8using System.Web.UI;
9using System.Web.UI.WebControls;
10using System.Web.UI.HtmlControls;
11
12namespace Web
13{
14 /**//// <summary>
15 /// Index 的摘要说明。
16 /// </summary>
17 public partial class Index : System.Web.UI.Page
18 {
19
20 protected string htm;
21 protected string initHtm;
22 protected string webTitle = null;
23 protected string discription = null;
24 protected string corpIntro = null;
25 protected void Page_Load(object sender, System.EventArgs e)
26 {
27
28
29
30 corpIntro =Common.Format.GetContent(Common.UBBToHTML.HtmlToText(BLL.Corp.GetCorpInfoDS().CorpIntroduce),180);
31 DataSet ds= DAL.OleDbHelper.ExecuteDataset(DAL.OleDbHelper.CONN_STRING, CommandType.Text, "select * from tbl_case order by case_id desc");
32 initHtm = "<img id=\"mainphoto\" src=\"" + ds.Tables[0].Rows[0]["case_pic"].ToString() + "\" alt=\"正鑫装饰\" width=\"706\" height=\"251\" rel=\"" + ds.Tables[0].Rows[0]["case_pic"].ToString() + "\" name=\"#\" />";
33 htm = "";
34 for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
35 {
36 htm += "<img src=\"" + ds.Tables[0].Rows[i]["case_pic"].ToString() + "\" alt=\"正鑫装饰\" width=\"80\" height=\"50\" rel=\"" + ds.Tables[0].Rows[i]["case_pic"].ToString() + "\" name=\"#\" />";
37 }
38 }
39
40 Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
41 override protected void OnInit(EventArgs e)
42 {
43 //
44 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
45 //
46 InitializeComponent();
47 base.OnInit(e);
48 }
49
50 /**//// <summary>
51 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
52 /// 此方法的内容。
53 /// </summary>
54 private void InitializeComponent()
55 {
56
57 }
58 #endregion
59 }
60}
61
我把js代码复制我的代码里面，提示“找不到对象”，我把页面上的服务器空间都去掉也不行，后来发现不是这回事，主要是代码放错了位置。那段js代码应放在</html>后面。
HTML1
<%@ Page Codebehind="Index.aspx.cs" Language="c#" AutoEventWireup="True" Inherits="Web.Index" %>2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4
<html>5
<head>6
<title></title>7
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">8
<meta name="CODE_LANGUAGE" content="C#">9
<meta name="vs_defaultClientScript" content="JavaScript">10
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">11
<link href="style.css" rel="stylesheet" type="text/css" />12
<style>13
#tbody {}{width:650px;margin:20px auto;text-align:left;}14
#mainbody {}{width:640px;margin:5px;border:1px solid #222;padding:1px}15
#mainphoto {}{cursor:pointer;display:block;}16
#goleft {}{float:left;clear:left;margin:6px 5px 0 3px;}17
#goright {}{float:right;clear:right;margin:6px 3px 0 5px;}18
#photos {}{width:330px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}19
#showArea img {}{display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}20
.txt_1 {}{font:bold 24px Verdana, Tahoma;color:#fff;}21
</style>22
</head>23
<body>24
<form runat="server">25
<table width="1002" border="0" cellpadding="0" cellspacing="0">26
<tr>27
<td width="57">28
<img src="images/top1.jpg" width="57" height="103" /></td>29
<td width="390">30
<img src="images/logo.jpg" width="396" height="103" /></td>31
<td width="555">32
</td>33
</tr>34
<tr>35
<td height="403" valign="top">36
<img src="images/top2.jpg" width="57" height="110" /></td>37
<td colspan="2" align="left" valign="top">38
<table width="94%" border="0" cellpadding="0" cellspacing="0">39
<tr>40
<td width="19%">41
<!--#include file="menu.aspx" -->42
</td>43
<td width="81%" style="padding-left: 4px;">44
<div id="mainbody">45
<%=initHtm %>46
</div>47
</td>48
</tr>49
</table>50
<table width="94%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 7px;">51
<tr>52
<td width="50%" valign="top" style="padding-right: 5px;">53
<table width="100%" border="0" cellspacing="0" cellpadding="0">54
<tr>55
<td width="40%" class="bottom_line">56
<img src="images/in_buss01.jpg" width="178" height="28" /></td>57
<td width="60%" align="right" class="bottom_line">58
<a href="About_us.aspx">59
<img src="images/more.jpg" width="41" height="19" border="0" /></a></td>60
</tr>61
<tr>62
<td height="93" colspan="2" valign="top" style="padding: 3px; line-height: 1.5;">63
<img src="images/t.bmp" alt="" width="84" height="84" align="left" class="img_yinying" /> 64
<%=corpIntro %>65
</td>66
</tr>67
</table>68
</td>69
<td width="50%" valign="top" style="padding-left: 5px;">70
<table width="100%" border="0" cellspacing="0" cellpadding="0">71
<tr>72
<td width="40%" height="28" class="bottom_line">73
<img src="images/in_case.jpg" width="182" height="25" /></td>74
<td width="60%" align="right" class="bottom_line">75
<a href="case.aspx">76
<img src="images/more.jpg" width="41" height="19" border="0" /></a></td>77
</tr>78
<tr>79
<td height="104" colspan="2" align="center" valign="middle" style="padding: 3px;80
line-height: 1.5;">81
<table width="99%" border="0" cellpadding="0" cellspacing="0" class="huise_line">82
<tr>83
<td width="3%">84
<img src="images/jiantou01.jpg" id="goleft" width="13" height="81" /></td>85
<td width="96%" align="center">86
<div id="photos">87
<div id="showArea">88
<!--89
SRC: 缩略图地址90
REL: 大图地址91
NAME: 网址92
-->93
<%=htm %>94
</div>95
</div>96
</td>97
<td width="1%">98
<img src="images/jiantou02.jpg" id="goright" width="13" height="81" /></td>99
</tr>100
</table>101
</td>102
</tr>103
</table>104
</td>105
</tr>106
</table>107
</td>108
</tr>109
<tr>110
<td height="40" valign="top">111
</td>112
<td colspan="2" align="left" class="huise_bottom_line" style="padding: 5px;">113
<!--#include file="foot.aspx" -->114
</td>115
</tr>116
</table>117
</form>118
</body>119
</html>120
121
<script language="javascript" type="text/javascript">122
var browse = window.navigator.appName.toLowerCase();123
var MyMar;124
var speed = 1; //速度，越大越慢125
var spec = 1; //每次滚动的间距, 越大滚动越快126
var minOpa = 100; //滤镜最小值127
var maxOpa = 100; //滤镜最大值128
var spa = 2; //缩略图区域补充数值129
var w = 0;130
spec = (browse.indexOf("microsoft") > -1) ? spec : ((browse.indexOf("opera") > -1) ? spec*10 : spec*20);131
function $(e) {return document.getElementById(e);}132
function goleft() {$('photos').scrollLeft -= spec;}133
function goright() {$('photos').scrollLeft += spec;}134
function setOpacity(e, n) {135
if (browse.indexOf("microsoft") > -1) e.style.filter = 'alpha(opacity=' + n + ')';136
else e.style.opacity = n/100;137
}138
$('goleft').style.cursor = 'pointer';139
$('goright').style.cursor = 'pointer';140
$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa);}141
$('mainphoto').onmouseout = function() {setOpacity(this, minOpa);}142
$('mainphoto').onclick = function() {location = this.getAttribute('name');}143
$('goleft').onmouseover = function() {this.src = 'images/jiantou01.jpg'; MyMar=setInterval(goleft, speed);}144
$('goleft').onmouseout = function() {this.src = 'images/jiantou01.jpg'; clearInterval(MyMar);}145
$('goright').onmouseover = function() {this.src = 'images/jiantou02.jpg'; MyMar=setInterval(goright,speed);}146
$('goright').onmouseout = function() {this.src = 'images/jiantou02.jpg'; clearInterval(MyMar);}147
window.onload = function() {148
setOpacity($('mainphoto'), minOpa);149
var rHtml = '';150
var p = $('showArea').getElementsByTagName('img');151
for (var i=0; i<p.length; i++) {152
w += parseInt(p[i].getAttribute('width')) + spa;153
setOpacity(p[i], minOpa);154
p[i].onclick = function() {location = this.getAttribute('name');}155
p[i].onmouseover = function() {156
setOpacity(this, maxOpa);157
$('mainphoto').src = this.getAttribute('rel');158
$('mainphoto').setAttribute('name', this.getAttribute('name'));159
setOpacity($('mainphoto'), maxOpa);160
}161
p[i].onmouseout = function() {162
setOpacity(this, minOpa);163
setOpacity($('mainphoto'), minOpa);164
}165
rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />';166
}167
$('showArea').style.width = parseInt(w) + 'px';168
var rLoad = document.createElement("div");169
$('photos').appendChild(rLoad);170
rLoad.style.width = "1px";171
rLoad.style.height = "1px";172
rLoad.style.overflow = "hidden";173
rLoad.innerHTML = rHtml;174
}175
</script>176
177
C#1
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Data;5
using System.Drawing;6
using System.Web;7
using System.Web.SessionState;8
using System.Web.UI;9
using System.Web.UI.WebControls;10
using System.Web.UI.HtmlControls;11
12
namespace Web13
{14
/**//// <summary>15
/// Index 的摘要说明。16
/// </summary>17
public partial class Index : System.Web.UI.Page18
{19
20
protected string htm;21
protected string initHtm;22
protected string webTitle = null;23
protected string discription = null;24
protected string corpIntro = null;25
protected void Page_Load(object sender, System.EventArgs e)26
{27
28
29
30
corpIntro =Common.Format.GetContent(Common.UBBToHTML.HtmlToText(BLL.Corp.GetCorpInfoDS().CorpIntroduce),180);31
DataSet ds= DAL.OleDbHelper.ExecuteDataset(DAL.OleDbHelper.CONN_STRING, CommandType.Text, "select * from tbl_case order by case_id desc");32
initHtm = "<img id=\"mainphoto\" src=\"" + ds.Tables[0].Rows[0]["case_pic"].ToString() + "\" alt=\"正鑫装饰\" width=\"706\" height=\"251\" rel=\"" + ds.Tables[0].Rows[0]["case_pic"].ToString() + "\" name=\"#\" />";33
htm = "";34
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)35
{36
htm += "<img src=\"" + ds.Tables[0].Rows[i]["case_pic"].ToString() + "\" alt=\"正鑫装饰\" width=\"80\" height=\"50\" rel=\"" + ds.Tables[0].Rows[i]["case_pic"].ToString() + "\" name=\"#\" />";37
}38
}39
40
Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码41
override protected void OnInit(EventArgs e)42
{43
//44
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。45
//46
InitializeComponent();47
base.OnInit(e);48
}49
50
/**//// <summary>51
/// 设计器支持所需的方法 - 不要使用代码编辑器修改52
/// 此方法的内容。53
/// </summary>54
private void InitializeComponent()55
{ 56
57
}58
#endregion59
}60
}61
人的一生应该这样度过：当他回首往事的时候，不会因为虚度年华而悔恨，也不会因为碌碌无为而羞愧。
