pc端 前端页面 js灯箱效果能放大缩小吗

作者&投稿:壤拜 (若有异议请与网页底部的电邮联系)
在pc端不考虑移动端,前端做响应式布局的时候,需要自适应字体大小吗~

前端开发中PC端和移动端网站的区别,主要是:
1、PC端在开发过程中考虑的是浏览器兼容性,移动端开发中考虑的是手机兼容性问题,做移动端开发,更多考虑的是手机分辨率的自适应和不同手机操作系统的略微差异化;

2、在部分事件的处理上,移动端自然是偏向于触屏的,另外包括移动端弹出的手机键盘该如何处理,这样的问题在PC上肯定不会遇到,但在移动端,如果你没有经验,处理起来是相当麻烦的;
3、布局上,移动端开发是要做到页面布局自适应的,而PC端页面布局的比例会相对固定;
4、在动画效果处理上,PC端要考虑IE的兼容性,通常用JS做动画的通用性会好一些,但相比CSS3却牺牲了较大的性能,而在手机端,如果要做一些动画、特效等,第一选择肯定是CSS3,既简单,效率又高。

业务的应用场景不同
web前端开发主要指传统的PC端网页开发,页面主要是运行在PC端浏览器中,移动前端开发出来的页面主要是运行在手机上;直观上会感觉,PC端页面大一些,移动端页面小一些,但是根据开发经验,页面大可并不代表书写的代码复杂,页面小也并不意味着开发简单,难与易主要还是取决于具体的业务需求。

新技术的使用不同
由于在移动端主要以webkit内核为主,对于HTML5等新技术支持的更好,所以可以更大范围的使用新技术;而PC端开发由于很多场景下要求兼容IE等老版本浏览器,出于浏览器兼容性的考虑,有些情况下限制了新技术的使用。

页面的适配性不同
传统PC端的页面开发一般都会选择给页面设定一个固定宽度,两侧有留白,但是移动端的页面由于其载体手机屏幕比PC要小很多,一般都会选择尽可能多的在手机屏幕上显示内容,这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。从这一点上来说移动端页面的适配难度更高一些。

页面的性能不同
PC端的网络情况一般比较稳定,都是通过网线或者Wi-Fi连接网络;但是移动端就比较复杂,除了Wi-Fi,还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生,不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大,否则在恶劣网络情况下时,页面将会无法访问 ,严重影响用户体验。

框架选型不同
由于移动端网络情况的不稳定,导致我们在移动端页面框架选型时,一般只考虑小而美的框架,例如像zepto.js这样的压缩之后只有9.6K,就能满足一般业务的需要,如果是想要构建更复杂的单页面应用,可以选择像vue.js这样的框架,功能强大,但体积压缩后却只有20多K。而web端相对选择的范围就比较大,一些比较重型的框架也可以根据项目需求加以考虑,例如古老但庞大的ext.js,依然凭借着众多UI组件活跃在一些企业的后台管理系统项目中。

可以监听滚轮事件 mousewheel 判断是点击的图片是否显示,显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform :scale属性,也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理

可以通过鼠标滚轮滚动事件来做

有的,用Owl Carousel能实现你说的效果,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>zoom</title>
</head>
<body>
<image id="image" src="data:image/jpeg;base64,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">

<script type="text/javascript">
var image = document.querySelector('#image');
var iw = image.width,ih = image.height,zoomSept = 5;
image.addEventListener('mousewheel',function(e){

if( e.wheelDelta >0){
this.width+=5;
this.height+=5;
}else{
if(this.width<iw/2)return;
this.width-=5;
this.height-=5;
}
},false)
</script>
</body>
</html>