- 浏览: 75873 次
- 性别:
- 来自: 南京
-
文章分类
最新评论
<!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=gb2312" />
<style type="text/css" media="all">
body {
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体", Arial, Helvetica, sans-serif;
background-color:#000000;
}
img {
border:0px;
}
a {
cursor:pointer;
}
.content{
width:590px;
height:auto;
overflow:hidden;
margin:0px auto;
margin-top:60px;
padding:10px 0px 0px 0px;
}
.left{
width:417px;
height:auto;
overflow:hidden;
float:left;
padding:36px 0px 0px 20px;
position:relative;
}
.pic{
width:414px;
height:auto;
overflow:hidden;
border:#C6B6A0 2px solid;
}
.right{
height:auto;
overflow:hidden;
float:left;
padding:0px 0px 0px 0px;
text-align:center;
color:#C6C5C1;
font-weight:bold;
font-size:16px;
}
.right ul {
margin:0px;
padding:0px 11px 0px 21px;
list-style:none;
height:auto;
overflow:hidden;
}
.right li {
padding:0px 0px 2px 0px;
height:80px;
overflow:hidden;
}
.right li img {
border:#ACA79E 1px solid;
cursor:pointer;
width:103px;
height:77px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity:0.5;
}
.right li:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1;
}
.lighton {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100) !important;
-moz-opacity:1 !important;
}
.lightoff {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity:0.3;
}
.top {
padding-left:21px;
width:126px;
height:21px;
overflow:hidden;
cursor:pointer;
}
.slide_content {
width:auto;
height:246px;
overflow:hidden;
}
.bottom {
padding-left:21px;
width:126px;
height:19px;
overflow:hidden;
cursor:pointer;
}
.txt{
width:414px;
padding:2px 0px 0px 0px;
height:20px;
overflow:hidden;
color:#FFFBD0;
text-align:center;
position:absolute;
right:2px;
bottom:1px;
line-height:19px;
background-color:#333333;
opacity:0.50;
filter:alpha(opacity=50);
}
.txt span{
display:block;
width:100%;
}
</style>
<script language="javascript" type="text/javascript">
//slide
var scontainer,scHeight,listH,sint,sinum=0,sdir=1,cnum,cstop,step,isinit,txts,txtint;
window.onload=function(){
scontainer=getid("inner_slide");
scHeight=scontainer.offsetHeight;
listH=scontainer.getElementsByTagName("ul")[0].offsetHeight;
for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){
scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].index=i+1;
scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].onclick=function(){showp(this.index)}
}
}
function inner_slide(n){
if(n==1){sdir=(-1)}else{sdir=1}
if(scontainer.scrollTop<=0 && n==1){return false;}else if(scontainer.scrollTop>=(listH-scHeight) && n==2){return false;}
sinum=0;
step=6;
cstop=scontainer.scrollTop;
sint=setInterval(inner_mov,2);
return true;
}
function inner_mov(){
scontainer.scrollTop+=(step*sdir);
if(step>2){ step-=1}
sinum+=step;
if(sinum>=82){clearInterval(sint);scontainer.scrollTop=cstop+82*sdir;showp(scontainer.scrollTop/82+1)}
if(scontainer.scrollTop<=0){getid("sbutton1").style.visibility="hidden";}else{getid("sbutton1").style.visibility="visible";}
if(scontainer.scrollTop>=(listH-scHeight)){getid("sbutton2").style.display="none";}else{getid("sbutton2").style.display="block";}
}
function txtm(){
if(txts>0){txts--;}else{clearInterval(txtint)}
getid("txt").style.marginTop=txts+"px";
}
function showp(n){
getid("photo").src=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("src");
getid("txt").innerHTML=scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].getAttribute("alt");
txts=20;
clearInterval(txtint);
txtint=setInterval("txtm()",10);
for(var i=0;i<scontainer.getElementsByTagName("li").length;i++){scontainer.getElementsByTagName("li")[i].getElementsByTagName("img")[0].className="lightoff";}
scontainer.getElementsByTagName("li")[n-1].getElementsByTagName("img")[0].className="lighton";
}
function getid(id){return document.getElementById(id);}
</script>
<title>客服中心</title>
</head>
<body>
<div class="content">
<div class="left"><div class="pic"><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" id="photo"/></div><div class="txt"><span id="txt">墙上是大家的大头贴拼图</span></div></div>
<div class="right">
<div class="top" onclick="inner_slide(1)" id="sbutton1">Δ</div>
<div class="slide_content" id="inner_slide">
<ul>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="墙上是大家的大头贴拼图" class="lighton"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="服务器中聊得火热的留言板背后"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="忙碌的一天开始了"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="墙上是大家的大头贴拼图"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/1.jpg" alt="服务器中聊得火热的留言板背后"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/2.jpg" alt="忙碌的一天开始了"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/3.jpg" alt="墙上是大家的大头贴拼图"/></li>
<li><img src="http://www.wxwdesign.cn/works/html_demo/clear_opacity/images/4.jpg" alt="服务器中聊得火热的留言板背后"/></li>
</ul>
</div>
<div class="bottom" onclick="inner_slide(2)" id="sbutton2">∇</div>
</div>
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
发表评论
-
jquery highcharts
2011-09-13 23:37 814Highcharts Highstock -
jquery资料
2011-07-23 01:53 746jquery资料 -
js日期问题
2011-07-05 01:35 787var b=new Date();var c=new Date ... -
DOM_API
2009-04-23 10:18 1109getElementById(id) Node 返回指定结点的 ... -
js报表效果
2009-04-23 09:59 1834<HTML><head><tit ... -
动态创建及删除表格行
2009-04-23 09:58 757<html xmlns="http://www ... -
js提示框
2009-04-03 09:02 661具体使用方法在压缩包中 -
js的提示框
2008-12-11 14:09 1065<script>function clk_yes( ...
相关推荐
总的来说，网页特效代码的掌握对于一个前端开发者至关重要，它不仅能够使网页更具吸引力，还能提高用户与网页的交互性。不断学习和实践不同的特效代码，可以提升自己的技术水平，更好地适应现代网页设计的需求。
经典的网页特效代码 特效代码 html特效代码
网页特效代码 - 网页制作特效，js特效，网页特效代码，JS教程，javascript
在这个名为"所有网页特效代码大集合"的压缩包中，包含了各种各样的网页特效代码，旨在帮助开发者轻松实现网页的各种动态效果。下面将详细介绍其中可能包含的知识点，以及这些特效在实际应用中的价值。 1. **...
"网页特效代码大全.RAR" 这个压缩包文件显然包含了丰富的特效代码资源，适合网页开发者用于增强其网站的视觉吸引力和用户体验。 首先，我们可以从“网页编辑特效”这个文件名推测，这个压缩包可能包含了各种与网页...
### 网页特效代码：樱花飘落、下雪、花瓣飞舞等 在现代网页设计中，为了增强用户体验和视觉吸引力，开发人员经常会在页面上加入各种动态效果。本篇将详细介绍如何利用HTML、CSS以及JavaScript来实现诸如樱花飘落、...
网页特效代码是网页设计中的一种重要技术，它用于提升网页的视觉效果和用户体验。这些特效不仅包括鼠标交互，还涵盖文字动画、图像处理、导航菜单、滑块、弹窗等多种元素。下面将详细介绍这些知识点： 1. 鼠标特效...
1. **理解网页特效代码结构**：首先，你需要理解特效代码的结构。这通常包括CSS（层叠样式表）用于定义样式，JavaScript用于添加动态功能，以及可能的HTML片段用于插入特定元素。确保你已下载或复制了所有必要的文件...
在这个“网页特效代码集合”中，我们将会探讨一系列用于创建独特、动态网页效果的代码片段。这些特效涵盖了从简单的动画到复杂的交互设计，帮助开发者构建出更加生动和引人入胜的网页。 首先，我们要了解网页特效的...
6. **网页中实用的中英文日历网页特效代码.txt**：这个特效提供了一个用户友好的日历组件，支持中英文显示，可以用于事件计划、日期选择等场景，增强网页的交互性。 7. **3D图片相册效果.txt**：这个特效将传统的...
"常用网页特效代码"这个主题涵盖了众多用于增强网页交互性和视觉效果的技术。以下是一些关键的知识点，这些知识点可以帮助你理解和应用这些特效代码。 1. **CSS（层叠样式表）**：CSS是最主要的工具之一，用于实现...
以下我们将深入探讨“文本特效 html网页特效 代码特效”这一主题，以及如何实现不断变换颜色的文本和字幕滚动效果。 一、不断变换颜色的文本特效 这种特效通常是通过CSS的`animation`属性和`@keyframes`规则来实现...
"精美网页导航网页特效代码"是专门针对这一关键元素的资源，旨在帮助开发者创造出吸引眼球、功能强大的导航界面。这个压缩包可能包含了各种JavaScript、CSS以及HTML代码示例，用于实现各种炫酷的导航效果。 首先，...
"115种实用网页特效代码"这个压缩包包含了一系列精心设计的代码示例，旨在帮助开发者快速实现各种网页特效。 1. 导航栏特效：导航栏是网站的引导部分，良好的导航特效可以使用户更容易找到所需信息。这些代码可能...
本资源下载提供的"网页特效代码"旨在帮助开发者和设计师实现各种创新且实用的网页特效。 网页特效主要包括但不限于动画效果、过渡效果、鼠标悬停效果、导航菜单特效、图片滑动展示、滚动条美化、时间线展示、表单...
本资源“61种时尚网页特效代码javascript特效2013js特效”汇集了2013年时流行的JavaScript特效，这些特效能够极大地提升网站的用户体验，吸引并留住用户。 首先，我们来了解一下JavaScript在网页特效中的作用。...
本资源集合了多种网页特效的代码实例，适合初学者和有一定基础的开发者参考学习。下面将详细介绍一些常见的HTML网页特效及其实现原理。 1. **CSS样式与布局** HTML与CSS（Cascading Style Sheets）结合使用可以...
本资源包“链接特效 html网页特效 代码特效”主要关注的是“能移动的超级连接特效”，这种特效使得链接在用户的交互下产生动态的视觉变化，增强用户的浏览体验。通常，这样的特效可以通过以下几种方式实现： 1. CSS...
网页特效代码是提升网站用户体验和视觉吸引力的重要手段。在网页设计中，特效代码可以包括动画、交互效果、视觉过渡等，这些元素能够使网站更具活力和互动性。本篇文章将详细探讨如何在网页中添加各种特效代码，以及...