网页特效代码

最新推荐文章于 2022-10-29 07:28:20 发布
最新推荐文章于 2022-10-29 07:28:20 发布
阅读量66 收藏
点赞数
分类专栏： js 文章标签： Microsoft HTML JavaScript XHTML CSS ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maofujun1980/article/details/83389913
版权

<!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.οnlοad=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].οnclick=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" οnclick="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" οnclick="inner_slide(2)" id="sbutton2">∇</div>
  </div>
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

maofujun1980
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript特效代码大全(420个)
傾城如夢的专栏
11-05 3673
├ Cookie脚本  ├  随访问次数变提示  ├  集成Cookies  ├  使窗口仅弹出一次  ├  签名提示程序  ├  记录上次登录时间  ├  自由控制打开窗口  ├  记录页面修改时间  ├  检测IE去过站点  ├  离开时显示信息  ├  弹出窗口自动关闭  ├  离开页面弹出窗口  ├  进入时显示信息
分享几个简单的HTML网页特效代码
qq_51608297的博客
06-03 1265
分享日常小技巧2019-03-02 1。忽视右键 　<bodyoncontextmenu="returnfalse"> 　或 　<bodystyle="overflow-y:hidden"> 2。加入背景音乐 　IE:<bgsoundsrc="*.mid"loop=infinite> 　NS:<embedsrc="*.mid"autostart=truehidden=trueloop=true> ...
分享一个很酷很炫的html5特效网站源码
热门推荐
云淡风轻、仅此一抹
05-25 1万+
分享一个很酷很炫的html5特效网站源码,代码下载地址：http://www.zuidaima.com/share/1784027301841920.htm
用js一招破解所有网页的加密源代码的方法
饭特稀 的专栏
05-03 1万+
 现在很流行源代码加密，无论出于作者想保护自己的资源，还是放马者为了不让别人发现网页有马等等，都对源代码加密。 想破解它很简单，一招就搞定了，是不是用点心动了呢？是的就快跟我来吧！comeon gogogo! 1/首先我们来看看一个网页的源代码，为了不浪费大家的时间，我在免费空间随便上传个网页（已经加密的）大家来看看，为了便以大家看到结果，我做很简单（真的很简单咯）我门来看看他的源代码，方法有很多
酷酷菜单代码
ξσ Dicky's Blog σξ
02-26 1万+
酷酷菜单代码var distance=0;distance1=0;function move1(){if(distance!=50) {span1.style.pixelLeft+=1;span3.style.pixelLeft+=1;span5.style.pixelLeft+=1;span2.style.pixelLeft-=1;span4.style.pixelLeft-=1;span6.s
网页特效php代码大全,网页特效代码
weixin_42520239的博客
03-17 422
网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。丰富多彩的网页特效,为网页增加了很不错的效果,初学网页者按照说明也很容易成功的为网页添加网页特效.学会添加网页特效的过程也能激发网页初学者更加了解HTML语言的结构.(推荐学习：web前端视频教程)为了...
html网页特效代码笔记,一个js实现的网页鼠标点击特效代码
weixin_34977480的博客
06-09 1162
v2ex上看到一个网页鼠标点击特效，第一眼觉得挺好看的，但是看多了感觉有点花里胡哨，蛮记录下。复制下方代码到html中的js代码区域即可。//鼠标点击事件function clickEffect() {let balls = [];let longPressed = false;let longPress;let multiplier = 0;let width, height;let origi...
网页特效代码集合+实例(C#)
zzjlhlcd的博客
10-29 2260
网页特效代码集合+实例(C#)
网页特效怎么插HTML代码中,入门：如何把网页特效代码加到自己的网页中？
weixin_33871933的博客
06-05 508
在过程中，有些要通过编辑代码来完成，或者通过编辑代码相对容易一些。那么，如果不会编写代码该怎么办呢？不必担心，有些雷锋式的热心网友把他们编写的代码在网上公布，供大家免费使用，让我们共同感谢这些网友的奉献精神！代码的搜集与下载：１、通过网络，搜索“网页代码”或者“网页源代码”等。２、查看网页源代码。我们也可以通过浏览器的菜单栏－查看－源文件，查看我们正在浏览的任何网页的源代码，不过有些网页的源文件无...
网页特效代码：樱花飘落、下雪、花瓣飞舞等
12-08
在给定的标题“网页特效代码：樱花飘落、下雪、花瓣飞舞等”中，提到了几种常见的视觉效果，这些效果是通过JavaScript、CSS3或者其他前端技术实现的。以下是对这些特效的详细解释： 1. **樱花飘落**：这个特效模拟...
实用网页特效代码
01-10
"115种实用网页特效代码"这个压缩包包含了一系列精心设计的代码示例，旨在帮助开发者快速实现各种网页特效。 1. 导航栏特效：导航栏是网站的引导部分，良好的导航特效可以使用户更容易找到所需信息。这些代码可能...
自动刷新网页特效代码
03-20
标题“自动刷新网页特效代码”涉及的是网页编程中的一种常见技术，主要用来实现网页的自动更新或定时刷新。这种效果通常由JavaScript或者HTML的Meta标签实现。以下将详细阐述这两种方法。 1. JavaScript实现自动...
matlab下载.pdf
07-14
matlab下载下载方式及注意事项
Android系统原理及开发要点详解-从入门到精通
07-13
Android系统原理及开发要点详解 Java4 Android视频教程 Android开发视频教学 从入门到精通 Android的软件管理器的开发教程视频 Android深入浅出_Android高端课程分享试听 JavaWeb Android系统的手机防盗软件的实现 Android开发入门与实战随书视频 视频列表.txt 0.0MB 开发入门与实战代码.rar 6.1MB 第9章 我来“广播”你的“意图”——Intent和Broadcast面对面.wmv 15.1MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-2.wmv 0.6MB 第8章 移动信息仓库——Android的数据存储操作之轻轻地我保护——SharedPreferences存储-1.wmv 24.3MB 第8章 移动信息仓库——Android的数据存储操作之Android数据存储概述.wmv 57.7MB 第7章 良好的学习开端——Android基本组件介绍之友好地互动交流——对话框(Dialog)介绍与实例-2.wmv 7.
GESP等级认证 2024年6月 C++一级真题
最新发布
07-14
GESP等级认证 2024年6月 C++一级真题 从官网上刚刚下载下来的,题都是热乎的,这可是最新真题 大家看一看瞧一瞧,走过路过不要错过,免费下载,全篇无水印,不好用随便吐槽我! 涵盖选择题,判断题,编程题,基础知识多,满满的干货,非常建议下载!!!!! 萌新小白来做做题,复习巩固都很合适!
大学生创业计划书(35)三份资料.doc
07-14
大学生创业计划书(35)三份资料.doc
大学生创业计划书(33)三个文档.doc
07-14
大学生创业计划书(33)三个文档.doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值