手机网站按住放大图片_HTML5 手机图片触摸放大效果

news/2024/5/17 13:16:49/文章来源:https://blog.csdn.net/weixin_42376940/article/details/113008741

JavaScript

语言:

JaveScriptBabelCoffeeScript

确定

(function(e, t) {

var n = ["touchstart", "touchmove", "touchend"];

e.enlarge = function(e, t, i) {

var s = document.getElementById(e);

var a = s.getElementsByTagName("img")[0];

var o = {

x: a.width / (t - a.width),

y: a.height / (i - a.height)

};

s.style.overflow = "hidden";

s.style.position = "relative";

s.innerHTML += ''%20+%20s.href%20+%20'';

var l = s.getElementsByTagName("img")[1];

l.style.position = "absolute";

l.style.left = "0px";

l.style.top = "0px";

l.style.width = t + "px";

l.style.height = i + "px";

l.style.display = "none";

s.onclick = function() {

return false

};

var d = function(e) {

e.preventDefault();

var t = e.changedTouches[0].pageX - s.offsetLeft;

var n = e.changedTouches[0].pageY - s.offsetTop;

if (t < 0) t = 0;

if (n < 0) n = 0;

if (t > a.width) t = a.width;

if (n > a.height) n = a.height;

l.style.display = "block";

l.style.left = 0 - t / o.x + "px";

l.style.top = 0 - n / o.y + "px"

};

var h = function() {

l.style.display = "none"

};

s.addEventListener(n[0], d);

s.addEventListener(n[1], d);

s.addEventListener(n[2], h);

l.addEventListener(n[1], d);

l.addEventListener(n[2], h)

}

})(window);

