js 实现div放大和缩小 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能，点击左下角的图标按钮，地图的整个div会变大，变大预览之后，再次点击图标按钮，地图的整个div会变小，恢复原样，两个图标在地图界面的放大和缩小时间不断的切换图标状态（箭头向里面，或者箭头向外面...charset="UTF-8"> js...400px; height: 200px } div...id="scale" style="">div> div id="updmap"> div> <script

5.3K2 0

jQuery实现点击图标div循环放大缩小功能

很基础的一个功能，点击左下角的图标按钮，地图的整个div会变大，变大预览之后，再次点击图标按钮，地图的整个div会变小，恢复原样，两个图标在地图界面的放大和缩小时间不断的切换图标状态（箭头向里面，或者箭头向外面...charset="UTF-8"> js...400px; height: 200px } div...id="scale" style="">div> div id="updmap"> div> <script

5690 0

您找到你想要的搜索结果了吗？

是的

没有找到

JS实现鼠标拖动div移动

.style.left; objY = div1.style.top; mouseX = e.clientX; mouseY...= document.getElementById("div1"); var x = e.clientX; var y = e.clientY;...(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) +..."px"; document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y...= document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX

41.2K2 0

纯 JS 实现放大缩小拖拽采坑之旅

本文首发于政采云前端团队博客：纯 JS 实现放大缩小拖拽采坑之旅 https://www.zoo.team/article/scaling ?...前言最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。...三个坑点拖拽采宝时会导致采宝放大缩小采宝显示在屏幕边界时被遮挡显示不全采宝放大和缩小后，位置发生变化（一）拖拽时会导致采宝放大缩小我们在操作采宝时，不管是鼠标拖动还是点击放大缩小，我们的事件都需要绑定在采宝头部的图标上...这样就会出现在拖动采宝的时候，采宝会放大和缩小。 ?...'放大缩小' （三）采宝放大和缩小后，位置发生变化通过上图，我们可以看到，当小采宝处在显示屏边界时，点击放大后再点击缩小，我们发现采宝的位置发生了变化。

7.2K1 0

JS实现div块的拖放，调换位置

主要是HTML5 的拖放（Drag 和 Drop）例子（不需要对div设置ID）： div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)..." draggable="true" οndragstart="drag(event, this)"> div2!...div> div style="width: 50px;height:50px;" οndrοp="drop(event,this)" οndragοver="allowDrop(event)..." draggable="true" οndragstart="drag(event, this)"> div3 div> 上面函数介绍： ondrop

9.6K2 0

js简单实现div宽度匀速增加减小

点击音乐右边的div可以变长或者变短。代码： 1 div> 60 div class="right"> 61 div class="mask" id="mask"> 62 div class="content">我是内容div> 63 div> 64 div class="clear">div><!

12.3K7 0

DIV+JS+CSS实现点击弹出图片效果

的相对层，数字大的在上层 */ overflow: auto; } Select Code Copy js代码 ...class="top_contact_us"> div class="top_telphone">div> div class="top_weixin">微信公众号div> div class="top_qq">官方QQ群div> div> div id="light_qq" class="white_content..."> div> div id="light_weixin" class="white_content">

32.3K3 0

用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。...background-color: #999; } 打开弹出图层 div...="请输入内容"> 提交 div class="close" id="close-popup">×div> div> div> 实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。...如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

10.2K5 0

js实现贝塞尔曲线，div也能如此丝滑？

今天遇到朋友发来的一个ui图，询问我如何实现下图这样的效果【vue项目】，（听说是类似LED灯的展示效果），于是便有了今天的小demo，要实现一个类似下图的动效，上面的灯会一直重复滚动，但是这个并不是什么难点...，主要在于如何实现这种平滑的曲线，日常我们的开发的div在我们的脑海中通常就是一个网格状，涉及到平滑曲线的往往是图表，于是我们需要找一个方案来完成这种布局（非真实ui图，是完成之后的效果）分析我们需要先简单分析一下这个...实现布局实现这个的布局非常简单，外层一个大的div，内层很多小的span，通过flex一排即可到一排 div class="container"> div class...0 : item + 1) }, 最后我们启动即可，就实现了我们开头想要的效果。...但是实际上我们所需要的其实只是利用真实的x点，拿到对应曲线求出我们y的坐标，所以我们需要的参数有，我们真实场景的总宽，总宽之中的个数，我们所需要的曲线的倍率，三个参数即可,我们尽量分开步骤写，这样你看会理解的更清楚 js

