复制代码 代码如下:
/*放大镜*/
.ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;}
.ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;}
.ZoomMain .zoom .move{position:absolute;left:0; top:0;display:none;width:195px; height:195px;background:#000;opacity:0.2;filter:Alpha(Opacity=20);}
.ZoomMain .zoomDetail{display:none;border:1px solid #DCDDDD;width:393px; height:393px; position:absolute;right:-405px;top:0px; overflow:hidden;}
.littleImg {margin-top:10px;height:54px;overflow:hidden;position:relative;}
.littleImg span {position: absolute;display:block;width:10px;height:55px;background:#999;cursor:pointer;}
.littleImg span em {display: none;width:10px;height:55px;}
.littleImg span.btnL {left:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left top;}
.littleImg span.btnL em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat left -57px;}
.littleImg span.btnR em {background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px -57px;}
.littleImg span.btnR {right:0;background: url(oohdear/images/cssPos/UltimatePageCssPos.gif) no-repeat -10px top;}
.littleImg span.hover em {display:block;}
.littleImg .slideMain {width:343px;height:55px;margin-left:26px;overflow:hidden;position:relative;}
.littleImg .slideMain ul {position:absolute;left:0;width:355px;padding-top:1px;}
.littleImg .slideMain ul li {float:left;margin-right:6px;cursor:pointer;width:50px;height:50px;border:1px solid #dbdbdb;}
.littleImg .slideMain ul li.selected {border-color:#999;}
.littleImg .slideMain ul li img {float:left;width:50px;height:50px;}
/*放大镜end*/
</style>
</head>
<body>
<!--放大镜-->
<div class="ZoomMain">
<div class="zoom">
<span class="move"></span>
<img width="393" height="390" src="/UploadFiles/2021-04-02/1347000569971.jpg"> </div>
<div class="littleImg">
<span class="btnL"><em></em></span>
<span class="btnR"><em></em></span>
<div class="slideMain">
<ul class="clearfix">
<li class="selected"><img width="50" height="50" src="/UploadFiles/2021-04-02/1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> <li><img width="50" height="50" src="1347000569971.jpg"> <li><img width="50" height="50" src="1347000590691.jpg"> </ul>
</div>
</div>
<div class="zoomDetail">
<img width="701" height="701" src="/UploadFiles/2021-04-02/1347000569971.jpg"> </div>
</div>
<!--放大镜end-->
?<script type="text/javascript">
/**
@开发：杨永
@功能：实现细节放大，图片对应切换，自由定义css样式实现自由铺满视口等功能
@说明：基于jQ的放大镜插件，可根据需要自由调整布局来适应各种设计效果
*/
(function(){
function Zoom(object){
this.zoomArea=$(".zoom",object);//保存促发放大效果的区域
this.moveArea=$(".move",object);//保存移动区域
this.zoomDetail=$(".zoomDetail",object);//保存放大镜区域
this.zoomDetailImg=$("img",this.zoomDetail);//保存放大镜里面的图
this.zoomAreaWidth=this.zoomArea.width();
this.moveAreaWidth=this.moveArea.width();
this.zoomAreaHeight=this.zoomArea.height();
this.moveAreaHeight=this.moveArea.height();
this.zoomDetailWidth=this.zoomDetail.width();
this.zoomDetailHeight=this.zoomDetail.height();
this.zoomAreaOffset=this.zoomArea.offset();//初始化放大区域在视口中的相对偏移;
this.XY=null;//初始化鼠标相对于放大区域的偏移偏移值
this.moveBili=null;//
var _this_=this;
this.zoomArea.mousemove(function(e){//当鼠标在放大区域移动的时候执行
_this_.move(e.pageX,e.pageY);
}).mouseover(function(){
_this_.moveArea.show();
_this_.zoomDetail.show();
}).mouseout(function(){
_this_.moveArea.hide();
_this_.zoomDetail.hide();
});
this.calculate();//初始化并计算出需要的比例值
//以下是小图部分的功能实现
this.l=0;
this.scrollObj=$(".slideMain ul",object);//保存ul滚动对象
this.lis=this.scrollObj.children();//保存小图片列表
this.btnR=$(".btnR",object);//保存右边按钮
this.btnL=$(".btnL",object);//保存左边边按钮
this.lis.click(function(){
_this_.changeImgSrc(this);
});
if(this.lis.length>6){//判断图片数是否超出显示区域，是的话就注册滚动事件
this.s=this.lis.length-6;//获取多余出来的图片数
this.scrollObj.width(60*this.lis.length+"px");//当图片数超出默认值时，设置ul的宽度
this.btnL.click(function(){_this_.scrollRight();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});
this.btnR.click(function(){_this_.scrollLeft();}).mouseover(function(){$(this).addClass("hover")}).mouseout(function(){$(this).removeClass("hover");});;
}
};
Zoom.prototype={
scrollLeft:function(){
if(Math.abs(this.l)==this.s){return};
this.l--;
this.scrollObj.animate({left:this.l*58+"px"},"fast");
},
scrollRight:function(){
if(this.l==0){return};
this.l++;
this.scrollObj.animate({left:this.l*58+"px"},"fast");
},
changeImgSrc:function(o){
//改变标识样式
$(o).addClass("selected").siblings().removeClass("selected");
this.zoomArea.find("img").attr("src",$(o).find("img").attr("medium-img"));
this.zoomDetailImg.attr("src",$(o).find("img").attr("medium-img"));
},
move:function(x,y){//鼠标在放大区域移动的时候执行的函数
this.XY=this.mousePosAndSetPos(x,y);//计算出鼠标相对于放大区域的x,y值
//设置滑块的位置
this.moveArea.css({
left:this.XY.offsetX+"px",
top:this.XY.offsetY+"px"
});
//设置大图在细节位置
this.zoomDetailImg.css({
marginLeft:-this.XY.offsetX*this.moveBili+"px",
marginTop:-this.XY.offsetY*this.moveBili+"px"
});
},
mousePosAndSetPos:function(x,y){//实时计算并设置滑块的位置
x=x-this.zoomAreaOffset.left-this.moveArea.width()/2;
y=y-this.zoomAreaOffset.top-this.moveArea.height()/2;
x=x<0?0:x;
y=y<0?0:y;
x=x>(this.zoomAreaWidth-this.moveAreaWidth)?this.zoomAreaWidth-this.moveAreaWidth:x;
y=y>(this.zoomAreaHeight-this.moveAreaHeight)?this.zoomAreaHeight-this.moveAreaHeight:y;
return {
offsetX:x,
offsetY:y
};
},
calculate:function(){//计算函数
var widthBili,heightBili;
//计算移动的滑块与放大镜铺面显示的比例宽高
widthBili=(this.zoomAreaWidth*this.zoomDetailWidth)/this.moveAreaWidth;
heightBili=(this.zoomAreaHeight*this.zoomDetailHeight)/this.moveAreaHeight;
//把比出来的宽高
this.zoomDetailImg.css({width:widthBili+"px",height:heightBili+"px"});
//返回移动的比例
this.moveBili=(widthBili-this.zoomDetailWidth)/(this.zoomAreaWidth-this.moveAreaWidth);
}
};
var zoom=new Zoom($(".ZoomMain").eq(0));
})();
jquery,放大镜
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。