js模拟动画之 商品展示效果

最新推荐文章于 2022-05-29 09:03:39 发布
最新推荐文章于 2022-05-29 09:03:39 发布
阅读量202 收藏
点赞数
文章标签： JavaScript ViewUI
<HEAD>
<TITLE>方框移动</TITLE>
<metahttp-equiv="Content-Type"content="text/html;charset=GBK">
<stylelanguage="javascript">
<!--
body,td{
font-size:9pt;
}
.hidden{display:none;}
.show{display:block;}
#fk{overflow:hidden;}
.default{background:white;color:blue;cursor:pointer;}
.highlight{background:blue;color:white;}
-->
</style>
</HEAD>
<BODY>
<SCRIPTLANGUAGE="JavaScript">
<!--
varspeed=10;//速度
varci=10;//运动次数
varleft=0;//方框左位置
vartop=0;//方框上位置
varwidth=0;//方框宽
varheight=0;//方框高
varaimleft=0;//目标左位置
varaimtop=0;//目标上位置
varaimwidth=0;//目标宽
varaimheight=0;//目标高
varlb=0;//左步长
vartb=0;//上步长
varwb=0;//宽步长
varhb=0;//高步长
varfk=null;
varaim=null;
varaim1=null;
varlastObj=null;
functioninitObj(oid){
if(!fk){fk=document.getElementById('fk');}
if(!aim){aim=document.getElementById('aim');}
if(!aim1)aim1=document.getElementById('aim1');
if(oid)
append(fk,document.getElementById(oid),true);
}
functionappend(o,oc,cloned){
while(o.hasChildNodes())o.removeChild(o.firstChild);
if(cloned)oc=oc.cloneNode(true);
oc.className='show';
o.appendChild(oc);
}
/*
*取得对象位置、大小
*取得目标对象位置、大小
*/
functionsetSource(obj,oid){
initObj(oid);
left=getOffset(obj).Left;
top=getOffset(obj).Top;
width=obj.offsetWidth;
height=obj.offsetHeight;
aimleft=getOffset(aim).Left;
aimtop=getOffset(aim).Top;
aimwidth=aim.offsetWidth;
aimheight=aim.offsetHeight;
if(lastObj)lastObj.className='default';
obj.className='highlight';
lastObj=obj;
fk.style.display='';
clearInterval(MyMar);
}
/**
*设置方向步长、宽高步长
*/
functionsetStep(){
lb=(aimleft-left)/ci;
tb=(aimtop-top)/ci;
wb=(aimwidth-width)/ci;
hb=(aimheight-height)/ci;
}
/**
*移动
*/
functionmove(){
setStep();
left+=lb;
top+=tb;
width+=wb;
height+=hb;
if(left<aimleft-2||top<aimtop-2||width<aimwidth-2||height<aimheight-2){
fk.style.left=left+"px";
fk.style.top=top+"px";
fk.style.width=width+"px";
fk.style.height=height+"px";
}else{
if(fk)
while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
hiddenFK();
clearInterval(MyMar)
}
}
functionhiddenFK(){
initObj();
fk.style.display='none';
}
/**
*取得某元素在页面中相对页面左上顶点的位置
*/
functiongetOffset(obj){
varoffsetleft=obj.offsetLeft;
varoffsettop=obj.offsetTop;
while(obj.offsetParent!=document.body)
{
obj=obj.offsetParent;
offsetleft+=obj.offsetLeft;
offsettop+=obj.offsetTop;
}
return{Left:offsetleft,Top:offsettop};
}
varMyMar=setInterval(move,speed);
//-->
</SCRIPT>
<divid="fk"style="position:absolute;width:46px;height:20px;border:1pxsolid#000000;display:none"></div>
<TABLEstyle="border:1pxsolid#666666"cellspacing=1bgcolor=#ff1111cellpadding=4border=0>
<TRbgcolor=#ffffff>
<TDonClick="setSource(this,'t1');MyMar=setInterval(move,speed)"class="default"id="test">笔记本</TD>
<TDonClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
<TDonClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}"class="default">电冰箱</TD>
<TDonClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}"class="default">波比娃娃</TD>
<TDonClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
<TDonClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
</TR>
</TABLE>
<br><br>
<br><br>
<br><br>
<TABLEid="aim"style="border:1pxsolid#666666;width:227px;height:300px;">
<TR>
<TDid='aim1'valign="top"></TD>
</TR>
</TABLE>
<br>
<br>
<br>
<br>
<TABLEstyle="border:1pxsolid#666666"cellspacing=1bgcolor=#ff1111cellpadding=4border=0>
<TRbgcolor=#ffffff>
<TDonClick="setSource(this,'t1');MyMar=setInterval(move,speed)"class="default">笔记本</TD>
<TDonClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
<TDonClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}"class="default">电冰箱</TD>
<TDonClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}"class="default">波比娃娃</TD>
<TDonClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
<TDonClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}"class="default">小家电</TD>
</TR>
</TABLE>
<divid="t1"class="hidden">第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div第1个div</div>
<divid="t2"class="hidden">第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div第2个div</div>
<divid="t3"class="hidden">第3个div</div>
<divid="t4"class="hidden">第4个div</div>
<divid="t5"class="hidden">第5个div</div>
<divid="t6"class="hidden">很长很长很长很长很长的第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个div第6个</div>
<script>
setSource(document.getElementById('test'),'t1');MyMar=setInterval(move,speed)
</script>
</BODY>
iteye_6481
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现商品展示放大镜效果
qq_44419617的博客
12-22 264
原理：左边一张小图，右边是一张大图（初始隐藏），当鼠标移入小图时出现放大镜（遮罩模块），同时大图（溢出隐藏）出现。移动鼠标时放大镜的移动距离与大图移动距离成比例，方向相反。放大镜与大图之间比例关系为：放大镜的left值/小图盒子的宽度=大图的left/大图盒子的宽度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
javascript动画之模拟拖拽效果篇
10-21
其实javascript本身是具有原生拖放功能的，但是由于兼容性问题，以及功能实现的方式，用的不是很广泛。javascript动画广泛使用的还是模拟拖拽。本文将详细介绍javascript的模拟拖拽，有需要的可以参考借鉴。
一个很经典的JS产品展示图片代码
05-13
一个很经典的JS产品展示图片代码 不看你会后悔
js产品动画展示
01-14
好看实用性js产品展示效果 多张flash切换效果
淘淘商城--前台首页商品类目js展示
Appleyk的专栏
11-06 4346
能被最终解决的问题都算不上是大问题，最大的问题，应该是我们自己，我们养成了一种知识依赖的坏习惯：别人怎么讲我就怎么做，不去思考，不去实践，一味的拿来主义精神，如果不出问题则罢，一旦出了问题，我们就不知所措；（我们早晚有一天会成为maker，而不是coder，积累并沉淀自己只是时间的问题） 类似于要实现京东商城的首页商品类目展示的效果： 二、准备商品类目数据（json串） category.json  { "data": [ { "u": "/products/1.html", "
多种图片模拟扑克牌展开折叠动画效果
06-10
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 24.0px;... 基于jQuery实现的多种模拟扑克牌切换动画效果 使用方法： 1、将index.html 中的CSS样式拷贝过去 2、将body中的代码部分拷贝过去即可
js动画效果打开层 关闭层
10-30
JavaScript（简称JS）是一种轻量级的编程语言，常用于网页和网络应用开发，实现动态交互效果。在网页中，我们经常需要实现弹窗或提示效果，这些效果可以通过操作页面中的层（Layer）来实现。在本文中，我们将探讨...
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
10-19
在本教程中，我们将探讨如何使用JavaScript和Sketch.js库来创建一个模拟成群游动的蝌蚪动画效果。Sketch.js是一个轻量级的JavaScript库，它允许开发者在浏览器上进行绘图和创建复杂的动画。 首先，为了实现这个动画...
纯CSS3模拟摩天轮旋转动画效果.zip
07-11
总的来说，"纯CSS3模拟摩天轮旋转动画效果"项目展示了CSS3的强大潜力，它不仅可以创建静态布局，还能实现复杂的动态效果，而无需借助JavaScript。这使得开发者能够更加专注于设计，提升网页的视觉表现力和互动性。...
仿淘宝商品列表js展示效果 jquery效果 ajax效果
01-12
仿淘宝商品展示jQuery特效，下拉展示 效果展示：http://www.whkge.com/jsview/js0112a/
CSS3和JS炫酷3D拖拽卡片动画特效
07-09
CSS3和JS炫酷3D拖拽卡片动画特效
原生Js封装的产品图片360度展示
nox
07-29 1240
挺简单的一段程序，但是效果不错： 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览：http://jsfiddle.net/dtdxrk/SnSGj/embedded/result/ 原生Js产品图片360度展示 *{marg
Javascript特效：电商商品展示放大镜
KaiSarH
12-25 581
实现JS特效：电商商品放大镜。
javascript实现 京东淘宝等商城的商品图片大图预览功能
aikouhui4965的博客
01-15 539
　　在京东和淘宝等购买东西的时候，我们会经常预览左侧商品展示图片，把鼠标放到原图，右侧就会有个大图显示出细节。本文将带领大家写一个这样简单的功能！ 一、实现原理 当鼠标移入某一图片内部时，图片上部会出现一个类似于扫描的框，这个框内的图片部分，会以方大形式展示在右边，如下图： 从图中可以推测出一下几点： 图片img上层会有一个父元素（如‘div’），在鼠标移入时，父元素内部添加...
论Angluar Js——展示页面
qq_42811815的博客
07-28 172
//表格 名称 类别 时长 导演 售价 上映时间 评分 操作 ...
图文展示网页设计
fantasy_geek的博客
03-20 805
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 圆角边框</title> <style> body { padding: 0; background-color: #F7F7F7; } ...
使用Html+Css+JS实现商品的展示，价格计算等功能
weixin_45866961的博客
05-29 7740
源码在后面 效果展示图片 功能 调用外部数据，动态建立路径导航 调用外部数据，动态建立图片展示页面，为并未主图绑定鼠标移入、移动、移出事件，实现放大镜详情展示 3.并为其绑定左右按钮事件，进行切换 4. 为小图绑定切换事件，由小图切换主图， ...
商城商品展示JS特效
chaonanwo的专栏
09-24 1719
商城商品展示JS特效，当鼠标滑过某件商品模特展示图片时会显示出模特身上所搭配服装单品，具体效果请查看下面在线演示效果。 在线演示 MJBlog(mj.588cy.com) * {margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{ margin:0px; padding:0px; back
javascript简易动画效果
最新发布
06-16
JavaScript 是一种常用的客户端脚本语言，可以用来创建各种动态和交互式的网页效果，包括简单的动画。以下是一些基本的 JavaScript 动画创建方法： 1. **逐像素操作（DOM manipulation）**: 使用 `setInterval` 或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值