2.4K4 0

原生js实现div跳动效果---很多炫酷效果的基本原理

这块实现起来很简单，原生的js实现更简单。为什么写这个呢？...: darkolivegreen;" name="div">div> div style="background-color: darkblue;" name="div">div> div...style="background-color: crimson;" name="div">div> div style="background-color: gold;" name="div">...div> window.onload = function(){ var div0 = document.getElementsByTagName("div")[0]; var div1...，怎么可以那么简单，是的，就是那么的简单，很多的时候我们看到的效果其实实现的原理是很简单的，只是看我们是不是可以巧妙的运用。

2.5K3 0

js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高

需求实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。 ? 2....实现原理 2.1 父布局 div class='hj-wrap'> div class="arrow">div> div> 首先一个父 div 为 hj-wrap，...div class="arrow">div> div> 每一个横向的 div 为 hj-transverse-split-div 并相对定位，里面有一个拖动改变左右的 label 为...">下div> div class="arrow">div> div> 每一个横向的 div 为 hj-vertical-split-div 并相对定位，里面有一个拖动改变左右的...3. js 实现代码： /** * name: split.js * author: biaochen * date: 2018-12-26 * */ $(function()

11.5K3 0

CSS笔记(16)

其实就是放一个盒子,然后给盒子添加一个背景图片,移动背景图片的位置,让想要的图案出现在盒子里. 下面做一个案例,使用下面的字母图,用精灵图的方式将自己的名字拼出来 <!...width: 104px; background-position: -367px -405px } div...class="name y">div> div class="name f">div> div class="name t">div> ...精灵图是由诸多优点的,但是缺点很明显: 1.图片文件还是比较大的. 2.图片本身放大和缩小会失真. 3.一旦图片制作完毕想要更换非常复杂....现在我们放一个span,里面插入我们想要的字体图标. 我们先打开demo文件: 里面有我下载好的图标. 复制想要的图标后面的小长方形,粘贴到span中.

1.1K2 0

一种离谱到极致的页面侧边栏效果探究

后来还是觉得这种方式需要涉及js对页面结构的改变，于是乎… 实现：如何实现文首展示的效果这基于position定位是会“重合”的：在两个行内元素都设置了定位属性（但没有加top/left/bottom...-- 这里放右侧弹框展示的信息 --> div> div class="box"> 放“页面”数据结构（也就是原本应该在body标签下的所有东西） --> div> div里面放的就是“原本的页面整体”部分。...—— js控制“代表页面的元素”整体移动即可。这里有个“遮罩层效果”，按照传统的js实现肯定就要去找display了，再进一步可以用上面所说的“display动画效果”增强体验。

1.2K2 0

impress.js 源码分析

impress.js简单来说仅仅是实现了幻灯片的转场特效的框架，虽说将单页限制在框架之内，但所有单页还是需要自己用代码设计。...1. impress.js华丽效果实现方法概述通过审查元素发现，页面间转场的实现全部是依赖于CSS3，准确说是translate3d属性完成的。...impress的水平移动是改变了translateX坐标，垂直移动是改变translateY坐标，而变小变大的绚丽效果是改变translateZ的坐标实现，而这些转化样式的事件监听是通过js来实现的。...getElementFromHash() ----- 根据hash来获取元素（hash是URL中形如#step1的东西） computeWindowScale() ----- 根据当前窗口尺寸计算scale，用于放大和缩小...很多技术单独实现都很简单，综合运用起来，如何保证命名空间不污染，代码的重用复用，js和css代码的兼容性等细节都是值得学习的地方。

3.2K2 0

css经典布局之左侧固定大小右侧自动适应

