transition属性实现div点击拉伸，再点击收回效果

最新推荐文章于 2024-07-06 18:31:03 发布
最新推荐文章于 2024-07-06 18:31:03 发布
阅读量6.4k 收藏
点赞数
分类专栏： Javascript 文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_33163851/article/details/52693808
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>004</title>
    <style>
        div { width: 80px; height: 50px; background-color: #90FF8E;
            transition: width 4s;   /* 改变宽度，时间4秒 */
        }
    </style>
</head>
<body>
    <div id="con" οnclick="add();">
        <p><span>我们的歌</span></p>
    </div>
    <script>
        function add() {
            var con = document.getElementById('con');
            var width = parseInt(con.style.width || con.clientWidth || con.offsetWidth || con.scrollWidth);
            console.log(width);
                if (width<100){
                    con.style.width = '200px';
                }else {
                    con.style.width = '80px';
                }
        }
    </script>
</body>
</html>



呼呼伙伴
关注
专栏目录
笔记：css3 transition 实现div宽度以中心为原点向两边伸长
qq_39108466的博客
08-28 1万+
参考原文章（问答）： css3 transition width在变长的时候 能以中心为原点，向两边伸长吗？ 我在项目中用来作为导航菜单的鼠标悬停交互 : 核心代码(CSS)：.container { text-align: center; } .bar { width: 100px; display: inline-block;
div css3 transform和transition属性鼠标滑过动画效果
11-05
本教程将深入探讨“div css3 transform和transition属性鼠标滑过动画效果”，这两个特性是实现动态交互效果的核心。 首先，`transform`属性允许我们对HTML元素进行二维或三维的变换，如旋转、缩放、移动和平移。它...
利用CSS3的transition属性实现滑动效果
01-21
首先援引一下w3school上的transition基本知识： 定义和用法transition 属性是一个简写属性，用于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。 语法 CSS Code复制内容到剪贴板 transition: property duration timing-function delay;   实现滑动效果只需要一个DIV元素便可实现
Vue 自定义 拉伸指令
最新发布
m0_73429984的博客
07-06 633
在前端开发中，常常需要动态控制组件的长宽。其中拖拽控制是一个控制元素长宽很好的方式。本文将很好的介绍，拖拽控制元素大小的方式。本文介绍了，如何给元素添加拖拽放大/缩小效果，并制作为 Vue指令。希望对大家有帮助。
css 拉伸 resize —— 实现可拉伸的div（含限制拉伸的尺寸）
朝阳39的博客
11-18 7261
实现原理 添加resize 属性即可实现： none：初始值，表示没有拉伸效果，常用来重置<textarea>元素内置的拉伸行为，代码如下： textarea { resize: none; } both：既可以水平方向拉伸，也可以垂直方向拉伸。 horizontal：仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。 vertical：仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。 block：后期新增的属性值，目前现代浏..
给div添加点击效果
weixin_43409286的博客
10-15 4095
给div添加点击效果 .item { background: #FFF; } .item:active { background: #F0F0F0; }
JS实现div宽度、高度拉伸
prey1025的博客
09-09 4190
一、JavaScript实现宽度高度自动缓慢拉伸 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> #testDiv { width: 200px; ...
用JS实现鼠标任意拉伸DIV框,非常不错
IT猿_Ocean的成长之路
09-02 2579
JavaScript拖拉缩放效果 JS代码 站长学院www.pigzz.com                 var isIE = (document.all) ? true : false;     var $ = function (id) {     return "string" == typeof id ? document.getElementById(id) :
CSS3 transition属性制作水平手风琴鼠标点击手风琴展...
11-18
CSS3 transition属性制作水平手风琴鼠标点击手风琴展...CSS3 transition属性制作水平手风琴鼠标点击手风琴展...CSS3 transition属性制作水平手风琴鼠标点击手风琴展...
详解css3 Transition属性（平滑过渡菜单栏案例）
09-24
总结起来，CSS3的Transition属性是实现平滑过渡效果的关键工具，通过指定属性、持续时间、速度曲线和延迟时间，我们可以创建出各种动态、流畅的交互效果。在实际应用中，Transition属性不仅限于菜单栏，还可以广泛...
JQ使div动态拉伸，width
weixin_30886233的博客
07-23 245
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src =js/jquery-3.1.1.min.js></script> &...
H5 PhotoSwipe简单例子 vue图片拉伸放大缩放例子
11-27
H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 自己改装成vue的例子 图片能发大缩放
拖拽和拉伸div元素功能分析与实现
我的博客
05-08 2367
综述：综合考察对于元素的拖动相关API的使用和逻辑思维能力，非常有用的一个实现思路，后期可以将其封装成一个可以复用的组件积累下来 1.实现拖拽和四个方向拉伸元素的实现方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>j...
Button拉伸以实现点击效果
weixin_34396103的博客
05-07 179
2019独角兽企业重金招聘Python工程师标准>>> ...
03.vue学习——过渡 & 动画（2020-09-13）
Pandora_417的博客
09-13 271
实例： <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> ```new Vue({ el: '#demo', data: { show: t
最简单的实现层的可拉伸功能
深蓝忧郁的技术空间
10-20 1697
 
从基础到进阶：实现div控件的拖拽和缩放功能
Twinkle_sone的博客
11-30 3361
如果你正在寻找一个详细的教程，从基础到进阶地学习如何实现具备拖拽和缩放特性的div控件，那么本文将是你需要的！我们将从HTML、CSS和JavaScript的基本知识入手，深入讨论拖拽和缩放的核心概念，然后逐步教你如何利用这些技术实现一个强大的div控件。无论你是初学者还是有经验的开发者，都能够从本文中获得有益的指引和实用的技巧。
div 可拉伸变高
Ypromise-的博客
05-11 683
test 为要被拉伸的div。里面的div class="bottom-result-resizable" 为空的一条线，鼠标放上去的时候加粗效果，这是触发拉伸的地方。重点为 @mousedown="handleMouseDown" 方法。-需求： 实现div 可以拉伸变高。html 代码 ，随便写了个测试。methods里方法。
vue 在字符串中添加div标签赋予样式并添加点击事件
诚实可靠小郎君
09-04 993
vue 在字符串中添加div标签赋予样式并添加点击事件
微信小程序中修复transition属性实现动画效果
"这篇教程介绍了如何在微信小程序中利用CSS `transition` 属性实现一个带有动画效果的显隐部件。通常在微信小程序开发中，直接使用`transition`可能无法达到预期，因此开发者会转向使用微信官方的`wx.create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值