下载别人网站的asp,企业营销型网站策划书,dede手机网站教程,网站建设导航图图库需求
☑ h5 实现点击图片得到的是放大的镜像图片#xff08;不是放大镜效果 而是实现图片镜像对折#xff0c;左右翻转#xff09; ☑ 鼠标点击后原图消失/隐藏#xff0c;在原来的位置上取而代之的是翻转后的图#xff08;除了翻转之外不要改变其他的性质#xff0c;比…需求
☑ h5 实现点击图片得到的是放大的镜像图片不是放大镜效果 而是实现图片镜像对折左右翻转 ☑ 鼠标点击后原图消失/隐藏在原来的位置上取而代之的是翻转后的图除了翻转之外不要改变其他的性质比如尺寸大小之类的 实现每次点击图片都会翻转一次 ☑ 只想要点击图片时实现单张图片的翻转效果而不显示镜像图片
代码实现
style.container {position: relative;width: 400px;}.image {width: 100%;cursor: pointer;}
/stylediv classcontainerimg classimage srcimage.jpg altImage
/divscriptconst image document.querySelector(.image);let isFlipped false;image.addEventListener(click, function() {if (!isFlipped) {image.style.transform scaleX(-1);isFlipped true;} else {image.style.transform none;isFlipped false;}});
/script运行效果
原图片 点击后图片翻转 再次点击图片又翻转每次点击翻转一次。
