`

js对联广告 js 查看图片

    博客分类:
  • 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>
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<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>
<!--对联广告js-->
<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>

<!--查看图片Js-->
<script>
function fnCreate(src){

            /* 要创建的div的classname */
            var ClassName = "thumbviewbox";

            if(src == '')
            {
                return false;
            }

            /* 优先创建图片,如果图片没有加载成功,回调自己 */
            var img = document.createElement('img');
            img.setAttribute('src',src);
            var imgwd = img.width;
            var imghg = img.height;

            if(imgwd<1)
            {
                var timer = setTimeout("fnCreate('"+src+"')",100);
                return false;
            }else{
                clearInterval(timer);
            }

            /* 清除已经弹出的窗口,防止冒泡 */    
            em = document.getElementsByClassName(ClassName)

            for(var i=em.length-1; i>=0; i--){
                var p = em[i];
                p.parentNode.removeChild(p);
            }    

            /* 各项参数 */
            var htmlWidth = window.innerWidth;            //可见区域宽度
            var htmlHeight = window.innerHeight;        //可见区域高度
            var divleft = 0;                            //将要创建的div的左边距
            var divtop =0;                                //将要创建的div的右边距
            var closefunction = 'em=document.getElementsByClassName("'+ClassName+'");for(var i=em.length-1;i>=0;i--){var p=em[i];p.parentNode.removeChild(p);}';    //关闭div的代码

            img.setAttribute('onclick',closefunction);

            /* 计算通过图片计算div应该在的位置,保证弹窗在页面中央 */
            if(imgwd>htmlWidth*0.8)
            {
                img.setAttribute('width',htmlWidth*0.8);
                divleft=htmlWidth*0.1;
                if(imghg>htmlHeight*0.8)
                {
                    divtop = htmlHeight*0.1;
                }else{
                    divtop = (htmlHeight-imghg)/2;
                }
            }else{
                img.setAttribute('width',imgwd);
                divleft= (htmlWidth-imgwd)/2;
                if(imghg>htmlHeight*0.8)
                {
                    divtop = htmlHeight*0.1;
                }
                else
                {
                    divtop = (htmlHeight-imghg)/2;
                }
            }

            /* 创建关闭按钮 */
            var closebtn = document.createElement('a');
            closebtn.setAttribute('class','close');
            closebtn.setAttribute('href','javascript:;');
            closebtn.setAttribute('style','position:absolute;top:-20px;right:-5px;cursor:pointer;background:#444;color:#FFF;');
            closebtn.innerHTML = '[close/关闭]';
            closebtn.setAttribute('onclick',closefunction);

            /* 创建弹窗 */
            var element = document.createElement('div');
            element.appendChild(img);
            element.appendChild(closebtn);
            element.setAttribute('class',ClassName);
            element.setAttribute('style','border:5px solid #444;position:absolute;top:'+Math.round(divtop)+'px;left:'+Math.round(divleft)+'px;border-radius:5px;background:#FFF');

            document.body.appendChild(element);
    }
</script>
<!--展开隐藏效果JS-->
<script type="text/javascript">
$(document).ready(function(){
	$('#show').toggle(
		function(){
			$('#dataTable tr:gt(1)').hide();
			//$('#key2').hide();这里有分页的话可以隐藏
			$(this).text('展开');
		},
		function(){
			$('#dataTable tr:gt(1)').show();
			//$('#key2').show();这里有分页的话可以显示
			$(this).text('关闭');
		}
	);
});
</script>
</head>
<body>
<div id="mm">
     <center> <a href="#" onclick="fnCreate('weight_info!draw.action.png')"> <img src="weight_info!draw.action.png" width="60px" height="120px"/></a></center>
    <center> <table width="60%" border="0" cellpadding="0" cellspacing="1" bgcolor="#CFD8C5" id="dataTable">
				<tr>
					<td colspan="4" bgcolor="#FFF">
						<span style="float:right; font-size:14px; font-weight:bold; padding-right:10px;">
						<a href="#" id="show"> 关闭 </a>
						</span>
						<strong>销售单</strong>
					</td>
				</tr>
				<tr id="divc">
					<td align="center" bgcolor="#E1F0AF">产品名称</td>
				    <td width="20%" align="center" bgcolor="#E1F0AF">数量</td>
				    <td width="20%" align="center" bgcolor="#E1F0AF">购买金额</td>
					<td width="20%" align="center" bgcolor="#E1F0AF">使用积分</td>
				</tr>
				
				<tr>
				  <td align="center" bgcolor="#FFFFFF">大闸蟹</td>
			      <td align="center" bgcolor="#FFFFFF">1</td>
			      <td align="center" bgcolor="#FFFFFF">100</td>
				  <td align="center" bgcolor="#FFFFFF">0</td>
				 
			  	</tr>
				<tr>
				  <td align="center" bgcolor="#FFFFFF">大闸蟹</td>
			      <td align="center" bgcolor="#FFFFFF">1</td>
			      <td align="center" bgcolor="#FFFFFF">100</td>
				  <td align="center" bgcolor="#FFFFFF">0</td>
				 
			  	</tr>
			  	
	</table>
	<center>
</div>
</body>
</html>
 
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics