全国咨询热线:18720358503

微信小程序源码_js完成扩大镜特效

类别:行业新闻 发布时间:2021-01-12 浏览人次:

js实现放大镜特效     .Zhong   这篇文章主要为大家详细介绍了js实现放大镜特效,简单实用的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
title Document /title script src="jquery/2.0.0/jquery.min.js" /script style type="text/css" margin: 0; padding: 0; .imgBox{ width: 1000px; margin: auto; text-align: center; .small,.large{ font-size: 0; outline: 1px solid burlywood; margin: auto; .small{ margin: 20px auto; .large{ /*display: none;*/ .small,.small img,.large{ width: 300px; height: 200px; overflow: hidden; .large img{ width: 900px; height: 600px; .small,.large{ position: relative; .mark{ opacity: 0.5; background-color: #DEB887; z-index: 55; width: 100px; height: 66.px; display: none; .mark,.large img{ position: absolute; left: 0; top: 0; /style /head body div div img src="img/img_14.jpg"/ div /div /div div img src="img/img_14.jpg"/ /div /div script type="text/javascript" $(function(){ var $small = $(".small"), $mark = $(".mark"), $large = $(".large"); $small.on("mousemove",function(e){ // 在鼠标移到小图片中显示出mark $mark.css("display","block"); // $large.css("display","block"); // 获取mark的一半宽度高度 var hw = $mark.width()/2, hh = $mark.height()/2; // 获取鼠标在当前图片中的位置 var lf = e.pageX-$small.offset().left-hw, tt = e.pageY-$small.offset().top-hh; // 获取mark的想x,y轴偏移率 var ix = lf/$small.width(), iy = tt/$small.height(); // 获取边缘线 var lb = 1-hw/$small.width()*2, tb = 1-hh/$small.height()*2; // 计算和边缘的关系 var ix = ix lb ix 0 ix:0:lb, iy = iy tb iy 0 iy:0:tb; // 进行大图和小图百分比计算 $mark.css("left",ix*100+"%").css("top",iy*100+"%"); $large.children().css("left",-ix*300+"%").css("top",-iy*300+"%"); }).on("mouseout",function(){ // 鼠标移出后mark隐藏 $mark.css("display","none"); // $large.css("display","none"); /script /body /html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


推荐阅读

微信小程序源码_js完成扩大镜特效

js完成变大镜动画特效 .Zhong 本文关键为大伙儿详尽详细介绍了js完成变大镜动画特效,简易好用的编码,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下title Docume...

2021-01-12
网站怎么建设才能兼容各种平台

网站如何基本建设才可以适配各种各样服务平台 : :00 适配是检索模块优化算法的排行标准,比过去一切情况下都更为关键。假若网立在所有机器设备上面兼容问题,那麼在检索中排行...

2021-01-12
打卡小程序怎么做_vue 怎么添加全局函数或全局变

vue 怎样加上全局性涵数或全局性自变量及其宣传单页面的title设定小结 这儿设定title的方式是根据在百度搜索检索的说白了黑高新科技,防止了安卓系统和iOS的兼容问题书写var s...

2021-01-12
移动互联网的使用者将超过传统PC端

【引言】移动智能化机器设备的迅速普及化和2G互联网信息内容技术性的持续完善,应用智能化手机上网上的网友总数在不断提升。广州市APP订制手机软件开发设计企业商侣手机软件觉...

2021-01-12
解析行业门户网站推广究竟存在什么问题?

互连网时期,公司网站找寻客户资源只是借助检索模块早已不可以考虑客户多种多样化的要求了,假如百度关键词挑选不善,再如何勤奋全是徒劳无功,从而,许多公司亦刚开始趋向于...

2021-01-12
广州凡科互联网科技股份有限公司招聘女装买手

招聘人数:11职位信息岗位职责:1. 负责公司品牌的定位,并购买男、女装流行款式样板;2. 结合公司产品风格定位,做好流行资讯和市场调研工作;3. 分析顾客需求,制定合适的商品结...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信