这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近有美工朋友找我们要兼容性比较好的对联广告代码,我们给他一个他竟然不能运行,经过排查,这是因为现在的广告也用了一样代码,函数命名重复。
最后我们给出合适的代码:
核心代码:
- lastScrollY=0;
- function heartBeat(){
- var diffY;
- if (document.documentElement && document.documentElement.scrollTop)
- diffY = document.documentElement.scrollTop;
- else if (document.body)
- diffY = document.body.scrollTop
- else
- {/*Netscape stuff*/}
- //alert(diffY);
- percent=.1*(diffY-lastScrollY);
- if(percent>0)percent=Math.ceil(percent);
- else percent=Math.floor(percent);
- document.getElementById("leftDIV").style.top=parseInt(document.getElementById("leftDIV").style.top)+percent+"px";
- document.getElementById("rightDIV").style.top=parseInt(document.getElementById("leftDIV").style.top)+percent+"px";
- lastScrollY=lastScrollY+percent;
- //alert(lastScrollY);
- }
- sidebar1= "<div id=leftDIV style='left:0px; PosITION:absolute; TOP:0px;'><embed src=2010L.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div>"
- sidebar2= "<div id=rightDIV style='right:0px; PosITION:absolute; TOP:0px;'><embed src=2010R.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div> "
- document.write(sidebar1);
- document.write(sidebar2);
- //下面这段删除后,对联将不跟随屏幕而移动。
- window.setInterval("heartBeat()",1);
- //-->
- function closeAD()
- {
- document.getElementById("leftDIV").style.display='none';
- document.getElementById("rightDIV").style.display='none';
- }
为了防止冲突,我们修改后的代码:
因为客户只需要右侧的代码,左侧的我们留空。
- lastScrollY=0;
- function heartBeat2(){
- var diffY;
- if (document.documentElement && document.documentElement.scrollTop)
- diffY = document.documentElement.scrollTop;
- else if (document.body)
- diffY = document.body.scrollTop
- else
- {/*Netscape stuff*/}
- //alert(diffY);
- percent=.1*(diffY-lastScrollY);
- if(percent>0)percent=Math.ceil(percent);
- else percent=Math.floor(percent);
- document.getElementById("leftDIV2").style.top=parseInt(document.getElementById("leftDIV2").style.top)+percent+"px";
- document.getElementById("rightDIV2").style.top=parseInt(document.getElementById("leftDIV2").style.top)+percent+"px";
- lastScrollY=lastScrollY+percent;
- //alert(lastScrollY);
- }
- sidebar1= "<div id=leftDIV2 style='left:0px; PosITION:absolute; TOP:0px;'></div>"
- sidebar2= "<div id=rightDIV2 style='right:0px; PosITION:absolute; TOP:0px;'><embed src=http://www.pcqc.com.cn/web/rdgqcq/dl/images/rdcq.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div> "
- document.write(sidebar1);
- document.write(sidebar2);
- //下面这段删除后,对联将不跟随屏幕而移动。
- window.setInterval("heartBeat2()",1);
- //-->
- function closeAD()
- {
- document.getElementById("leftDIV2").style.display='none';
- document.getElementById("rightDIV2").style.display='none';
- }
后来经过网上查找,又发现了一个不错的代码
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <!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>
- <style>
- html,body{margin:0;font-family:Arial;font-size:12px;} #ad1,#ad2{position:absolute;float:left;width:100px;overflow:hidden;
- } #ad2{right:0;} #killAd1,#killAd2{position:absolute;bottom:10px;right:10px;cursor:pointer;border:1px
- solid #990000;padding:0 5px;background:red;color:#fff; }
- </style>
- <script>
- var fx = function(uid, kill) {
- var f = this,
- $ = function(x) {
- return document.getElementById(x)
- };
- f.top = f.offset = 20;
- f.ad = $(uid);
- $(kill).onclick = function() {
- f.die()
- };
- f.timer = setInterval(function() {
- f.dll()
- },
- 13);
- };
- fx.prototype = {
- dll: function() {
- var f = this,
- d = document,
- to = Math.max(d.body.scrollTop, d.documentElement.scrollTop);
- if (f.top != to) {
- var d = (to - f.top) * 0.1,
- mx = Math[d > 0 ? 'ceil': 'floor'];
- f.top += parseInt(mx(d));
- f.ad.style.top = f.top + f.offset + 'px';
- };
- },
- die: function() {
- this.ad.style.display = 'none';
- clearInterval(this.timer);
- }
- };
- window.onload = function() {
- new fx('ad1', 'killAd1');
- new fx('ad2', 'killAd2');
- };
- </script>
- </head>
- <body>
- <div>
- x
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_7/1490188068_8193.jpg"
- border=0 data-src="">
- </div>
- <div>
- x
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490188070_1059.jpg"
- border=0 data-src="">
- </div>
- <p>
- </p>
- </body>
- </html>
Js 对联广告代码
经典的对联广告代码,JS 代码实现,很简洁,也是通用的代码,随着滚动条的滚动自动适应,对联大小由 CSS 控制,这使得代码修改起来更加方便快捷,不懂 JS 也没有关系。不过本代码有一处遗憾就是没有关闭功能,真想用的可以自己加一个。
- <!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" />
- <title>标准对联广告Js代码</title>
- <style type="text/css">
- <!--
- #lovexin12,#lovexin14{
- width:90px;
- height:230px;
- background-color:#ededed;
- border:1px solid #ddd;
- }
- html,body{
- height:1203px;
- }
- #mm{
- height:1000px;
- }
- -->
- </style>
- <script language="JavaScript" type="text/javascript">
- lastScrollY=0;
- function heartBeat(){
- var diffY;
- if (document.documentElement && document.documentElement.scrollTop)
- diffY = document.documentElement.scrollTop;
- else if (document.body)
- diffY = document.body.scrollTop
- else
- {/*Netscape stuff*/}
- percent=.1*(diffY-lastScrollY);
- if(percent>0)percent=Math.ceil(percent);
- else percent=Math.floor(percent);
- document.getElementById("lovexin12").style.top=parseInt(document.getElementById
- ("lovexin12").style.top)+percent+"px";
- document.getElementById("lovexin14").style.top=parseInt(document.getElementById
- ("lovexin12").style.top)+percent+"px";
- lastScrollY=lastScrollY+percent;
- }
- suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"
- suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"
- document.write(suspendcode12);
- document.write(suspendcode14);
- window.setInterval("heartBeat()",1);
- </script>
- </head>
- <body>
- <div></div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0706/282929.html