酷炫页面产品图片展示

青旅半醒 2022-06-16 06:57 239阅读 0赞

平时看惯了一些基本的图片展示效果，今天给大家分享一个比较酷炫页面产品图片展示，感觉用在黑科技展示的效果会更好一点。  
老规矩，先上图：  
![这里写图片描述][SouthEast]  
当我们拖动图片上那个红色的BAR时，作为分界线，两边的图片也会在各自和区域里显示自己的内容；  
HTML代码：

<div id="content">
        
        <div class="top">
            <img src="img/1.jpg" alt="" />
        </div>
        
        <div class="bottom">
            <img src="img/2.jpg" alt="" />
        </div>
        
        <div class="bar"></div>
    </div>

CSS代码：

*{ margin: 0; padding: 0; }
    #content{ width: 862px; height: 515px; border: 2px solid #000; margin: 20px auto; position: relative; }
    .top{ width: 50%; position: absolute; left:0; top :0;z-index: 1;overflow: hidden; }
    .bar{ width:10px; height:100%; background: red; position: absolute; left:50%;top:0; z-index: 2; }

JS代码：

<script> $(function(){ // 当鼠标在图片上移动 $('#content').bind('mousemove',function(e){ var fullWidth=$(this).width(),mouseX=e.pageX-$(this).offset().left; if(mouseX<0){ mouseX=0; }else if(mouseX>fullWidth){ mouseX=fullWidth; } $('.bar').css({left:mouseX, transition:'none'}); $('.top').css({width:mouseX, transition:'none'}); }); // 当鼠标离开图片 $('#content').bind('mouseleave',function(){ $('.bar').css({left:'50%', transition:'all 1s'}); $('.top').css({width:'50%', transition:'all 1s'}); }) }); </script>

[SouthEast]: /images/20220616/a1355062aeb34ae3b09e7f3a5e4eeb43.png

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关一个炫酷的动态背景页面

喜欢酷炫的页面，自从看了抖音的主页之后（如下）（链接），就决定要也做一个牛逼的动态背景页面对。。。背景是视频，而且还有音效，太牛逼了然后决定自己做一个，废话不说，先弄代

傷城~/ 2023年06月23日 10:56/ 0 赞/ 27 阅读

相关 Echarts炫酷配置

Echarts炫酷配置柱状图 grid: { top: "15%", left: "3%",

￡神魔★判官ぃ/ 2022年12月22日 08:42/ 0 赞/ 294 阅读

相关 android 图片闪电效果图,Android超简单实现炫酷的图片展示效果

目录 ![1a86d70c322d?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\

冷不防/ 2022年10月05日 09:51/ 0 赞/ 278 阅读

相关图片无缝滚动可做产品展示

[下载地址][Link 1] 图片无缝滚动可做产品展示 ![efb2aadff5e5ac9b224173d30dd28ec0240084\_s.png][efb2aadff

灰太狼/ 2022年09月14日 00:28/ 0 赞/ 163 阅读

相关 10个炫酷的网站产品卡的实现案例

![127aa675f9981148b72a07c31cea642b.png][] 英文 | https://niemvuilaptrinh.medium.com/what-

ゞ浴缸里的玫瑰/ 2022年09月14日 00:20/ 0 赞/ 194 阅读

相关酷炫404页面代码js动画

[下载地址][Link 1]酷炫404页面代码js动画，404数字滚动变化动态效果。 ![1631561002.png][] dd: [Link 1]: https:/

落日映苍穹つ/ 2022年09月12日 04:40/ 0 赞/ 250 阅读

相关炫酷Button样式

平时我们所用的Button样式过于单一，不怎么好看，帮助基础的同学们学会使用Style改变Button样式，我简单的写一点东西 <span style="font-s

你的名字/ 2022年07月16日 05:22/ 0 赞/ 265 阅读

相关酷炫页面产品图片展示

平时看惯了一些基本的图片展示效果，今天给大家分享一个比较酷炫页面产品图片展示，感觉用在黑科技展示的效果会更好一点。老规矩，先上图： ![这里写图片描述][SouthE

青旅半醒/ 2022年06月16日 06:57/ 0 赞/ 240 阅读

相关一个炫酷大屏展示页的打造过程

> 作者：韩永豪移动开发部前端开发工程师今年的11月初，我们公司参加了「2017年亚洲幼教年会(APEAC)」并取得了很不错的成果。本人有幸负责关于这次展

古城微笑少年丶/ 2022年06月04日 09:28/ 0 赞/ 225 阅读

相关炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大，我们这里有很多关于jQuery焦点图的插件，今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用，有些也是焦点图插件，一起来看看吧。

墨蓝/ 2022年05月26日 09:18/ 0 赞/ 220 阅读