js实现天猫淘宝购物放大镜效果

最新推荐文章于 2022-08-29 19:58:44 发布

阡陌路人

最新推荐文章于 2022-08-29 19:58:44 发布

阅读量593

点赞数

分类专栏： js特效篇

本文链接：https://blog.csdn.net/Iwokei/article/details/102877096

版权

前言分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子正文代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:...

摘要由CSDN通过智能技术生成

前言

分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子

正文

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				list-style: none;
				border: none;
			}
			#box{
				width: 400px;
				height: 400px;				
				margin: 100px 0 0 100px;
				position: relative;
				
			}
			#small_box{
				width: 100%;
				height: 100%;
				border: 1px solid #CCCCCC;
				box-sizing: border-box;
				position: relative;
			}
			
			#small_box img{
				width: 100%;
				height: 100%;
			}
			#mask{
				width: 100px;
				height: 100px;
				background-color:rgba(255,255,0 ,.4);
				position: absolute;
				left: 0;
				top: 0;
				cursor: move;
				display: none;
			}
			#big_box{
				width: 600px;
				height: 600px;
				border: 1px solid #CCCCCC;
				position: absolute;
				left: 410px;
				top: 0;

最低0.47元/天解锁文章

阡陌路人

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现天猫淘宝购物放大镜效果

前言分享一个笔者写过的js实现天猫淘宝购物放大镜效果的例子正文代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding:...
复制链接

扫一扫