京东首页闪光滑动效果小记（转载）

http://www.w3cfuns.com/blog-5473326-5409149.html

<html>
<head>
<style>
.overimg{
position: relative;
display: block;
overflow: hidden;
box-shadow: 0 0 10px #FFF;
width:180px;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top: 0;
width: 180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
left:180px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a>
<i class="light"></i>
</p>
<a href="http://www.nowamagic.net/librarys/veda/detail/2600" target="_blank"> 最后附上原效果地址,原效果未加overflow:hidden和设置p的宽度，作者进行了一些小小的优化</a>
</body>
</html>

时间： 2024-11-29 12:50:42

京东首页闪光滑动效果小记（转载）的相关文章

安卓首页图片轮播效果(淘宝、京东首页广告效果)

直奔主题: 1.主要原理就是利用定时任务器定时切换ViewPager的页面. 2.里面用了一个读取网络图片的插件.做client使用本地图片轮播的也非常少. 先上个效果图: 项目代码结构截图: 自己定义View 的布局文件layout_slideshow.xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.and

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用JQ来仿造下这种效果的实现方式,其实挺简单. 首先我是做了2个gif分别作为图标的默认状态和动画状态(注意第二个gif的动画效果只显示一次,不循环的,而且是从下往上<做的着急了点,跟京东的动画方向相反了哈哈>,错过效果的朋友请刷新吧):        P.S. 京东的动画效果并非用动态gif实现的,

Android 自定义 HorizontalScrollView 打造再多图片（控件）也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr

UI--单行文本水平触摸滑动效果

<代码里的世界> -UI篇 用文字札记描绘自己 android学习之路 转载请保留出处 by Qiao http://blog.csdn.net/qiaoidea/article/details/45115047 [导航] - 单行文本水平触摸滑动效果 通过EditText实现TextView单行长文本水平滑动效果 - 多行文本折叠展开 自定义布局View实现多行文本折叠和展开 1.初衷 最近做应用的时候有用到TextView单行长文本,当文本内容过长时候又想实现触摸水平滑动效果.网上找了很多

仿京东首页，浏览器兼容小结

练习做了一个京东首页,使用不同浏览器测试了一下,发现了不少的问题,做一下总结. 地址:https://zhangcuizc.github.io/jd-new/ 1.IE10 在IE10中基本正常,主要的问题是设置了链接的图片在IE10中都会有一个边框,不仅丑而且导致部分地方布局混乱,当然解决方法也很简单,在reset.css中重置所有图片的边框样式即可: img{ border:none; } 2.IE9 IE9中主要有两个问题,一是不支持linear-gradient,所以使用渐变作为背景色会

Android实现渐显按钮的左右滑动效果

本示例演示在Android中实现带渐显按钮的左右滑动效果. 关于滑动效果,在我的上一篇博文中提到过,有兴趣的朋友可以访问: http://www.cnblogs.com/hanyonglu/archive/2012/02/13/2349827.html 如果大家想实现带指引效果的左右滑动,请访问博文:http://www.cnblogs.com/hanyonglu/archive/2012/04/07/2435589.html 先看下运行效果:    程序结构: MainActivity文件中代

Android实现左右滑动效果

本示例演示在Android中实现图片左右滑动效果.   关于滑动效果,在Android中用得比较多,本示例实现的滑动效果是使用ViewFlipper来实现的,当然也可以使用其它的View来实现.接下来就让我们开始实现这种效果.为了方便大家理解,我们先来看一下效果图: 主要效果图如下图:    接下来我们看一下程序结构图: MainActivity文件中代码: package com.android.flip; import android.app.Activity; import android

Js效果：图片轮播；选项卡；侧面菜单下拉效果;进度条效果；滑动效果；好友列表选中效果；点击选中显示效果

选项卡效果表: <body><div id="aaa"> <div class="bbb" style="width:50px; height:30px; background-color:#3F0" onclick="Show('d1')">娱乐</div> <div class="bbb" style="width:50px; height

Android开发心得——viewpager调用setCurrentItem设页面没有滑动效果？我来帮你

本博文欢迎转载,转载请注明来自唔系好人之Android小码农 最近做项目,遇到一个焦点图的问题,而我,在这段时间可以说是viewpager的爱好者,虽然有很多优秀的开源项目,但是我还是想要研究一下,viewpager,怎么自己做带有滑动效果的焦点图切换. 通过一轮的网络搜索,最终研究到一个方法通过反射来获取viewpager的内部属性,然后设置他的滑动属性. 说实话,对于我这种半路出家的和尚来说,反射是个什么真的不懂,我也是听同事说的,他这个反射的作用就是强制获取了一个并不公开的内部属性,并修改