购物车动画
来源：互联网 发布：易语言数据库排序 编辑：程序博客网 时间：2024/05/16 03:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 不允许用户点击屏幕放大浏览 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>购物车动画</title>
<link rel="icon" type="image/x-icon" href="http://mat1.gtimg.com/www/icon/favicon2.ico">
</head>
<style type="text/css">
html,body{font-family: "微软雅黑";font-size: 14px;background-color: gainsboro;}
body,h1,h2,h3,h4,h5,div,span,p,ul,ol,dl,dt,dd,a,input,img,select{margin: 0;padding: 0;list-style: none;border: 0;font-weight: normal;outline: none;}
.content{width: 100%;margin: auto;max-width: 1920px;margin-bottom: 55px;position: relative;}
.bottom{position: fixed;width: 100%;height: 50px;bottom: 0;left: 0;z-index: 100;border-top: 1px solid red;background-color: white;}
.bottom ul{width: 100%;height: 100%;}
.bottom ul li{float: left;width: 25%;text-align: center;line-height: 50px;}
.content>div{width: 100%;}
.top{height: 145px;overflow: hidden;}
.top img{width: 100%;}
.list{width: 100%;height: auto;}
.list li{padding: 15px;height: 75px;background-color: white;margin-bottom: 5px;}
.list li img{width: 75px;height: 75px;}
.list li input{width: 80px;height: 28px;color: white;background-color: #12b212;float: right;}
/**/
.ani{position: absolute;z-index: 101;left: 25px;width: 55px;height: 55px;border-radius: 50%;background-color: red;
transition: all 0.5s ease-in;background-size: 100%;}
</style>
<body>
<div class="content">
<div class="top">
<img src="http://wx.rdkj.com/Upload/AdvertImg/636433515497710365_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171011204433.jpg"/>
</div>
<ul class="list">
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403803104938612_%E9%BB%84%E5%BF%83%E7%99%BD.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403823484177046_%E7%A7%98%E5%88%B6%E7%83%A7%E9%B9%85.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403825312936810_%E9%BB%91%E5%8A%A0%E5%AE%9D_%E9%BB%91%E5%9C%9F%E7%8C%AA_%E9%B2%9C%E6%8E%92%E9%AA%A8.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636404643835591559_%E9%87%91%E9%93%B6%E7%8E%89%E7%B1%B3.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636440225992610126_636435111781290192_%E5%B1%B1%E9%AB%98%E8%9F%B9_%E5%B0%81%E9%9D%A2%E5%9B%BE300.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636473763375572883_%E5%B0%81%E9%9D%A2%E5%9B%BE%E2%80%94%E2%80%94%E4%BC%91%E7%9C%A0%E9%B2%9C%E9%B8%A1%EF%BC%88%E9%BB%84%E8%89%B2%E5%8C%85%E8%A3%85%E6%B8%85%E8%BF%9C%E9%B8%A1%EF%BC%89.jpg"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636480691787328821_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171205110901.jpg"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403809346598982_%E7%94%9F%E8%8F%9C.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636423085344370115_%E7%B2%BE%E5%93%81%E5%A5%BD%E8%B4%A7.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636423085739809770_%E5%8D%97%E7%93%9C.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
</ul>
</div>
<div class="ani"></div>
<!---->
<div class="bottom">
<ul>
<li>首页</li>
<li>分类</li>
<li class="goods">购物车</li>
<li>我的</li>
</ul>
</div>
</body>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var h=$(window).height();
var scrolltop =0;
$(window).scroll(function(){
scrolltop=$(this).scrollTop();
console.log(scrolltop)
})
$('.list input').click(function(){
var i=$(this).parent('li').index();
var img=$('.list li').eq(i).find('img').attr('src');
console.log(img);
var goodsY = $('.goods').offset().top;
var clickY=$(this).offset().top;
$('.ani').css({'top':clickY,'background':'url('+img+') center center no-repeat','background-size':'100%'});
var translateY=goodsY-clickY;
$('.ani').css({'transform':'translate(185px,'+translateY+'px) scale(0.1)'})
setTimeout(function(){
$('.ani').css({'transform':'none','top':'auto','background':'none'})
},500)
})
})
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<!-- 不允许用户点击屏幕放大浏览 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>购物车动画</title>
<link rel="icon" type="image/x-icon" href="http://mat1.gtimg.com/www/icon/favicon2.ico">
</head>
<style type="text/css">
html,body{font-family: "微软雅黑";font-size: 14px;background-color: gainsboro;}
body,h1,h2,h3,h4,h5,div,span,p,ul,ol,dl,dt,dd,a,input,img,select{margin: 0;padding: 0;list-style: none;border: 0;font-weight: normal;outline: none;}
.content{width: 100%;margin: auto;max-width: 1920px;margin-bottom: 55px;position: relative;}
.bottom{position: fixed;width: 100%;height: 50px;bottom: 0;left: 0;z-index: 100;border-top: 1px solid red;background-color: white;}
.bottom ul{width: 100%;height: 100%;}
.bottom ul li{float: left;width: 25%;text-align: center;line-height: 50px;}
.content>div{width: 100%;}
.top{height: 145px;overflow: hidden;}
.top img{width: 100%;}
.list{width: 100%;height: auto;}
.list li{padding: 15px;height: 75px;background-color: white;margin-bottom: 5px;}
.list li img{width: 75px;height: 75px;}
.list li input{width: 80px;height: 28px;color: white;background-color: #12b212;float: right;}
/**/
.ani{position: absolute;z-index: 101;left: 25px;width: 55px;height: 55px;border-radius: 50%;background-color: red;
transition: all 0.5s ease-in;background-size: 100%;}
</style>
<body>
<div class="content">
<div class="top">
<img src="http://wx.rdkj.com/Upload/AdvertImg/636433515497710365_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171011204433.jpg"/>
</div>
<ul class="list">
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403803104938612_%E9%BB%84%E5%BF%83%E7%99%BD.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403823484177046_%E7%A7%98%E5%88%B6%E7%83%A7%E9%B9%85.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403825312936810_%E9%BB%91%E5%8A%A0%E5%AE%9D_%E9%BB%91%E5%9C%9F%E7%8C%AA_%E9%B2%9C%E6%8E%92%E9%AA%A8.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636404643835591559_%E9%87%91%E9%93%B6%E7%8E%89%E7%B1%B3.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636440225992610126_636435111781290192_%E5%B1%B1%E9%AB%98%E8%9F%B9_%E5%B0%81%E9%9D%A2%E5%9B%BE300.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636473763375572883_%E5%B0%81%E9%9D%A2%E5%9B%BE%E2%80%94%E2%80%94%E4%BC%91%E7%9C%A0%E9%B2%9C%E9%B8%A1%EF%BC%88%E9%BB%84%E8%89%B2%E5%8C%85%E8%A3%85%E6%B8%85%E8%BF%9C%E9%B8%A1%EF%BC%89.jpg"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636480691787328821_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20171205110901.jpg"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636403809346598982_%E7%94%9F%E8%8F%9C.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636423085344370115_%E7%B2%BE%E5%93%81%E5%A5%BD%E8%B4%A7.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
<li>
<img src="http://wx.rdkj.com/Upload/Shop/636423085739809770_%E5%8D%97%E7%93%9C.png"/>
<input type="button" name="" id="" value="立即购买" />
</li>
</ul>
</div>
<div class="ani"></div>
<!---->
<div class="bottom">
<ul>
<li>首页</li>
<li>分类</li>
<li class="goods">购物车</li>
<li>我的</li>
</ul>
</div>
</body>
<script src="http://mat1.gtimg.com/tech/css/huiyan/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var h=$(window).height();
var scrolltop =0;
$(window).scroll(function(){
scrolltop=$(this).scrollTop();
console.log(scrolltop)
})
$('.list input').click(function(){
var i=$(this).parent('li').index();
var img=$('.list li').eq(i).find('img').attr('src');
console.log(img);
var goodsY = $('.goods').offset().top;
var clickY=$(this).offset().top;
$('.ani').css({'top':clickY,'background':'url('+img+') center center no-repeat','background-size':'100%'});
var translateY=goodsY-clickY;
$('.ani').css({'transform':'translate(185px,'+translateY+'px) scale(0.1)'})
setTimeout(function(){
$('.ani').css({'transform':'none','top':'auto','background':'none'})
},500)
})
})
</script>
</html>
阅读全文
0 0
- 实现购物车动画
- 购物车动画
- 添加购物车动画
- 购物车动画
- 购物车的动画
- 加入购物车动画
- 加入购物车动画
- 购物车动画(Android)
- 购物车动画
- 动画+购物车+加到购物车
- IOS 加入购物车动画
- js加入购物车动画
- 添加购物车动画实现
- 淘宝购物车,点击动画
- 加入购物车 动画效果
- Android 加入购物车动画
- Juqery购物车实现动画
- 购物车动画-贝塞尔曲线
- matlab 中的del2函数
- jsonp跨域请求具体写法(原生,jquery,angular自定义服务)
- js作用域
- 【Python实战】Pandas：让你像写SQL一样做数据分析（一）
- hdoj 1016 素数环
- 购物车动画
- LeetCode 121、122、123、188：Best Time to Buy and Sell Stock
- 总结-2017/12/7
- JAVA的循环结构①
- Monitor项目开发走过的路~透明效果的实现
- 趣图 | 你处在编程的哪个阶段？（另附肩膀放松小窍门~）
- 【Android 屏幕适配】 屏幕适配
- 函数提升面试题
- 辉煌十载！BDTC 2017 中国大数据技术大会在京盛大召开
