chen__cheng的博客

效果预览：实现思路：类似于：h5+css3+js之移动端轮播图将存放所有图片的容易按照一定的时间在X轴进行移动，但是此处使用的是纯CSS实现，利用动画animation定义每一帧的动画，在每一帧的动画中沿着X轴进行移动实现代码：html: <main> <section> <div> <img src="/images/1.jpg" alt="">

效果预览：实现思路和立体按钮的实现思路是一致的立体按钮 基于动画transform实现代码：HTML<main> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></main>

效果预览：实现思路：多个图片进行旋转，主要需要确定几个图片的旋转点：主要确定了旋转点，图片在旋转的过程中就不会出现乱跑的情况。同时为了可以看到图片在三维空间的旋转效果，需要给图片的父元素main添加perspective: perserve-3d使图片元素可以在3d空间进行显示。实现代码：html<main> <img src="/images/2.PNG" alt=""> <img src="/images/4.jpg" alt="">

效果预览：实现思路：设置小菜单的旋转基点transform-origin为中间圆的中心，再根据对小菜单设置不同的旋转角度即可。实现代码：html<ul> <li><span>旋</span></li> <li><span>转</span></li> <li><span>菜</span></li> <li&

效果预览：实现思路：使用一个盒子.clock作为时钟地盘，并为当前盒子添加伪类使其在当前盒子内部进行显示，并遮住当前盒子内部部分，再利用.line盒子进行刻度绘制，最后还需要一个盒子遮住里面多余的线条，最后再绘制时分秒。实现代码：html <div class="clock"> <div class="line"> <div></div> <div></div>

效果预览：实现原理：在按钮前后添加伪类，并使其在左和在下方显示，并做倾斜处理(transform: skew(deg,deg))，并将父级按钮进行旋转操作transform: rotate(30deg)实现代码：html<main> <a href=""> cheng </a></main>css* { margin: 0; padding: 0;}body { height: 1

效果预览：实现思路：当鼠标悬浮于父元素main的时候，所有的div子元素都缩小并且添加模糊度，且当鼠标悬浮于具体的某个div的时候，当前div放大1.3倍，且清除模糊度。实现代码：html<main> <div><img src="/images/2.PNG" alt=""></div> <div><img src="/images/4.jpg" alt=""></div> <div&

效果预览：实现思路：利用动画的缩放功能transform: scale(x,y)让菜单项元素进行缩放显示。实现代码：html<main> <ul> <li> <strong>my</strong> <div> <a href="#">me</a> <a href=

效果一览：实现代码：html<main> <div id="home"> <i class="fa fa-home" aria-hidden="true"></i> </div> <div id="video"> <i class="fa fa-vimeo" aria-hidden="true"></i> </div> &

原理通过点击不同的tab实现展示不同的界面的效果，主要是通过对显示不同界面的盒子进行隐藏以及显示来实现的。效果图如下：HTML代码块<div class="box"> <div class="boxHeader"> <ul> <li class="choosed">tab1</li> <li>tab2</li> <

问题描述移动端由于屏幕双击会缩放页面，因此移动端click事件会有300ms延时情况的产生解决方案方法一：全局禁止缩放在html页面头部的meta标签中加上content=“user-scalable=no”<meta content="user-scalable=no">该方法会让浏览器禁用默认的双击行为并且去掉300ms点击延时适用场景：需要对整个页面进行禁用双击行为。但是一般不常用。方法二：封装tap函数解决300ms延迟原理当手指触摸屏幕，记录当前触摸时

概要功能概要自动播放轮播图用户手动滑动轮播图涉及知识点采用css3中transition实现动画移动过渡效果以及transform实现动画效果采用h5中classList切换类的方式实现底部小圆圈同步变化效果移动端touch触屏事件效果预览实现代码html<!-- 轮播图--><div class="focus"> <ul> <li><img src="../imgs/OIP.jpg" a

功能简述图片随着鼠标位置在导航栏上变化而变化当点击某个导航栏时，图片位置迁移到当前导航栏的位置处效果预览实现原理给每个li标签添加鼠标事件当鼠标悬浮于li标签的时候，将当前li标签的offsetLeft值赋给图片的offsetLeft使其移动当鼠标离开li标签的时候，图片offsetLeft的值重置为之前已点击的li标签的offsetLeft值当鼠标点击li标签的时候，记录当前li标签的offsetLeft值涉及到的animate函数详见js动画函数实现侧边栏动态显示内容.实现

功能预览实现步骤搭建静态框架轮播图实现核心在于：设置图片盒子ul相对于父盒子div的left数值基于以上原理，需要先将图片显示在一条线上，实现左浮动的效果鼠标经过以及离开注册事件当鼠标经过的时候，设置注册事件，显示左右图标，并移除定时器（其中，定时器实现轮播图的自动播放效果）当鼠标离开的时候，设置注册事件，隐藏左右图标，并设置定时器。...

功能概要鼠标悬浮侧边栏 弹出数据框 同时指示图标进行变化效果图实现原理实现过程有两部分组成：显示箭头，以及显示内容盒子通过鼠标悬浮以及离开注册监听事件，监听事件中调用动画函数动画函数事件步骤：1. 通过设置定时器setInterval不断改变显示内容盒子的e.style.left位置2. 并通过移动目标位置与当前内容盒子左偏移offsetLeft来控制移动步数，实现缓动动画3. 结束条件：内容盒子左偏移等于目标位置4. 设置回调函数在结束定时器时设置显示箭头方向注意点移动

功能概要将页面分为四部分，header区域、banner区域、main区域以及侧边栏当页面向下滑动，header区域隐藏时，右侧侧边栏固定在页面上不继续滑动当页面向上滑动，header区域显示时，右侧侧边栏正常随着页面滚动当页面向下滑动，header区域以及banner区域隐藏时，右侧侧边栏显示其他相关信息当页面向上滑动，header区域以及banner区域显示时，右侧侧边栏隐藏其他相关信息效果展示实现代码html<div class="slider-bar">

功能概要可放大图片并查看显示效果实现思路主要分为图片展示盒子、遮挡层、大图显示盒子首先需要完成遮挡层随着鼠标的移动而移动，且遮挡层盒子移动坐标计算方式为：鼠标当前坐标 减去 盒子的offsetWidth，即鼠标在大盒子中的位置考虑大图随着遮挡层的移动而移动，由于遮挡层的移动距离与大图的移动距离不是对等关系，因此为了按照一定比列进行移动并显示，大图的计算方式应该如下：大图的移动距离 / 大图最大移动距离 = 遮挡层的移动距离 / 遮挡层最大移动距离大图移动距离 = 大图最大移动距离