hammer.js实现背景图手势缩放调整位置

<!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() var t=e.offsetTop; var l=e.offsetLeft; var w=e.offsetWidth; var h=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft; } a[0]=w;a[1]=h…

Qt中的Label和PushButton背景图自动缩放设置

Label 背景图自动缩放 QPixmap* pixmap = new QPixmap(":/images/HeadIcon/1.png"); pixmap->scaled(ui->label->size(),Qt::KeepAspectRatio); ui->label->setScaledContents(true); ui->label->setPixmap(*pixmap); PushButton 背景图自动缩放 ui->push…

移动开发框架，第【二】弹：Hammer.js 移动设备触摸手势js库

hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8…

JS实现背景图按时切换或者每次更新

首先要有一个添加背景图片的div <div id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myDiv{background-image:url("img/yellow.jpg");height:100%;} //注意添加的背景图一定要设置具体的数值高度才会显示,而这里用100%是不可能显示的,这就需要在这个div的父类元素(在这里也就是body了)设置height:1…

JS编写背景图切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图切换</title> <style type="text/css"> #wrap{ width: 300px;height: 225px; margin: 100px au…

JS——百度背景图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } body{ background-image: url("image/1.jpg"); } div{ margin-top:…

CSS 实现背景图尺寸不随浏览器缩放而变化

一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.huaban.com): 这样做的好处是,比如当你在1024*768px分辨率的屏幕上看到完整的背景,再换至1280*800px分辨率的显示器浏览,不会出现背景不能充满屏幕的情况.换句话说,就是在各个分辨率的显示器下都能看到充满屏幕的背景图. 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背…

NGUI 背景图自适应

背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:…

CSS实现背景图尺寸不随浏览器大小而变化的两种方法

一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( huaban.com ): 现在用CSS来实现这一效果. 首先需要一张足够大尺寸的图片,上图百度背景图的尺寸为1600*1000px( 图片地址:http://4.su.bdimg.com/ski…

javascript 手势缩放旋转拖动支持：hammer.js

原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 - 2014-09-28 * http://hammerjs.github.io/ * * Copyright (c) 2014 Jorik Tangelder; * Licensed under the MIT license */ (function(window, document, exp…

hammer.js触摸,手指缩放等许多手势操作

使用方法: 插件描述:Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件. <script src="http://eightmedia.github.com/hammer.js/hammer.js"></script> // 先要对监听的DOM进行一些初始化 var hammer = new Hammer(document.getElementById("container"…

H5案例分享：JS手势框架 —— Hammer.js

JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许同时监听多个手势.自定义识别器,也可以识别滑动方向. 二.事件 1.Rotate事件:在指定的dom区域内,当两个手指或更多手指成圆型旋转时触发(就像两个手指拧螺丝一样).该事件分别对以下事件进行监听并处理: Rotatestart:旋转开始:Rotatemove:旋转过程:Rotateend:旋转…

移动端手势库Hammer.js学习

感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别出常见的触摸.拖动.长按.缩放等行为. 依照官方文档,开始学习吧一.基本用法在页面上用<script>标签引用 http://hammerjs.github.io/dist/hammer.min.js 或将其下载使用 1. 页面结构: <style type="text/cs…

js实现移动端图片预览：手势缩放，手势拖动，双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font…

移动端手势事件 hammer.JS插件

一.引入hammer.JS 1.下载地址:http://download.csdn.net/detail/webxiaoma/9872249 2.官网地址:http://hammerjs.github.io/examples/ 3.CDN链接:http://hammerjs.github.io/dist/hammer.min.js 二.用法 1.首先我们先写一个出发事件的DOM元素 HTML: <style type="text/css">…

js多张图片合成一张图，canvas(海报图，将二维码和背景图合并) -----vue

思路:vue中图片合并首先准备好要合并的背景图,和请求后得到的二维码, canvas画图,将两张背景图和一张二维码用canvas画出来, 将canvas再转为img 注意canvas和图片的清晰图和图片的尺寸位置开始时canvas是隐藏的,两张背景图时显示的,当canvas画完后再转为img的时候,隐藏canvas和背景图,显示canvas转完的图片(也就是合并后的图片) 这个适配方式可能有些瑕疵,所以会加了很多设备的判断代码: html <div class="wap-p…

hammer.js手势库使用

hammer.js是一款移动端手势库组件,支持pan(拖动).swipe(滑动).tap(轻触).press(按压,即长按).doubletap(双击)等很多手势操作,提供比较完善的事件监听机制,但是使用的时候遇到很多事件官方默认没有开启,比如想要同时使用单击.双击.按压事件,必须设置如下: var hammer = new Hammer.Manager(document.getElementById("swiper-wrapper")); hammer.add( }) ); hamm…

分享一个快速设置背景的js 自动获取背景图的长宽

我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽自动获取背景图的长宽 : <div class="wrap"> <div style="background: url(images/by_01.jpg) no-repeat top center;"></div> <div style="background: url(images/by_02.jpg) no…

移动开发框架，Hammer.js 移动设备触摸手势js库

hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: http://eightmedi…

js 动态生成背景图 GeoPattern

以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> <head> <title>js 生成随机背景图</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></s…

css背景图等比例缩放，盒子随背景图等比例缩放

很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤.这用css竟然也是可以实现的,瞬间感觉自己的css弱爆了,下面是我写的小demo,我想在响应式的网站上,这个用途还是很广的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT…

hammer.js移动端手势库

hammer.js 是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. http://www.tuicool.c…