window.onload = function() {

enlarge("demo", 1000, 1180);

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_742171.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于埋点日志数据的网络流量统计(网站总浏览量(PV)的统计)

衡量网站流量一个最简单的指标&#xff0c;就是网站的页面浏览量&#xff08;Page View&#xff0c;PV&#xff09;。用户每次打开一个页面便记录1次PV&#xff0c;多次打开同一页面则浏览量累计。 一般来说&#xff0c;PV与来访者的数量成正比&#xff0c;但是PV并不直接决定…

基于埋点日志数据的网络流量统计(网站独立访客数(UV)的统计)

在实际应用中&#xff0c;我们往往还会关注&#xff0c;到底有多少不同的用户访问了网站&#xff0c;所以另外一个统计流量的重要指标是网站的独立访客数&#xff08;Unique Visitor&#xff0c;UV&#xff09; 1.假设我们已经采集到数据UserBehavior&#xff0c;并将数据放在…

由12306.cn谈谈网站性能技术

12306.cn网站挂了&#xff0c;被全国人民骂了。我这两天也在思考这个事&#xff0c;我想以这个事来粗略地和大家讨论一下网站性能的问题。因为仓促&#xff0c;而且完全基于本人有限的经验和了解&#xff0c;所以&#xff0c;如果有什么问题还请大家一起讨论和指正。&#xff0…

jmeter对http get网站访问压力测试

一 安装 下载jdk安装包 http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html 根据操作系统选择对应的包安装&#xff0c; 下载好安装包后&#xff0c;直接根据提示安装 下载apache jmeter安装包 http://jmeter.apache.org/download_jmeter.…

PHP大型电商网站秒杀思路

秒杀/抢购 技术&#xff1a;高可用&#xff0c;高并发 市场&#xff1a;用户体验&#xff0c;曝光度&#xff0c;促销 秒杀放单独服务器&#xff0c;这样即使崩溃不影响网站其他功能。 高可用&#xff1a;双活。 高并发&#xff1a;负载均衡&#xff0c;安全过滤。 阿里云…

手把手教你入侵网站修改数据_一天之内建好个人网站,手把手教你全过程

建个网站一年多少钱&#xff1f;如何自己搭建一个个人网站? 如何逐步构建一个优秀的外贸网站&#xff1f; 如果你有这些问题&#xff0c;那你看完我写的这次实际建站的过程&#xff0c;你就应该全明白了。首先看一下实际的费用。我在阿里云申请的域名http://www.tianjiju.com和…

个人网站备案起名_服务器域名备案是什么?

服务器域名备案是什么&#xff1f;网站备案是管局规定的&#xff0c;只要是国内网站就必须申请网站备案&#xff0c;不备案网站域名就无法打开&#xff0c;显示网站阻断提示。网站备案是指网站服务商帮助网站所有人给网站做域名备案。网站所有人需要提供给网站空间服务商备案资…

.net core3.0上传文件出现404_网站服务器经常性出现404错误的解决方案

网络上浏览页面出现的错误链接提示多种多样&#xff0c;出现404notfound也算是一个很普遍的问题&#xff0c;相信上网族都遇到过该情况&#xff0c;当我们打开某网页时会出现提示&#xff1a;404NotFound&#xff0c;看到该页面心情本就糟糕了&#xff0c;404notfound主要用于浏…

支持哪些格式的图标_建议收藏的7个高质量图标网站,一网打尽图标素材

大家好&#xff0c;这里是秋叶PPT图标是 PPT 制作中经常用到的元素之一&#xff0c;其比文字生动&#xff0c;比图片简洁的特性&#xff0c;应用在 PPT 中可以极大地提高页面的可阅读性&#xff0c;从而深受广大 PPT 爱好者喜爱。那应该到哪里可以找到高质量的图标素材呢&#…

宝塔 — 部署wordpress网站

运行wordpress需要用到的 nginx-1.15php-7.4mysql 先在根目录/www/wwwroot/下创建一个wordpress目录 添加站点&#xff08;注意确保端口未被占用&#xff09; 创建mysql数据库选择php版本不低于7 站点创建成功后用公网IP或者域名测试&#xff0c;会显示一个站点创建成功的…

花几天时间肝的在线制作词云图网站,真香。

背景&#xff1a;在可视化方面经常绘制词云图、折线图、柱状图等。为了方便绘制这些图表&#xff0c;辰哥就把这些可视化图的绘制做成可操作的过程。 最近也是在利用空闲时间做了一个在线制作词云网站&#xff08;后面会慢慢补上其他的图表&#xff09;&#xff0c;废话不多说&…

19个练习技术的在线网站,你知道几个?

不管你是一名开发人员、安全工程师、代码审计师、渗透 测试人员&#xff0c; 即便你是零基础&#xff0c;通过不断的练习才能让你成为一个优秀安全研究人员。 如果是对Python感兴趣的&#xff0c;这边也提供全套学习资料&#xff0c;请看文章末尾 以下网站希望能给各位安全小…

有什么好的学编程的网站或者是软件?『编程入门』?

现在的学习方式不外乎以下几种。 第一种 视频 好处是总算给了自己一个看起来在认真学习的借口了。看的很认真&#xff0c;写起来一个不会。三五个月或者是半年了&#xff0c;都写不出来一行代码是常有的事儿。 但是总归自己是花时间和精力了&#xff0c;对不对&#xff1f;特…

18个锻炼编程技能的网站

编程几乎已经成为了人类所知每个行业的必要组成部分&#xff0c;它帮助组织和维护大型系统的方式是无可比拟的&#xff0c;所以越来越多的人开始了他们的编程之旅。 要学习编程&#xff0c;你可以通过交互式平台或者书本&#xff0c;随便一种你觉得最适合和容易的学习方式。但…

盘点同事偷偷用Python做兼职,一个月赚8千的几个网站,还有他的学习资料,赶紧白嫖

今年2月&#xff0c;我失业了。好在是被裁的&#xff0c;有些补偿。裁的是整个部门&#xff0c;刚开始拿到赔偿以后还欢呼雀跃&#xff0c;天天聚会&#xff0c;天天嗨。到现在过去几个月了&#xff0c;我们没一个找到工作。我已经感受到了一股鸡蛋被煎糊的焦虑感 一次前同事聚…

Python:用一行代码在几秒钟内抓取任何网站

如果你正在寻找最强大的 Python 抓取工具&#xff1f;不要再看了&#xff01;这一行代码将帮助你立即启动并运行。 Scrapeasy Scrapeasy 是一个 Python 库&#xff0c;可以轻松抓取网页并从中提取数据。它可用于从单个页面抓取数据或从多个页面抓取数据。它还可用于从 PDF 和…

使用HTML和CSS开发Web网站(二)

五、CSS层叠样式表 理解样式表对控制页面元素外观的作用 掌握样式规则的语法 理解各种选择器 理解样式代码在什么位置编写及它们的作用范围 掌握常用的样式属性 1、什么是CSS&#xff1f; CSS的英文全称为Cascading Style Sheet&#xff0c;中文翻译一般称为层叠样式…

如何建立一个属于自己的网站(小白教程)

多人都希望能有一个自己的博客网站&#xff0c;但是却只能停留在想的阶段&#xff0c;毕竟很多人其实是不懂开发技术的&#xff0c;但是实际上一个博客网站远远没有我们想想的那么复杂&#xff0c;即便是我们不懂技术也可以做一个自己的网站。那么接下就是具体操作了,那么我们首…

matery主题-给网站嵌入一个markdowm编辑器

文章目录特性1.下载markdown安装包2.移植文件3.导入editor的css和js4.新建MyMarkdown.ejs文件5.成功特性 支持“标准”Markdown / CommonMark和Github风格的语法&#xff0c;也可变身为代码编辑器&#xff1b;支持实时预览、图片&#xff08;跨域&#xff09;上传、预格式文本…

给网站嵌入一个markdowm编辑器

文章目录特性1.下载markdown安装包2.移植文件3.导入editor的css和js4.新建MyMarkdown.ejs文件5.成功特性 支持“标准”Markdown / CommonMark和Github风格的语法&#xff0c;也可变身为代码编辑器&#xff1b;支持实时预览、图片&#xff08;跨域&#xff09;上传、预格式文本…