做任务拍照片赚钱的网站,优化设计电子版,电子商务网站建设的步骤过程,如何查看网站所用空间需求
☑ 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运行效果
原图片 点击后图片翻转 再次点击图片又翻转每次点击翻转一次。