div> div class="right"> div class="right-content">...> div> div> css代码 *{ margin: 0; padding: 0; -...有了这个规律，便可以实现一种动态效果，比如有一种场景：左侧里面放一个按钮，通过点击这个按钮，来切换左侧的宽度大小。...当左侧变窄时，右侧自动变宽；当左侧变宽时，右侧自动变窄，下面来实现一下： js代码，在这之前，需要注释css中的以下三行代码 .left{ position:relative; float...默认是使用最大宽度] * @type {Boolean} */ flag=true, /** * [maxWidth，minWidth 分别是左侧的最大和最小宽度

1.8K3 0

css经典布局之左侧固定大小右侧自动适应

div> div class="right"> div class="right-content">...> div> div> css代码 *{ margin: 0; padding: 0; -...有了这个规律，便可以实现一种动态效果，比如有一种场景：左侧里面放一个按钮，通过点击这个按钮，来切换左侧的宽度大小。...当左侧变窄时，右侧自动变宽；当左侧变宽时，右侧自动变窄，下面来实现一下： js代码，在这之前，需要注释css中的以下三行代码 .left{ position:relative; float...默认是使用最大宽度] * @type {Boolean} */ flag=true, /** * [maxWidth，minWidth 分别是左侧的最大和最小宽度

2.7K0 0

CSS笔记(24)之transform

关于HTML+CSS的基础班知识已经学完啦,现在学习就业班的知识. 2D转换转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移/旋转/缩放等效果.转换可以简单理解为变形...border-right: 1px solid #000; transform: rotate(45deg); } div...class="box">div> 当然,旋转中心点也是可以变化的. 2D旋转中心点transform-origin 我们可以设置元素旋转的中心点语法: transform-origin...嘿嘿,又做了一个过渡效果的. 2D转换之缩放scale 缩放,顾名思义,可以放大和缩小.只要给元素添加了这个属性就能控制它放大和缩小....):宽和高都放大了一倍,相当于没有放大. transform:scale(2,2):宽和高都放大了两倍. transform:scale(2):同上 transform:scale(0.5,0.5):缩小

2K2 0

聊聊苹果营销页中几个有趣的交互动画

缩放图片开始时是一张全屏的图片，在滚动过程中慢慢变成另一张图片，接着这张图片以屏幕正中间为基准点慢慢缩小，在缩小的过程中，这张图是定在屏幕中央的，缩小到一定值的时候，图片随着滚动条滚动。 ?...上图中的效果，我们只需要一行 css 就可以实现了，不需要写复杂的 js 代码，直接设置 background-attachment: fixed 就完成了。...// 开始动画的 scrollTop // $('#imgWrapper') 放图片的容器，html 结构下面有 startOpen = $('#imgWrapper').offset().top -...图片缩小我们使用 transform: matrix 来实现，其中图片缩小是基于屏幕正中央的点进行缩放的。...图片缩小这里我们不使用 transform: matrix 来做这个放大缩小，我们使用 background-position 和 background-size 来进行图片的「缩小/放大和偏移」

2.8K6 0

Vite + Vue3 + OpenLayers 手动控制缩放级别

启动项目 npm run dev 使用 Vite 初始化项目并安装 ol ，更详细做法可以查看『Vite + Vue3 + OpenLayers 起步』三、思路与编码获取当前缩放级别点击放大或缩小按钮...-- 地图容器 --> div id="map" class="map__x">div> maxZoom: {{maxZoom}} div> div> 放大缩小...solid #eee; } .zoom__info { display: flex; p { margin-right: 60px; } } 本例分别创建了放大和缩小的控制函数

2.4K3 0

盘点：响应式布局的5种实现方式

屏幕尺寸 html 中 font-size 大小（1rem 大小） 750px 75px 640px 64px 480px 48px 375px 37.5px 320px 32px 我们可以通过 js...来动态修改不同屏幕尺寸下的 font-size 大小就可以实现等比例放大和缩小了 js 动态修改 html 根元素的 font-size 的大小，能适配不同尺寸的屏幕，不再局限于这 5 种 <script...clientWidth / 10 + "px"; //动态设置font-size大小 } window.onresize = initPage; 注：我们可以用 flexible.js...height: 40vw; background-color: red; } div class="box">div> 在宽为 750px...我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从项目的排序、项目放大比例、项目缩小比例

3.8K0 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