首页 > 代码库 > 使用jQuery对图片进行居中设置
使用jQuery对图片进行居中设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 4000px; width: 4000px; } </style> <script src="http://www.mamicode.com/jquery-1.12.4.js"></script> <script> //当页面加载的时候 $(window).load(function () { //获取页面的宽度 var pageWidth = $(window).width(); //获取页面的高度 var pageHeight = $(window).height(); //获取图片的宽度 var picWidth = $("img").width(); //获取图片的高度 var picHeight = $("img").height(); //计算top值 // 页面的高度的一半 - 图片高度的一半 var top = (pageHeight-picHeight)/2; //计算left值 // 页面宽度的一半 - 图片宽度的一半 var left = (pageWidth-picWidth)/2; //设置图片的位置 $("img").offset({ "top":top, "left":left }); $(document).scroll(function(){ var scrollleft=$(this).scrollLeft(); var scrolltop=$(this).scrollTop(); $("img").offset({ "top":top+scrolltop, "left":left+scrollleft }) });// $(document).scroll(function () {// var scrollTop = $(this).scrollTop();// var scroolLeft = $(this).scrollLeft();//// $("img").offset({// "top":top+scrollTop,// "left":left+scroolLeft// });// }); }) </script></head><body><img src="http://www.mamicode.com/01.jpg" width="200"></body></html>
使用jQuery对图片进行居中设置
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。