这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
放大镜大家在各大网站都能见到,下面小编给大家分享一段 ,代码是基于原生 js 实现的放大镜效果,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
这是我用原生 js 写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的 js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好。
- <!DOCTYPE html>
- <html>
- <head>
- <title>js放大镜效果</title>
- <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
- <style>
- *{
- margin:0px;
- padding:0px;
- border:none;
- list-style:none;
- }
- #box{
- margin:80px auto;
- width: 352px;
- }
- #box p
- {
- width: 350px;
- height: 350px;
- border: 1px solid #ddd;
- margin-bottom: 5px;
- }
- #box p img
- {
- width:350px;
- height:350px;
- }
- #box h1
- {
- width: 352px;
- height: 54px;
- overflow:hidden;
- position:relative;
- }
- #box h1 div
- {
- width:310px;
- height: 54px;
- margin:0px auto;
- position:relative;
- }
- #box h1 div ul
- {
- position:absolute;
- left: 0px;
- top: 0px;
- }
- #box h1 ul li
- {
- width: 62px;
- float: left;
- }
- #box h1 ul li img
- {
- width: 50px;
- height: 50px;
- padding: 1px;
- border: 1px solid #CECFCE;
- }
- #box h1 img.hoveredThumb{
- border: 2px solid #e4393c;
- padding: 0;
- }
- /*中等大小的图片显示区域*/
- p#medImgBox{
- position: relative;
- }
- #jing{
- position: absolute;
- left: 0;
- top: 0;
- width: 175px;
- height: 175px;
- border-radius:50%;
- background: #ffd;
- opacity: 0.7;
- display: none;
- }
- /*悬于图片/jing上方的专用于接收鼠标移动事件的
- 一个完全透明的层*/
- #medImgBox #mian{
- display: block;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- cursor: move;
- opacity: 0;
- }
- /**
- 大图显示区域
- **/
- #largeImgBox{
- position:absolute;
- width: 175px;
- height: 175px;
- border-radius:50%;
- border: 1px solid #faa;
- top: 0px;
- left: 352px;
- overflow: hidden;
- display: none;
- }
- #largeImg{
- display: none;
- position: absolute;
- }
- </style>
- </head>
- <body >
- <div id="box">
- <p id="medImgBox">
- <img id="mediumImg" src="images/product-s1-m.jpg" />
- <span id="jing"></span>
- <span id="mian"></span>
- <span id="largeImgBox">
- <img id="largeImg"/>
- </span>
- </p>
- <h1>
- <div>
- <ul id="list">
- <li><img src="images\product-s1.jpg" /></li>
- <li><img src="images\product-s2.jpg" /></li>
- <li><img src="images\product-s3.jpg" /></li>
- <li><img src="images\product-s4.jpg" /></li>
- <li><img src="images\product-s1.jpg" /></li>
- </ul>
- </div>
- </h1>
- </div>
- <script>
- var imgList = document.querySelectorAll('#box ul li img');
- for(var i=0; i<imgList.length; i++){
- var img = imgList[i];
- img.onmouseover = changeThumbImg;
- }
- function changeThumbImg(){
- var previousHovered = document.querySelector('.hoveredThumb');
- if(previousHovered==null){
- this.className = 'hoveredThumb';
- changeMediumImg(this.src); //修改中等图片的src
- }else if(previousHovered!=this){
- previousHovered.removeAttribute('class');
- this.className = 'hoveredThumb';
- changeMediumImg(this.src); //修改中等图片的src
- }
- }
- function changeMediumImg(thumbSrc){
- var dotIndex = thumbSrc.lastIndexOf('.');
- var prefix = thumbSrc.substring(0, dotIndex);
- var suffix = thumbSrc.substring(dotIndex);
- var mediumSrc = prefix + '-m'+suffix;
- document.getElementById('mediumImg').src = mediumSrc;
- }
- /**
- 为放大镜jing添加鼠标移动事件
- **/
- document.querySelector('#mian').onmousemove =
- function(event){
- var x = event.offsetX; //事件相对于事件源的偏移量
- var y = event.offsetY;
- var jing = document.getElementById('jing');
- var w = jing.offsetWidth; //jing的宽和高
- var h = jing.offsetHeight;
- var left = x<w/2 ? 0 : (x-w/2);
- var top = y<h/2 ? 0 : (y-h/2);
- if(x>(w*2-w/2)){
- left = w*2 - w;
- }
- if(y>(h*2-h/2)){
- top = h*2 - h;
- }
- jing.style.left = left+'px';
- jing.style.top = top+'px';
- //修改大图的位置/
- var largeImg = document.getElementById('largeImg');
- largeImg.style.left = (-left*largeImg.width/350) + 'px';
- largeImg.style.top = (-top*largeImg.height/350)+'px';
- }
- document.querySelector('#mian').onmouseover = function(){
- //显示jing
- var jing = document.getElementById('jing');
- jing.style.display = 'block';
- var largeImgBox = document.getElementById('largeImgBox');
- largeImgBox.style.display = 'block';
- //获取当前要显示的大图的src
- var src = document.querySelector('#mediumImg').src;
- var dotIndex = src.lastIndexOf('.');
- var prefix = src.substring(0, dotIndex-2);
- var suffix = src.substring(dotIndex);
- src = prefix + '-l'+ suffix;
- var largeImg = document.getElementById('largeImg');
- largeImg.src = src;
- largeImg.style.display='block';
- }
- document.querySelector('#mian').onmouseout =
- function(){
- //除去jing
- var jing = document.getElementById('jing');
- jing.style.display = 'none';
- //除去大图显示区
- document.getElementById('largeImgBox').style.display = 'none';
- }
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的原生 JS 实现的放大镜效果实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0520/331165.html