酷炫页面产品图片展示

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

当我们拖动图片上那个红色的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><!-- 中间红色的Bar --><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>

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

Android之——史上最简单最酷炫的3D图片浏览效果的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量 ...
JS特效代码大全（十一）超炫的js图片展示效果（三）
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
html超酷图片墙特效代码,超酷超绚精美图片展示效果代码(一)
超酷超绚精美图片展示效果代码(一) [ 发布者:未知┊来源:网页特效观止┊时间:2008-08-12┊浏览: 人次 ] 相关图片自己下载,所有的图片路径都是类似 http://www.jscode.c ...
华丽大气酷炫光斑特效LOGO展示PR片头模板
华丽大气Premiere酷炫光斑特效LOGO展示PR片头模板,散景视觉效果和玻璃光反射以及梦幻般的粒子.水晶和优雅的钟声,为您的顶级品牌营造出积极的形象! 非常简单的背景颜色选择以匹配您的logo. ...
【进阶版九宫格背景图片】如何仅仅依靠background的几个属性组合搭配出酷炫的背景图片效果，并自适应任何宽高效果？
如果你要有透明度效果的背景图请移步https://blog.csdn.net/qq_37860634/article/details/119591991 这是我们最终想要达到的效果,并且支持任意宽高缩 ...
【易语言小菜鸟】制作一款产品图片展示器，点击按钮切换产品图，易语言组件图片框的实际应用
对于一些企业在向客户展示产品图时,特别是当图片众多时,一张张传送显得很麻烦,并且还会打乱图像顺序,客户体验会很差,于是就开发了一款图片展示小软件,也是易语言中最简单的小程序了,只用上了组件中的按钮和图 ...
html图片点击左右滑动效果,jQuery点击左右滚动产品图片展示代码
基于jQuery的产品图文展示代码,可实现点击左右滚动,自动滚动.动态效果还不错.基于jQuery的产品图文展示jQuery插件stepcarousel.js. 配置注意下面几处的ID,要与HTML结 ...
重写 View 的 Touch 方法，实现一个酷炫的九宫格图片
前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家? 废话不多说,上图,先看看效果 photosView.gif 怎么样,是不是还蛮有意思呢? 实现起来非常简单,我们只需要重写几个 V ...
（转载）酷炫桌面背景图片，实用命令图片
这是在优麒麟某个帖子上看到的. http://www.ubuntukylin.com/ukylin/forum.php?mod=viewthread&tid=28194 这是链接原地址,上面有 ...

酷炫页面产品图片展示

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

最新文章

热门文章