js感应鼠标出现边框和说明的图片展示效果

时间：2022-06-25 20:17:48 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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>
<title>js感应鼠标出现边框和说明的图片展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
*{padding:0;margin:0;}
li{list-style:none;}
img{border:none;}
body{background:#fff;font:12px/1.5 tahoma,arial,宋体b8b4f53;}
a{text-decoration:none;color:#36C;}
a:hover{color:#F60;text-decoration:underline;}
#prolist{}
.list-content{margin-top:0;position:relative;_position:none;top:50px;}
.main-view-list{margin-left:8px;}
.list-item-combine{margin-left:5px;padding-bottom:9px;_padding-bottom:6px;padding-right:0;}
.list-item{position:relative;display:inline-block;height:auto;margin:-1px -6px 0 0;padding:0 10px 20px 9px;vertical-align:top;}
.list-ibox{border:1px solid white;zoom:1;}
.title{overflow:hidden;padding:240px 6px 5px;line-height:1.5;font-weight:normal;position:relative;}
.title a{display:table-cell;font-size:12px;}
.pic{position:absolute;left:9px;top:0;padding:5px;border:1px solid #DDD;}
.s220,.s220 a{}
.love-hate-oprator{background-color:white;position:absolute;}
.hidden{display:none;}
.add-fast-table-pic{position:absolute;left:4px;top:5px;_top:4px;top:3px;cursor:pointer;}
.s220 .add-fast-table-text{color:gray;cursor:pointer;text-align:left;display:inline;font-size:12px;position:absolute;line-left:97px;outline:none;width:auto;top:5px;_top:4px;top:3px;background:url('20129/52145/ico.png') 0 -41px no-repeat;padding-left:20px;}
.s220 .add-love-text{width:auto;background-position:0 -160px;color:gray;cursor:pointer;text-align:left;line-padding:0 0 0 20px;font-size:12px;position:absolute;left:148px;top:5px;_top:4px;top:3px;background:url('20129/52145/ico.png') 0 -61px no-repeat;}
.attribute{padding:0 6px 5px 6px;overflow:hidden;color:#555;position:relative;}
.attribute .price,.attribute .seller{display:inline;float:left;}
.attribute .seller a{color:#555;}
.attribute .ship,.attribute .place{display:inline;float:right;line-_line-text-align:right;}
.legend{overflow:hidden;margin-top:5px;padding:0 5px;}
.quicklook-grid{min-_background:white;border:1px solid #FEC794;border-top:none;position:absolute;padding:6px;z-index:9999;}
.quicklook-grid .lgi{position:relative;min-_margin-top:8px;}
.quicklook-grid .lgi-b{padding:3px 5px;display:block;background:#FFF5EC;float:right;border:1px solid #FFE2C7;}
.h{color:#F50!important;}
.quicklook-grid li{margin:4px 0;}
.pic .hate{display:none;}
.trade-num{float:right;margin-right:4px;margin-top:-20px;_margin-top:-20px;}
.attribute .price .money{padding-left:10px;font-weight:bold;font-size:16px;color:#F30;background:url('20129/52145/ico.png') 0 -20px no-repeat;}
.attribute .price del.money{color:#666;display:inline-block;font-size:12px;font-weight:normal;line-margin-left:5px;vertical-align:1px;text-decoration:line-through;}
.ww-light a span{display:none;}
.back{position:absolute;right:20px;top:10px;color:#000;text-shadow:1px 1px 3px #999999;text-decoration:none;z-index:99999;}
</style>
<script type="text/javascript" >
function $(id){/* 获取id */
	return typeof id === "string" ? document.getElementById(id) : id;
}

ZHJ.util = {
	    stopEvent:function(e){
	        e = e||window.event;
	        if(e.stopPropagation){
	            e.stopPropagation();
	            e.preventDefault();
	        }else{
	            e.cancelBubble = true;
	            e.returnValue = false;
	        }
	    },
	    bind:function(foo,othis){
	        if(!foo||!othis){return;};
	        var args = Array.prototype.slice.call(arguments,2);
	        return function(e){e=e||top.window.event||window.event;foo.apply(othis,args.concat(e));};
	    },
	    addEvent:function(obj,sType,fFoo){
	        if(document.attachEvent){
	            obj.attachEvent('on'+sType,fFoo);
	        }else{
	            obj.addEventListener(sType,fFoo,false);
	        }
	    },
	    delEvent:function(obj,sType,fFoo){
			if(obj.detachEvent){
				obj.detachEvent('on'+sType, fFoo);
			}
			else{
				obj.removeEventListener(sType, fFoo, false);
			}
	    },
	    addScrollEvent : function(ev){//阻止滚轮事件
			var oEvent=ev||event;

if(flag=='0'){
				oEvent.preventDefault();
			}
			else{
				
			}
		}
	};

ZHJ.appendStr = function(obj, html){/* 以字符串的形式插入 */
		var oDiv=document.createElement('div');
		oDiv.innerHTML=html;
		while(oDiv.childNodes.length){
			obj.appendChild(oDiv.childNodes[0]);
		}
	}

ZHJ.getByClass = function(obj, sClass){/*获取class样式*/
		var aEle = obj.getElementsByTagName('*');
		var i = 0;
		var aResult = [];
		for(i=0;i<aEle.length;i++){
			if(aEle[i].className == sClass){
				aResult.push(aEle[i]);
			}
		}
		return aResult;
	}

//获取元素的XY坐标
	ZHJ.getXY = function(el){
		return document.documentElement.getBoundingClientRect && (function() {//取元素坐标，如元素或其上层元素设置position relative
			var pos = el.getBoundingClientRect();
			return { x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop };
		})() || (function() {
			var _x = 0, _y = 0;
			do {
			    _x += el.offsetLeft;
			    _y += el.offsetTop;
			} while (el = el.offsetParent);
			return { x: _x, y: _y };
		})();
	};
	//获取元素节点
	ZHJ.getNode = {
		firstChild : function(obj){
			return obj.firstElementChild || obj.firstChild;
		},
		nextSibling : function(obj){
			return obj.nextElementSibling || obj.nextSibling;
		}
	};
	//数组操作
	ZHJ.classes.arryOperate = {
		indexOF : function(s, a){
			for(var i = 0; i < a.length; i++) if(s == a[i]) return i;
	  		return -1;  
		},
		del : function(a, b){
			for(var i = 0; i < a.length; i++) {
			    b.splice(this.indexOF(a[i], b), 1) 
			}
			return b
		}
	};

ZHJ.classes.doWhileExists = function(id,foo){//确认id是否从在，从在转对象
	    var dTmp = document.getElementById(id);
	    if(dTmp){foo(dTmp);}
	};
	//滚动条
	ZHJ.classes.adjustScrollTop = function(id){
		var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
		if(scrollTop==0){
			ZHJ.cssStyle(id,'marginTop',parseFloat(ZHJ.cssStyle(id,'marginTop')));
		}
		else{
			ZHJ.cssStyle(id,'marginTop',-parseInt(parseFloat(ZHJ.cssStyle(id,'height'))/2)-10);
			if(ZHJ.cssStyle(id,'position')=='fixed'){
				if(-1!=window.navigator.userAgent.indexOf('MSIE 6.0') && -1==window.navigator.userAgent.indexOf('MSIE 7.0') && -1==window.navigator.userAgent.indexOf('MSIE 8.0')){
					ZHJ.cssStyle(id,'position','absolute');
					ZHJ.cssStyle(id,'marginTop',parseFloat(ZHJ.cssStyle(id,'marginTop'))+scrollTop);
				}else{
					ZHJ.cssStyle(id,'marginTop',parseFloat(ZHJ.cssStyle(id,'marginTop')));
				}
			}else if(ZHJ.cssStyle(id,'position')=='absolute'){
				ZHJ.cssStyle(id,'marginTop',parseFloat(ZHJ.cssStyle(id,'marginTop'))+scrollTop);
			}

}
	};

ZHJ.classes.Xhr = function(method, url, async, data, callback){//ajax
		var x;
		//var states = ["正在初始化……", "正在初始化请求……成功！正在发送请求……", "成功！正在接收数据……", "完成！正在解析数据……", "完成！"];
		if (window.XMLHttpRequest) {
		    x = new XMLHttpRequest();
		    x.open(method, url, async);
		    x.onreadystatechange = function(){
				if (x.readyState === 4) {
				    if (x.status === 200) {
						var data = {
						    text: x.responseText,
						    xml: x.responseXML
						};
						callback.call(this, data);
						setTimeout(function(){//延时关闭
						}, 200);
				    }
				    else{
				    	
				    }
				}
		    }
		    if (method.toLowerCase() === "post") {
				x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");				
		    }
		    x.send(data);
		}
		else {
		
		}
		return x;
	};

ZHJ.cssStyleCss3 = function(obj, name, value){
	    obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	    obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	    obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	    obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
	    obj.style[name]=value;
	};

ZHJ.cssStyle = function(obj, attr, value){/* 获取CSS值  给CSS赋值 */
		if(arguments.length==2)
			return obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];
		else if(arguments.length==3)
			switch(attr){
				case 'width':
				case 'height':
				case 'paddingLeft':
				case 'paddingTop':
				case 'paddingRight':
				case 'paddingBottom':
					value=Math.max(value,0);
				case 'left':
				case 'top':
				case 'right':
				case 'bottom':
				case 'marginLeft':
				case 'marginTop':
				case 'marginRight':
				case 'marginBottom':
					obj.style[attr]=value+'px';
					break;
				case 'opacity':
					obj.style.filter="alpha(opacity:"+value+")";
					obj.style.opacity=value/100;
					break;
				default:
					obj.style[attr]=value;
			}
		
		return function (attr_in, value_in){ZHJ.cssStyle(obj, attr_in, value_in)};
	}
	/*集合运动和弹性的框架
		startMove函数
			obj:运动的对象
			oTarget:哪些属性在变化，json格式
			iType:运动的格式
				BUFFER:平滑运动
				FLEX  :弹性运动
			fnCallBack:连续运动
	*/
	var V_MOVE_TYPE={
		BUFFER: 1,
		FLEX: 2
	};

ZHJ.moveModules.startMove = function(obj, oTarget, iType, fnCallBack, fnDuring){
		var fnMove=null;
		if(obj.timer){
			clearInterval(obj.timer);
		}
		iType == 'FLEX'?iType = V_MOVE_TYPE.FLEX:iType = V_MOVE_TYPE.BUFFER;//重新给iType赋值
		
		switch(iType){
			case V_MOVE_TYPE.BUFFER:
				fnMove=ZHJ.moveModules.doMoveBuffer;
				break;
			case V_MOVE_TYPE.FLEX:
				fnMove=ZHJ.moveModules.doMoveFlex;
				break;
		}
		
		obj.timer=setInterval(function (){
			fnMove(obj, oTarget, fnCallBack, fnDuring);
		}, 15);
	};

ZHJ.moveModules.doMoveBuffer = function(obj, oTarget, fnCallBack, fnDuring){
		var bStop=true;
		var attr='';
		var speed=0;
		var cur=0;
		
		for(attr in oTarget){
			//cur=ZHJ.cssStyle(obj, attr);
			
			cur = attr=='opacity'?parseInt(parseFloat(ZHJ.cssStyle(obj, attr))*100):parseInt(ZHJ.cssStyle(obj, attr));//获取对应样式的值

if(oTarget[attr]!=cur){
				bStop=false;
				
				speed=(oTarget[attr]-cur)/8;//速度
				speed=(speed>0)?Math.ceil(speed):Math.floor(speed);//向上向下取整
				
				ZHJ.cssStyle(obj, attr, cur+speed);//给对应样式负值
			}
		}
		
		if(fnDuring)fnDuring.call(obj);
		
		if(bStop){
			clearInterval(obj.timer);
			obj.timer=null;
			
			if(fnCallBack)fnCallBack.call(obj);
		}
	};

ZHJ.moveModules.doMoveFlex = function(obj, oTarget, fnCallBack, fnDuring){
		var bStop=true;//所有值是不是已经到达目标
		var attr='';
		var speed=0;
		var cur=0;
		
		for(attr in oTarget){
			if(!obj.oSpeed)obj.oSpeed={};
			if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
			cur = attr=='opacity'?parseInt(parseFloat(ZHJ.cssStyle(obj, attr))*100):parseInt(ZHJ.cssStyle(obj, attr));
			//cur=ZHJ.cssStyle(obj, attr);
			if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1){
				bStop=false;
				
				obj.oSpeed[attr]+=(oTarget[attr]-cur)/8;
				obj.oSpeed[attr]*=0.7;
				var maxSpeed=65;
				if(Math.abs(obj.oSpeed[attr])>maxSpeed){
					obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
				}
				
				ZHJ.cssStyle(obj, attr, cur+obj.oSpeed[attr]);
			}
		}
		
		if(fnDuring)fnDuring.call(obj);
		
		if(bStop){
			clearInterval(obj.timer);
			obj.timer=null;
			if(fnCallBack)fnCallBack.call(obj);
		}
	};
	//运动end--------
})(window);

</script>
</head>
<body>

<div id="prolist">
  <div id="J_ListContent" class="list-content">
    <ul class="main-view-list">
      <li class="list-item list-item-combine list-item-flag">
        <div class="list-ibox">
          <h3 class="title">
            <a data-spm="d11" href="#" class="J_ItemDesc">蝶臣 2012夏季新款 韩版时尚修身蝴蝶结雪纺短袖大码...</a>
          </h3>
          <div class="pic s220">
            
            <div class="love-hate-oprator hidden" style="opacity:0.9;">
              <div class="add-fast-table-pic">
              </div>
              <a class="add-fast-table-text" href="javascript:void(0);" hidefocus="true">喜欢</a>
              <a href="#" class="add-love-text">加入专辑</a>
            </div>
            
            <a data-spm="d11" href="#" target="_blank">
              <img  src="20129/52145/demo.jpg" width="220" height="220">
            </a>
            <span class="hate">不喜欢</span>
          </div>
          <span class="trade-num">最近成交18338笔</span>
          
          <ul class="attribute">
            <li class="price">
              <span class="normal"><em class="money">78.01</em><del class="money">108.00</del></span>
            </li>
            <li class="ship">运费:0.0</li>
            <li class="seller">
              <a data-spm="d21" href="#" target="_blank">蝶臣服饰旗舰...</a>
              <span class="ww-light ww-small">
                <a href="#" target="_blank" class="ww-inline ww-online" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"><span></span></a>
              </span>
            </li>
            <li class="place" style="line-">浙江杭州</li>
          </ul>
        </div>
      </li>
      <li class="list-item list-item-combine list-item-flag">
        <div class="list-ibox">
          <h3 class="title">
            <a data-spm="d11" href="#" class="J_ItemDesc">蝶臣 2012夏季新款 韩版时尚修身蝴蝶结雪纺短袖大码...</a>
          </h3>
          <div class="pic s220">
            
            <div class="love-hate-oprator hidden" style="opacity:0.9;">
              <div class="add-fast-table-pic">
              </div>
              <a class="add-fast-table-text" href="javascript:void(0);" hidefocus="true">喜欢</a>
              <a href="#" class="add-love-text">加入专辑</a>
            </div>
            
            <a data-spm="d11" href="#" target="_blank">
              <img  src="20129/52145/demo.jpg" width="220" height="220">
            </a>
            <span class="hate">不喜欢</span>
          </div>
          <span class="trade-num">最近成交18338笔</span>
          
          <ul class="attribute">
            <li class="price">
              <span class="normal"><em class="money">78.01</em><del class="money">108.00</del></span>
            </li>
            <li class="ship">运费:0.0</li>
            <li class="seller">
              <a data-spm="d21" href="#" target="_blank">蝶臣服饰旗舰...</a>
              <span class="ww-light ww-small">
                <a href="#" target="_blank" class="ww-inline ww-online" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"><span></span></a>
              </span>
            </li>
            <li class="place" style="line-">浙江杭州</li>
          </ul>
        </div>
      </li>
      <li class="list-item list-item-combine list-item-flag">
        <div class="list-ibox">
          <h3 class="title">
            <a data-spm="d11" href="#" class="J_ItemDesc">蝶臣 2012夏季新款 韩版时尚修身蝴蝶结雪纺短袖大码...</a>
          </h3>
          <div class="pic s220">
            
            <div class="love-hate-oprator hidden" style="opacity:0.9;">
              <div class="add-fast-table-pic">
              </div>
              <a class="add-fast-table-text" href="javascript:void(0);" hidefocus="true">喜欢</a>
              <a href="#" class="add-love-text">加入专辑</a>
            </div>
            
            <a data-spm="d11" href="#" target="_blank">
              <img  src="20129/52145/demo.jpg" width="220" height="220">
            </a>
            <span class="hate">不喜欢</span>
          </div>
          <span class="trade-num">最近成交18338笔</span>
          
          <ul class="attribute">
            <li class="price">
              <span class="normal"><em class="money">78.01</em><del class="money">108.00</del></span>
            </li>
            <li class="ship">运费:0.0</li>
            <li class="seller">
              <a data-spm="d21" href="#" target="_blank">蝶臣服饰旗舰...</a>
              <span class="ww-light ww-small">
                <a href="#" target="_blank" class="ww-inline ww-online" title="点此可以直接和卖家交流选好的宝贝，或相互交流网购体验，还支持语音视频噢。"><span></span></a>
              </span>
            </li>
            <li class="place" style="line-">浙江杭州</li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</div>

<div id="J_QlookPop" class="quicklook-grid" style="z-index:9995;min-left:9px;display:none;top:376px;visibility:visible;">
  <div class="lgi clearfix">
    <span class="lgi-b">预计
      <span class="h">3天</span>
      到北京(约<span class="h">13小时内</span>发货)
    </span>
    <s></s>
  </div>
  <div class="tbskip">
    <ul class="clearfix">
      <li>描述相符：4.8分 
        <span style="color:red">高于同行业25.46%</span>
      </li>
    </ul>
  </div>
</div>
<script type="text/javascript">
  (function(){
    ZHJ.ppt = function(id){
      var aLiAll = id.getElementsByTagName('li');
      var aLi = [];
      var aTop = ZHJ.getByClass(id,'love-hate-oprator hidden');
      var aBottom = ZHJ.getByClass(id,'list-ibox');
      var aImgBorder = ZHJ.getByClass(id,'pic s220');

for(var i=0;i<aLiAll.length;i++){
        if(aLiAll[i].className == 'list-item list-item-combine list-item-flag') aLi.push(aLiAll[i]);
      }
      for(var j=0;j<aLi.length;j++){
        var k=0;
        (function(j){
          aLi[j].onmouseover = function(){//LI 移上
            ZHJ.ppt.display_block(j);
            k=j;
          };
          $('J_QlookPop').onmouseover = function(){//隐藏div 移上
            ZHJ.ppt.display_block(k);
          };
          aLi[j].onmouseout = function(){//LI 移下
            ZHJ.ppt.display_hidden(j);
          };
          $('J_QlookPop').onmouseout = function(){//隐藏div 移下
            ZHJ.ppt.display_hidden(k);
          };
        })(j);
      }
      ZHJ.ppt.display_block = function(j){//LI div 移上
        ZHJ.cssStyle(aImgBorder[j],'border','1px solid #FEC794');//图片边框
        ZHJ.cssStyle(aImgBorder[j],'borderBottom','none');//图片边框

ZHJ.cssStyle(aBottom[j],'border','1px solid #FEC794');//原来价格这部分改变边框颜色
        aTop[j].className='love-hate-oprator';//喜欢编辑栏显示

ZHJ.cssStyle($('J_QlookPop'),'display','block');//显示下边多余的部分
        j==0?ZHJ.cssStyle($('J_QlookPop'),'left',251*j+(17-j*2)):ZHJ.cssStyle($('J_QlookPop'),'left',251*j+(17-j*2));//计算下边多余部分的位置
      };
      ZHJ.ppt.display_hidden = function(j){//LI div 移下
        ZHJ.cssStyle(aImgBorder[j],'border','1px solid #ddd');//图片边框
        ZHJ.cssStyle(aBottom[j],'border','1px solid #fff');//原来价格这部分改变边框颜色
        aTop[j].className='love-hate-oprator hidden';
        ZHJ.cssStyle($('J_QlookPop'),'display','none');
      };
    };
    ZHJ.classes.doWhileExists('J_ListContent',ZHJ.ppt);
  })();
</script>

</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js感应鼠标出现边框和说明的图片展示效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程